vue概述
mvvm模式
-
M：即Model，模型，包括数据和一些基本操作 -
V：即View，视图，页面渲染结果 -
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）
在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：
-
只要我们Model发生了改变，View上自然就会表现出来。 -
当用户修改了View，Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。
mvvm模式的优势：
-
低耦合
视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化时Model可以不变，当Model变化时View也可以不变
-
可重用性
可以把一些视图逻辑放在一个ViewModel里面，让多个View重用这段视图逻辑代码
-
独立开发
开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
而我们今天要学习的，就是一款MVVM模式的框架：Vue
快速入门
安装vue
下载安装
下载地址：https://github.com/vuejs/vue
可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下载解压，得到vue.js文件。可以在页面中直接通过script引入vue.js文件
使用cdn
或者也可以直接使用公共的CDN服务：
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue 入门案例（演示用，不做讲解）
HTML模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{name}}，非常酷！</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app", // el即element，要渲染的页面元素
data: {
name: "Vue测试"
}
});
</script>
</body>
</html>
-
首先通过 new Vue()来创建Vue实例 -
然后构造函数接收一个对象，对象中有一些属性： -
name：这里指定了一个name属性 -
el ：是 element的缩写，通过id选中要渲染的页面元素，本例中是一个div -
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中 -
页面中的 h2元素中，通过{{name}}的方式，来渲染刚刚定义的name属性
更神奇的在于，当你修改name属性时，页面会跟着变化。
双向绑定
对刚才的案例进行简单修改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{{name}}，非常酷！
有{{num}}个酷炫功能！
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app", // el即element，要渲染的页面元素
data: {
name: "Vue测试",
num: 1
}
});
</script>
</body>
</html>
-
在 data中添加了新的属性：num -
在页面中有一个 input元素，通过v-model与num进行绑定 -
同时通过 {{num}}在页面输出
可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。
-
input与num绑定，input的value值变化，影响到了data中的num值 -
页面 {{num}}与数据num绑定，因此num值变化，引起了页面效果变化。
没有任何dom操作，这就是双向绑定的魅力。
事件处理
在页面添加一个按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">点我</button>
<h2>
{{name}}，非常酷！
有{{num}}个酷炫功能！
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app", // el即element，要渲染的页面元素
data: {
name: "Vue测试",
num: 1
}
});
</script>
</body>
</html>
-
这里用 v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num -
普通 onclick是无法直接操作num的
Vue 实例
创建Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({
// 选项
})
在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：
-
el -
data -
methods -
… …等
接下来，一一介绍。
模板或元素
每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染；可以通过el属性来指定。
例如一段html模板：
<div id="app">
</div>
然后创建Vue实例，关联这个div
var vm = new Vue({
el:"#app"
})
这样，Vue就可以基于id为 app 的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
数据
当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
html：
<div id="app">
<input type="text" v-model="name"/>
</div>
js：
var vm = new Vue({
el:"#app",
data:{
name:"ZHANGSAN"
}
})
-
name的变化会影响到input的值 -
input中输入的值，也会导致vm中的name发生改变
方法
Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="add">点我</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {},
methods: {
add: function () {
console.log("点我了...233")
}
}
});
</script>
</body>
</html>
生命周期钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。
生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程
| 生命周期函数 | 含义 |
|---|---|
| beforeCreate（vue对象创建前） | 组件实例刚被创建，组件属性计算之前，比如data属性等 |
| created（创建后） | 模板编译、挂载之前 |
| mounted（载入后） | 模板编译、挂载之后 |
| beforeUpdate（更新前） | 组件更新之前 |
| updated（更新后） | 组件更新之后 |
| beforeDestroy（销毁前） | 组件销毁前调用 |
| destroyed（销毁后） | 组件销毁后调用 |
vm.$el ：Vue 实例使用的根 DOM 元素
vm.$root ：当前的 Vue 实例。
Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs生命周期</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function () {
console.log(this);
showData('创建vue实例前', this);
},
created: function () {
showData('创建vue实例后', this);
},
beforeMount: function () {
showData('挂载到dom前', this);
},
mounted: function () {
showData('挂载到dom后', this);
},
beforeUpdate: function () {
showData('数据变化更新前', this);
},
updated: function () {
showData('数据变化更新后', this);
},
beforeDestroy: function () {
showData('vue实例销毁前', this);
},
destroyed: function () {
showData('vue实例销毁后', this);
}
});
function showData(process, obj) {
console.log(process);
console.log('data 数据：' + obj.message)
console.log('挂载的对象：')
console.log(obj.$el)
}
</script>
</body>
</html>
钩子函数
例如：created代表在vue实例创建后；
可以在Vue中定义一个created函数，代表这个时期的构造函数：
创建示例html页面如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
// 初始化为空
msg: ""
},
// 钩子函数
created() {
// this 表示Vue实例
this.msg = "hello vue.created";
console.log(this)
}
});
</script>
</body>
</html>
this
可以看下在vue内部的this变量是谁，在created的时候，打印this
var app = new Vue({
el:"#app",
data:{
msg: ""
},
//钩子函数
created() {
//this表示vue实例
this.msg = "hello vue. created.";
console.log(this);
}
});
控制台的输出；
总结：this 就是当前的Vue实例，在Vue对象内部，必须使用 this 才能访问到Vue中定义的data内属性、方法等。
应用场景
-
在beforeCreate生命周期函数运行时，可以添加loading动画
-
在created生命周期函数运行时，可以结束loading动画，还可以做一些初始化，实现函数自执行等操作
-
最经常使用的是mounted生命周期函数
可以发起后端数据请求，取回数据
可以接收页面之间传递的参数
可以子组件向父组件传递参数等
指令
什么是指令？
指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。
插值表达式
花括号
格式：
{{表达式}}
说明：
-
该表达式支持JS语法，可以调用js内置函数（ 必须有返回值） -
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1; -
可以直接获取Vue实例中定义的数据或函数
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
msg: "hello vue."
}
});
</script>
</body>
</html>
插值闪烁
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的 {{}} ，加载完毕后才显示正确数据，称为插值闪烁。解决办法是通过v-text和v-html替换
v-text 和 v-html
使用v-text和v-html指令来替代 {{}}
说明：
-
v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出 -
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
示例，改造原页面内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--{{msg}}-->
v-text：<span v-text="msg"></span><br/>
v-html：<span v-html="msg"></span><br/>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
// msg: "hello vue."
msg: "<h2>hello vue.</h2>"
}
});
</script>
</body>
</html>
并且不会出现插值闪烁，当没有数据时，会显示空白。
v-model
刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。
接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。
目前v-model的可使用元素有：
-
input -
select -
textarea -
checkbox -
radio -
components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" value="Java" v-model="language">Java<br/>
<input type="checkbox" value="PHP" v-model="language">PHP<br/>
<input type="checkbox" value="Swift" v-model="language">Swift<br/>
<h2>
你选择了：{{language.join(",")}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
language: []
}
});
</script>
</body>
</html>
-
多个 checkbox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型 -
radio对应的值是input的value值 -
input和textarea默认对应的model是字符串 -
select单选对应字符串，多选对应也是数组
v-on
基本用法
v-on指令用于给页面元素绑定事件。
语法：
v-on:事件名="js片段或函数名"
简写语法：
@事件名="js片段或函数名"
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--直接写js片段-->
<button @click="num++">增加</button>
<!--使用函数名，该函数必须要在vue实例中定义-->
<button @click="decrement">减少</button>
<h2>
num={{num}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
decrement() {
this.num--;
}
}
});
</script>
</body>
</html>
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
-
.stop：阻止事件冒泡 -
.prevent：阻止默认事件发生 -
.capture：使用事件捕获模式 -
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行） -
.once：只执行一次
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--直接写js片段-->
<button @click="num++">增加</button>
<!--使用函数名，该函数必须要在vue实例中定义-->
<button @click="decrement">减少</button>
<h2>
num={{num}}
</h2>
<hr>
事件冒泡测试：<br/>
<div style="background-color: lightblue;width: 100px;height: 100px" @click="print('div被点击了')">
<button @click.stop="print('点击了button')">点我试试</button>
</div>
<br>阻止默认事件：<br>
<a href="http://www.baidu.com" @click.prevent="print('点击了超链接')">百度</a>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
decrement() {
this.num--;
},
print(str) {
console.log(str);
}
}
});
</script>
</body>
</html>
v-for
遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
遍历数组
语法：
v-for="item in items"
-
items：要遍历的数组，需要在vue的data中定义好。 -
item：循环变量
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
users: [
{"name": "小明", "age": 13, "gender": "男"},
{"name": "小红", "age": 13, "gender": "女"},
{"name": "小绿", "age": 4, "gender": "男"}
]
}
});
</script>
</body>
</html>
数组角标
在遍历的过程中，如果需要知道数组角标，可以指定第二个参数：
语法：
v-for="(item,index) in items"
-
items：要迭代的数组 -
item：迭代得到的数组元素别名 -
index：迭代到的当前元素索引，从0开始。
示例：
<div id="app">
<ul>
<li v-for="(user,index) in users">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
遍历对象
v-for除了可以迭代数组，也可以迭代对象。语法基本类似
语法：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
-
1个参数时，得到的是对象的值 -
2个参数时，第一个是值，第二个是键 -
3个参数时，第三个是索引，从0开始 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<ul>
<li v-for="(user,index) in users">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<ul>
<!--1个参数时，得到的是对象的值-->
<li v-for="value in person">
{{value}}
</li>
</ul>
<hr>
<ul>
<!--2个参数时，第一个是值，第二个是键-->
<li v-for="(value,key ) in person">
{{value}}--{{key}}
</li>
</ul>
<hr>
<ul>
<!--3个参数时，第三个是索引，从0开始-->
<li v-for="(value,key,index ) in person">
{{value}}--{{key}} -- {{index}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
users: [
{"name": "小明", "age": 13, "gender": "男"},
{"name": "小红", "age": 13, "gender": "女"},
{"name": "小绿", "age": 4, "gender": "男"}
],
person: {"name": "zhangsan", "age": 13, "gender": "男", "address": "中国"}
}
});
</script>
</body>
</html>
key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
如果使用key这个功能可以有效的提高渲染的效率；key一般使用在遍历完后，又增、减集合元素的时候更有意义。
但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。也就是key是该的唯一标识。
示例：
<ul>
<li v-for="(item,index) in items" :key="index"></li>
</ul>
-
这里使用了一个特殊语法： :key=""后面会讲到，它可以让你读取vue中的属性，并赋值给key属性 -
这里绑定的key是数组的索引，应该是唯一的
v-if 和 v-show
基本使用
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
语法：
v-if="布尔表达式"
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true
}
});
</script>
</body>
</html>
与 v-for 结合
当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul>
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});
</script>
</body>
</html>
v-else
可以使用 v-else 指令来表示 v-if 的“else 块”：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul v-if="show">
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
<li v-else style="background-color: blue">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});
</script>
</body>
</html>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-else-if ，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
类似于 v-else ， v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display 。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul v-if="show">
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
<li v-else style="background-color: blue">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<h2 v-show="show">
你好，世界！
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});
</script>
</body>
</html>
v-bind
属性上使用vue数据
看这样一个案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
<style type="text/css">
div {
width: 100px;
height: 100px;
color: white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<div :class="">
点击按钮改变背景颜色
</div>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
color: "red"
}
});
</script>
</body>
</html>
解读：
-
页面有两个按钮，点击时，会改变Vue实例中的color值，这个值与前面定义的CSS样式一致。 -
目前div的 class为空，希望实现点击按钮后，div的class样式会在.red和.blue之间切换
该如何实现？
大家可能会这么想，既然color值会动态变化为不同的class名称，那么我们直接把color注入到class属性就好了，于是就这样写：
<div class="{{color}}"></div>
这样写是错误的！因为插值表达式不能用在标签的属性中。
此时，Vue提供了一个新的指令来解决：v-bind，语法：
v-bind:属性名="Vue中的变量"
例如，在这里我们可以写成：
<div v-bind:class="color"></div>
不过，v-bind太麻烦，因此可以省略，直接写成： ，:属性名='属性值' ，即：
<div :class="color"></div>
class属性的特殊用法
上面虽然实现了颜色切换，但是语法却比较啰嗦。
Vue对class属性进行了特殊处理，可以接收数组或对象格式
对象语法：可以传给 :class 一个对象，以动态地切换 class：
<div :class="{ red: true,blue:false }"></div>
-
对象中，key是已经定义的class样式的名称，如本例中的：red 和 blue -
对象中，value是一个布尔值，如果为true，则这个样式会生效，如果为false，则不生效。
之前的案例可以改写成这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
<style type="text/css">
div {
width: 100px;
height: 100px;
color: white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<!--v-bind 简写为 :-->
<div :class="color">
点击按钮改变背景颜色
</div>
<hr>
<br>
<button @click="bool=!bool">点我改变下面色块的颜色</button>
<div :class="{red:bool, blue:!bool}">
点击按钮改变背景颜色
</div>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
color: "red",
bool:true
}
});
</script>
</body>
</html>
首先class绑定的是一个对象：{red:bool, blue: !bool}
red和blue两个样式的值分别是bool和!bool，也就是说这两个样式的生效标记恰好相反，一个生效，另一个失效。
bool默认为true，也就是说默认red生效，blue不生效
现在只需要一个按钮即可，点击时对bool取反，自然实现了样式的切换
计算属性
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，有一个日期的数据，但是是毫秒值：
data:{
birthday:1429032123201 // 毫秒值
}
在页面渲染，希望得到yyyy-MM-dd的样式则需要如下处理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>
你的生日是：
{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
birthday: 1429032123201
}
});
</script>
</body>
</html>
虽然能得到结果，但是非常麻烦。
Vue中提供了计算属性，来替代复杂的表达式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>
你的生日是：
{{new Date(birthday).getFullYear()}}-{{new Date(birthday).getMonth()+1}}-{{new Date(birthday).getDay()}}
</h2>
<hr>
<h2>
computed计算方式；你的生日为：{{birth}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
birthday: 1429032123201
},
computed: {
birth() {
const date = new Date(this.birthday);
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay();
}
}
});
</script>
</body>
</html>
计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
过滤器
说明
官方说法：Vue.js 允许你自定义过滤器，可被用于一些常见的==文本格式化==。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。
通俗的来说：过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
过滤器的种类：
-
全局过滤器 -
局部过滤器
过滤器的使用步骤
定义过滤器
-
全局过滤器
Vue.filter('过滤器名称', function (value[,param1,...] ) {
//逻辑代码
}) -
局部过滤器
new Vue({
filters: {
'过滤器名称': function (value[,param1,...] ) {
// 逻辑代码
}
}
})
应用过滤器
{{ 表达式 | 过滤器名字}}
过滤器不带参数
案例1：日期格式化
<body>
<div id="myDiv">
{{birthday | dateFormat }}
</div>
<script src="../js/vue.js"></script>
<script src="../js/moment.js"></script> // 需要引入一个日期处理的一个工具类
<script type="text/javascript">
// 定义过滤器
Vue.filter("dateFormat",function(value){
return moment(value).format("YYYY-MM-DD HH:mm:ss");
});
const app = new Vue({
el: "#myDiv",
data: {
birthday: new Date()
}
});
</script>
</body>
案例2：文本格式化
<body>
<div id="myDiv">
{{message | messageFormat}} <br/>
{{message }} // 值并没有改变
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
Vue.filter("messageFormat",function(value){
return value.replace("很棒","优秀");
});
const app = new Vue({
el: "#myDiv",
data: {
message: "HelloWorld,是一个很棒的青年"
}
});
</script>
</body>
过滤器带参数
<body>
<div id="myDiv">
{{birthday | dateFormat }} <br/> // 不传递格式化标准就用完整写法
{{birthday | dateFormat("YYYY-MM-DD") }} // 传入了格式化标准就用传递的写法进行格式化
</div>
<script src="../js/vue.js"></script>
<script src="../js/moment.js"></script>
<script type="text/javascript">
Vue.filter("dateFormat",function(value,pattern = "YYYY-MM-DD HH:mm:ss"){
return moment(value).format(pattern);
});
const app = new Vue({
el: "#myDiv",
data: {
birthday: new Date()
}
});
</script>
</body>
watch
监控
watch可以让我们监控一个值的变化。从而做出相应的反应。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message">
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
message: "hello vue"
},
watch: {
message(newValue, oldValue) {
console.log("新值：" + newValue + "；旧值：" + oldValue)
}
}
});
</script>
</body>
</html>
深度监控
如果监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<hr>
<br>
<input type="text" v-model="person.name"><br>
<input type="text" v-model="person.age">
<button @click="person.age++">+</button>
<h2>
姓名为：{{person.name}}；年龄为：{{person.age}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
message: "hello vue",
person: {"name": "zhangsan", "age": 12}
},
watch: {
message(newValue, oldValue) {
console.log("新值：" + newValue + "；旧值：" + oldValue)
},
person: {
// 开启深度监控，可以监控到对象属性值的变化
deep: true,
// 监控的处理办法
handler(obj) {
console.log("name = " + obj.name + ", age=" + obj.age);
}
}
}
});
</script>
</body>
</html>
变化：
以前定义监控时，person是一个函数，现在改成了对象，并且要指定两个属性：
-
deep:代表深度监控，不仅监控person变化，也监控person中属性变化 -
handler：就是以前的监控处理函数
组件化
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
全局组件
我们通过Vue的component方法来定义一个全局组件。
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 定义全局组件，两个参数：1，组件名称。2，组件参数
Vue.component("counter",{
template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
data(){
return {
count:0
}
}
})
var app = new Vue({
el:"#app"
})
</script>
-
组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等 -
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。 -
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板 -
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。 -
data必须是一个函数，不再是一个对象。
组件的复用
定义好的组件，可以任意复用多次：
<div id="app">
<!--使用定义好的全局组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
你会发现每个组件互不干扰，都有自己的count值。怎么实现的？
组件的data属性必须是函数！
当我们定义这个counter组件时，它的data 并不是像这样直接提供一个对象：
data: {
count: 0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！
局部注册
一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。
因此，对于一些并不频繁使用的组件，我们会采用局部注册。
我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：
const counter = {
template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
data(){
return {
count:0
}
}
};
然后在Vue中使用它：
var app = new Vue({
el:"#app",
components:{
counter:counter // 将定义的对象注册为组件
}
})
-
components就是当前vue对象子组件集合。 -
其key就是子组件名称 -
其值就是组件对象的属性 -
效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用
组件通信
通常一个单页应用会以一棵嵌套的组件树的形式来组织：
-
页面首先分成了顶部导航、左侧内容区、右侧边栏三部分 -
左侧内容区又分为上下两个组件 -
右侧边栏中又包含了3个子组件
各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。
父向子传递
-
父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据） -
子组件通过props接收父组件属性
父组件使用子组件，并自定义了title属性：
<div id="app">
<h1>打个招呼：</h1>
<!--使用子组件，同时传递title属性-->
<introduce title="父组件传递的消息"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("introduce",{
// 直接使用props接收到的属性来渲染页面
template:'<h1>{{title}}</h1>',
props:['title'] // 通过props来接收一个父组件传递的属性
})
var app = new Vue({
el:"#app"
})
</script>
传递复杂数据
我们定义一个子组件，并接受复杂数据：
const myList = {
template: '\
<ul>\
<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\
</ul>\
',
props: {
items: {
type: Array,
default: [],
required: true
}
}
};
-
这个子组件可以对 items 进行迭代，并输出到页面。 -
props：定义需要从父组件中接收的属性 -
type：限定父组件传递来的必须是数组 -
default：默认值 -
required：是否必须 -
items：是要接收的属性名称
我们在父组件中使用它：
<div id="app">
<h2>百知已开设如下课程：</h2>
<!-- 使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件自己的属性lessons -->
<my-list :items="lessons"/>
</div>
var app = new Vue({
el:"#app",
components:{
myList // 当key和value一样时，可以只写一个
},
data:{
lessons:[
{id:1, name: 'java'},
{id:2, name: 'python'},
{id:3, name: 'ui'},
]
}
})
子向父的通信
来看这样的一个案例：
<div id="app">
<h2>num: {{num}}</h2>
<!--使用子组件的时候，传递num到子组件中-->
<counter :num="num"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减
template:'\
<div>\
<button @click="num++">加</button> \
<button @click="num--">减</button> \
</div>',
props:['num']// count是从父组件获取的。
})
var app = new Vue({
el:"#app",
data:{
num:0
}
})
</script>
-
子组件接收父组件的num属性 -
子组件定义点击按钮，点击后对num进行加或减操作
我们尝试运行，好像没问题，点击按钮试试：
子组件接收到父组件属性后，默认是不允许修改的。怎么办？
既然只有父组件能修改，那么加和减的操作一定是放在父组件：
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{ // 父组件中定义操作num的方法
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
})
但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
我们可以通过v-on指令将父组件的函数绑定到子组件上：
<div id="app">
<h2>num: {{num}}</h2>
<counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>
在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。当子组件中按钮被点击时，调用绑定的函数：
Vue.component("counter", {
template:'\
<div>\
<button @click="plus">加</button> \
<button @click="reduce">减</button> \
</div>',
props:['count'],
methods:{
plus(){
this.$emit("inc");
},
reduce(){
this.$emit("dec");
}
}
})
-
vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数
❤️ 帅气的你又来看了我
如果你觉得这篇内容对你挺有有帮助的话：
-
点赞支持下吧，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
-
欢迎在留言区与我分享你的想法，也欢迎你在留言区记录你的思考过程。
-
觉得不错的话，也可以关注 编程鹿 的个人公众号看更多文章和讲解视频（感谢大家的鼓励与支持🌹🌹🌹）
![]()
本文分享自微信公众号 - 鹿小洋的Java笔记（lulaoshiJava）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。