一、定义
- Vue (读音 /vjuː/，类似于 view) 是一套用于
构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 - Vue.js 模板语法
- Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
- Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
- 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
后台的框架模型：
M(model)模型（操作数据库的方法）
V(view)视图（页面）
C(controller)控制器（协调数据库和模型）
前台的框架模型（是后台框架模型V的信息分类）：
M(model)模型（这个页面的数据）
V(view)这个页面的视图html
VM(逻辑，干什么事的思路)
二、安装
我使用的是vue-cli3，使用下列任一命令安装这个新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确：
vue --version
注意：mac安装报错Error: EACCES: permission denied, access '/usr/local/lib/node_modules，原因就是没有权限的问题
原因: 执行命令行命令时没有获得管理员权限
解决方案：在命令行前面添加sudo获取管理员权限，输入管理员密码就行
例如原来的是: npm install -g vue-cli
应该改为：sudo npm install -g vue-cli（vue-cli2）
sudo npm install -g @vue/cli(vue-cli3)
再输入密码就行`
image.png
新建项目1：
image.png
三、vue挂载
之前vue-cli2创建项目后，如果自定义js插件，可以通过
import xxx from 'xxx'
Vue.prototype.$xxx = xxx
将xxx挂载到Vue原型上，但到了cli3中，根据网上资料，现在
import Vue from 'vue' 并不能返回Vue对象，如果还是使用
Vue.prototype.xxx进行调用
cli3中现在是通过createApp创建Vue实例对象，我们需要将js组件引入，通过props的形式传递（axios以前是需要挂载，现在通过VueAxios可以直接use使用）
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
import gojs from 'gojs'
import xxx from './utils/xxx.js'
createApp(App, { go: gojs,xxx:xxx }).use(store).use(router).use(VueAxios,axios).mount('#app')
在子组件中引用go和xxx
<template>
<div class="sub">This is an subpage</div>
</template>
<script>
export default {
name: 'Sub',
props: {
go:Object,//定义prop接收
xxx:Object //定义prop接收
},
mounted(){
let $ = this.$props.go.GraphObject.make //可直接调用
this.$props.xxx.post() //可直接调用
},
methods:{}
}
</script>
<style>
</style>
四、第一个案例
//实例化vue
new Vue({
// Vue 构造器中有一个el 参数，它是 DOM 元素中的 id,
//这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
el: "#app",
//data 用于定义所有的基础数据，数据对象
//当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。
//当这些属性的值发生改变时，html 视图将也会产生相应的变化。
data: {
msg: "<i>大家好</i>",
num: 1,
num1: 10,
flag: true,
arr: [1, "hello", 3, "是", 5, 6],
list: ['one', 'two', 'three'],
inputValue: "",
str: ""
},
//methods 用于定义的函数，可以通过 return 来返回函数值。
methods: {
// 和下面的方法一样,写法不同而已
// noFlag:function(){},
noFlag() {
this.flag = !this.flag;
},
asyncStr() {
this.str = this.inputValue;
this.inputValue = "";
}
}
})
五、插值
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值（插值表达式）插值表达式，用于输出对象属性和函数返回值
例：<h1>{{msg}}</h1>
六、指令
-
定义
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上 -
v-text：给模板进行赋值,相当于innerText
例：<h1 v-text="msg"></h1> -
v-html：使用 v-html 指令用于输出 html 代码，相当于innerHtml
例：<h1 v-html="msg"></h1>
插值表达式，v-text，v-html的区别：
1、插值表达式存在闪烁的问题；
2、v-text和v-html是全部替换，{{}}是可以进行部分替换；
3、v-html可以解析HTML标签，v-text和{{}}不可以；
-
v-bind：绑定属性
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
例：v-bind:属性="变量"
<a href="#" v-bind:title="num">哈哈</a>
简写：
:属性="变量"
<a href="#" :title="num">哈哈</a> -
v-on：事件监听
vue的事件应该写在vue实例的Methods对象当中。
通常情况下，我们需要使用一个方法来调用 JavaScript 方法。
v-on 可以接收一个定义的方法来调用。
例：
v-on:事件名="方法名"
<button v-on:click="noFlag">按钮</button>
简写：
@事件名="方法名"
<button @click="noFlag">按钮</button> -
v-model：双向数据绑定
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定，只可以用在表单元素上
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
input type="text/password/number/radio/checkbox/hidden……"
select
textarea
例：
<input type="text" v-model="inputValue">
<input type="button" v-on:click="asyncStr()">
<h1>{{str}}</h1> -
v-for：迭代（循环）
可以迭代数组 对象 数组对象
vue的列表渲染，即for循环
例：
当循环数组时，
<li v-for="(item,index) in arr"></li>
item表示数组里的数据，index表示下标，arr表示要循环的数组
当循环对象时，
<li v-for="(value, key, index) in object"></li>
value表示值，key表示键，index表示下标，object表示要循环的对象
注意的是 在vue2.0之后要给迭代的元素绑定key属性 key的属性可以是唯一的数字或者字符串必须和v-bind一块用
<ul>
<li v-for="(item,index) in arr" v-bind:key="index"></li>
</ul> -
v-show v-if：条件渲染
v-show和v-if都是通过布尔值来控制元素
v-show 是通过css操控显示或隐藏，即改变display的属性值
v-if 不符合条件的数据,不渲染
例：
<h1 v-show="flag">{{num1}}</h1>
<h1 v-if="flag">{{num1}}</h1>
七、修饰符：
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
用法:@事件名.修饰符="方法名"
- .stop 阻止冒泡
- .prevent 阻止事件的默认行为
- .capture添加事件侦听器时使用事件捕获模式先执行外面的 再执行里面的
<div class="box" @click.capture="test">
<input type="button" :title="title+1" value="点击" @click.stop="tip">
</div> - .self 只当事件在该元素本身比如不是子元素）触发时触发回调
.self与.stop的区别：.self只是能确保本身被触发,stop能阻止所有元素的冒泡 - .once 事件只触发一次
<a href="http://www.baidu.com" @click.prevent.once="chang()">点击</a>
阻止默认事件只能触发一次
八、简易购物车：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- v-model双向绑定数据 -->
<p>商品名称：<input type="text" v-model="name"></p>
<p>商品价格：<input type="number" v-model="price"></p>
<!-- v-on:事件名="方法名" -->
<p><input type="button" value="添加" @click="add"></p>
<p><input type="button" value="全部删除" @click="removeAll"></p>
<p><input type="button" value="正删除" @click="removeStart"></p>
<p><input type="button" value="倒删除" @click="removeEnd"></p>
<p>请输入搜索的关键字：<input type="text" v-model="search"></p>
<table>
<thead>
<tr>
<th>商品序号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 将数据循环遍历到页面上 -->
<tr v-for="(item,index) in list" v-show="item.name.includes(search)">
<td>{{index+1}}</td><!-- 序号 -->
<td>{{item.name}}</td><!-- 商品名 -->
<td>{{item.price}}</td><!-- 商品价格 -->
<!-- 商品数量改变，给按钮添加事件 -->
<td><button @click="item.count -=1 ">-</button><span>{{item.count}}</span><button
v-on:click="item.count += 1">+</button></td>
<td>{{item.price*item.count}}</td><!-- 小计 -->
<td><button v-on:click="remove(index)">删除</button></td>
</tr>
</tbody>
</table>
<!-- 合计，调用合计的方法，方法有返回值 -->
<h1>合计:{{all()}}</h1>
</div>
</body>
<script>
//实例化vue对象
new Vue({
// Vue 构造器中有一个el 参数，它是 DOM 元素中的 id,
//这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
el: '#app',
//data 用于定义所有的基础数据，数据对象
//当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。
//当这些属性的值发生改变时，html 视图将也会产生相应的变化。
data: {
price: 0, //v-model双向绑定数据,绑定商品单价的那个表单
name: '', //v-model双向绑定数据,绑定商品名称的那个表单
list: [], //数组
search: '', //v-model双向绑定数据,绑定搜索的那个表单
},
//methods 用于定义的函数，可以通过 return 来返回函数值。
methods: {
//添加
add() {
//向数组中添加数据,如果要调用vue对象data里的数据,必须使用this调用
this.list.push({
name: this.name, //添加name为上面data数据里的name
price: this.price, //添加price为上面data数据里的price
count: 1, //定义初始数量
})
this.name = '' //将商品名称表单内容清空
this.price = 0 //将商品单价表单数量清0
},
//删除,删除时,需要传入下标,锁定要删除的数据
remove(index) {
this.list.splice(index, 1) //删除本条数据
},
//全部删除
removeAll() {
this.list.splice(0, this.list.length) //获取到list的长度,全部删除
},
//正着删
removeStart() {
this.list.shift() //shift(),将数组的第一个元素删除
},
//倒着删
removeEnd() {
this.list.pop() //pop(),将数组的最后一个元素删除
},
//合计
all() {
var he = 0 //定义变量用来存储合计数据
//遍历list数组
for (var i in this.list) {
//将每一条数据里的单价*数量,加入变量he里
he += this.list[i].price * this.list[i].count
}
return he //返回合计数据
},
},
})
</script>
</html>
九、过滤器(filter)：
定义：
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
过滤器分为两种，全局过滤器和局部过滤器。
过滤器的调用有一个就近原则 先调用局部 在调用全局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<!-- 调用过滤器： -->
<!-- {{变量|管道符}} -->
<h1>{{msg | big}}</h1>
</div>
</body>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 1.定义全局过滤器：
// 在创建 Vue 实例之前全局定义过滤器。
// Vue.filter(“过滤器名”,function(需要过滤的字符串，参数列表){
// 处理需要过滤的字符串然后 然后返回
// }
//全局的过滤器,定义在实例化vue对象之前
Vue.filter("big", function (str) {
var arr = str.split("").reverse();
str = arr.join("");
return str;
})
var vm = new Vue({
el: "#app",
data: {
msg: ""
},
// 2.定义局部过滤器：
// 在一个组件的选项中定义本地的过滤器。
// Filters:{过滤器名(function(需要过滤的字符串){
// 处理需要过滤的字符串然后 然后返回
// })
// }
//局部的过滤器,定义在实例化vue对象里面
filters: {
big(str) {
var start = str.slice(0, 1).toLocaleUpperCase();
var end = str.slice(1);
return start + end;
}
}
})
</script>
</html>
十、自定义指令(directive)
定义：
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。比如聚焦输入框
指令名 在定义的时候不带 v- 调用的带v-
自定义指令分为两种，全局指令和局部指令。
钩子函数：
一个指令定义对象可以提供如下几个钩子函数 (均为可选)；
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
vue-cli3关闭eslint校验
image.png
image.png
网友评论