一、Vue 框架
1.Vue 框架是响应式的一个前端 JS 框架,使用时需要使用script 标签引入
二、Vue 起步
1. 每个 Vue 的应用都需要通过实例化 Vue 对象来实现,实例化Vue的语法如下:

2. 第一个Vue应用
先安装 Vue.js 插件:

示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->
<p>{{msg}}</p>
<p>{{show()}}</p>
</div>
{{msg}} <!--我们这里的 Vue 挂载到了 #vm,那么它只管理了 div#vm 这个区域,超出这个区域的表达式无效-->
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
msg: "欢迎使用 Vue 前端框架"
},
methods:{//定义 Vue 对象(vm)的方法
show:function () {
//this 指的就是当前的 Vue 对象(vm),即 this === vm,this.msg 就是指上面 data 中定义的 Vue 对象的属性 msg
return this.msg +",非常高兴您能来学习";
}
}
})
</script>
</body>
</html>
3. 当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有属性,当这些属性发生变化时,HTML 中的视图(表达式 {{}} )也会发生变化。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo2</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->
<p>name:{{name}}</p>
<p>age:{{age}}</p>
<p>score:{{score}}</p>
</div>
<script>
//定义一个 json 对象
var data = {name:'张三',age:23,score:90};
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: data,//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
});
//vm.name 和 data.name 都是同一个对象,都是 Vue 对象的属性
document.write(vm.name === data.name);
document.write("<br>");
//通过Vue对象vm改变属性值,那么表达式{{}}中对应的属性值也会跟着变化,因为 Vue 是响应式框架
vm.name = '李四';
//同理,改变 json 对象data 的属性值,也会影响原始Vue的属性值,表达式也会跟着变化
data.age = 25;
document.write(vm.age + "<br>");
/**
* 综上所述,vm 是 Vue 的实例,data 中的属性就是 vm 的属性,methods 的方法就是 vm 的方法,一旦属性发生变化,就会引起
* 界面的表达式 {{}} 中的属性值变化
*/
</script>
</body>
</html>

4. 除了数据属性,Vue 实例还提供了一些有用的实例属性和方法,它们都有前缀 $,以便于区分用于定义的属性,比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo3</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->
<p>name:{{name}}</p>
<p>age:{{age}}</p>
<p>score:{{score}}</p>
</div>
<script>
//定义一个 json 对象
var data = {name:'张三',age:23,score:90};
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: data,//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
});
//Vue 的实例 vm 的实例属性 $data 是否恒等于 json 对象 data
document.write(vm.$data === data);
document.write("<br>");
//Vue 的实例 vm 的实例属性 $el 是否恒等于 #vm 这个 DOM 对象
document.write(vm.$el === document.getElementById("vm"));
</script>
</body>
</html>

5. Vue实例的生命周期
每个 Vue 实例在被创建之前都需要经历一系列的初始化过程,例如,需要配置数据观察(data observer),编译模板,挂载实例到 DOM,然后在数据发生变化的时候更新 DOM,在这个过程中,实例也会调用一些生命周期的钩子函数(回调函数),这就给我们提供了执行自定义逻辑的机会,这些钩子函数有:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed,这些函数在实例生命周期的不同阶段被调用。
(1)生命周期的示意图:


(2)生命周期钩子函数(回调函数,由系统调用自动执行)说明
① beforeCreate:组件(Vue实例)实例刚创建,组件属性计算之前
② created:组件实例创建完成,属性已绑定,但是DOM还未生成,$el 实例属性还不存在
③ beforeMount:模板编译/挂载之前
④ mounted:模板编译/挂载之后
⑤ beforeUpdate:组件更新之前
⑥ updated:组件更新之后
⑦ beforeDestroy:组件销毁之前
⑧ destroyed:组件销毁之后
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo4</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<!--
v-model 指令:双向数据绑定指令,它绑定的 a 属性的值,即 input 元素的 value 发生变化的时候,会引起 Vue 实例的属性 a
发生变化,反过来,当 Vue 实例的属性 a 发生变化时,v-model 绑定的 a 值表示 input 元素的 value 值也会跟着变化,同时
表达式{{a}}中的a的值也会同步变化
-->
<input type="text" v-model="a"> <br>
<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->
<p>a:{{a}}</p>
</div>
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
a:0
},//下面的都是 Vue 的生命周期方法,也称为回调方法,由系统自动调用,不是程序员去调用的
beforeCreate: function () {
//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a
console.log("beforeCreate,a=" + this.a);
},
created: function () {
//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a
console.log("created,a=" + this.a);
},
beforeMount: function () {
//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a
console.log("beforeMount,a=" + this.a);
},
mounted: function () {
//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a
console.log("mounted,a=" + this.a);
},
beforeUpdate: function () {
//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a
console.log("beforeUpdate,a=" + this.a);
},
updated: function () {
//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a
console.log("updated,a=" + this.a);
},
beforeDestroy: function () {
//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a
console.log("beforeDestroy,a=" + this.a);
},
destroyed: function () {
//this 指当前 Vue 对象 vm,this.a 就是上面data 中定义的 Vue 的属性 a
console.log("destroyed,a=" + this.a);
}
});
</script>
</body>
</html>

三、Vue 模板语法
1.Vue 使用了基于 HTML 模板的语法,允许开发人员声明式的将 DOM 绑定至底层的 Vue 实例数据。
2.插值:
(1)文本插值:利用表达式( {{表达式}} )的文本插值:
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->
<p>{{msg}}</p>
<p>{{show()}}</p>
</div>
{{msg}} <!--我们这里的 Vue 挂载到了 #vm,那么它只管理了 div#vm 这个区域,超出这个区域的表达式无效-->
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
msg: "欢迎使用 Vue 前端框架"
},
methods:{//定义 Vue 对象(vm)的方法
show:function () {
//this 指的就是当前的 Vue 对象(vm),即 this === vm,this.msg 就是指上面 data 中定义的 Vue 对象的属性 msg
return this.msg +",非常高兴您能来学习";
}
}
})
</script>
</body>
</html>
(2)使用指令:v-html(类似于 jquery 的 html())
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo5</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<!--v-html 指令:用于在这里插入 HTML 片段,类似于 DOM 中 innerHTML-->
<p v-html="msg"></p>
<!--{{内容}}:Vue 的表达式,用于显示 Vue 对象的属性或方法的返回值-->
<!--表达式只会当成普通文本处理-->
<p>{{msg}}</p>
</div>
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
msg: "<h1>欢迎使用 Vue 前端框架<h1>"
}
})
</script>
</body>
</html>

(3)属性:HTML 元素的属性值应该使用 v-bind 指令,v-bind 指令可以用来绑定一个属性值,这个属性值可以根据 Vue 实例中的属性进行响应式变化。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo6</title>
<script src="js/vue.min.js"></script>
<style>
.cls{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="vm">
<!--通过选中或不选中 checkbox,来动态的给 div 添加 .cls 类样式-->
<label for="c1">修改颜色:</label>
<!--v-model 进行双向数据绑定,选中 checkbox 的时候,绑定的 use 值为 true,不选中时 use 的值为 false,这样双向数据绑定之后,
input的变化就会引起 Vue 属性 use 的变化,反过来也是一样的,属性的变化也会引起 input 的变化-->
<input type="checkbox" v-model="use" id="c1">
<!--如果 use 为 true,则动态给 div 添加 .cls 类,为 false,则不添加-->
<div v-bind:class="{'cls':use}"></div>
</div>
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
use: false
}
})
</script>
</body>
</html>

(4)表达式:Vue 提供了完全的 JavaScript 表达式支持
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo7</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<p>{{5 + 5}}</p>
<p>{{ok ? 'YES' : 'NO'}}</p>
<!--表达式还支持js函数调用,这里将message属性的每个字符分割形成字符数组后再颠倒顺序后再组合在一起-->
<p>{{message.split('').reverse().join('')}}</p>
<div v-bind:id="'list-' + id"></div>
</div>
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
ok:true,
message:'helloworld',
id:10011
}
});
</script>
</body>
</html>


(5)指令:指令是带有 v- 前缀的特殊属性,指令用于在表达式的值发生变化的时候,将某些行为应用到 DOM 上,比如:v-if 指令可以根据指定的值判断是否显示某个标签元素(注意:这里的显示或不显示是通过删除对应的HTML 元素来达到)
示例:


(6)参数:参数在指令后以冒号指明,比如,v-bind 指令被用来响应式的更新 HTML 元素的属性。
示例:


(7)修饰符:修饰符是以 "." 操作符指明的特殊后缀,用于指出一个指令应该以特殊的方式绑定,比如 .prevent 修饰符告诉 v-on(绑定事件)指令,在触发事件的时候调用 event.preventDefault() 来阻止事件的默认行为。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo10</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<!-- v-on:事件名="事件函数":用于绑定一个事件,事件名和 DOM 中的 addEventListener 相同,事件函数和其他函数一样都是写在 Vue 的
methods 中的,这里的 .prevent 修饰符表示要调用事件对象 event.preventDefault() 方法来阻止事件的默认行为,这里是阻止表单提交-->
<form action="getname.jsp" v-on:submit.prevent="submit()">
姓名:<input type="text" name="name"> <br>
<input type="submit" value="提交">
</form>
</div>
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
},
methods: {//Vue实例的方法
submit: function () {//事件函数
alert("表单被提交");
}
}
});
</script>
</body>
</html>

可以看到,提交事件执行了,但是表单没有提交。
(8)用户输入:在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
示例:


(9)过滤器:Vue 允许自定义过滤器,用于格式化一些文本信息,由Linux 中的"管道符"来指示,例如:{{message | filter}}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo12</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<p>{{message | capitalize}}</p>
</div>
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
message: "helloworld"//Model/M:数据
},
filters: {//自定义过滤器
//自定义过滤器,名为 capitalize,其中 value 参数就是待过滤的字符串,即表达式中"|"前面的字符串
capitalize: function (value) {
if(!value) return "";//如果输入的 value 不合法,则返回空串
value = value.toString();//转换为字符串
//把首字母大写再拼接上后面的字符串
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
});
</script>
</body>
</html>

(10)缩写
1) v-bind的缩写

2) v-on的缩写

四、条件语句
1.条件判断
(1)v-if 指令:根据后面指定的属性值是 true 还是 false 来决定是否显示(显示或删除)HTML元素。
示例:见前面的示例
(2)v-else:可以给 v-if 指令添加一个 v-else 指令,类似于 JavaScript 中的 if...else 语句
示例:


(3)v-else-if:用于 v-if 中,类似于 JavaScript 的if...elseif...elseif...else...语句
示例:


2.v-show:v-show 指令通过改变 CSS 属性的 display 来决定是否显示HTML元素,而 v-if 会决定是否删除 HTML 元素。
示例:


五、Vue循环语句
1. v-for 指令:
v-for 需要指定 site in sites 形式的特殊语法,其中 sites 是待遍历的集合,site 是集合元素迭代的别名
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo16</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td>
<a href="#">删除</a><a href="#">更新</a>
</td>
</tr>
</table>
</div>
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
users: [
{id:10011,name:'张三',age:23,sex:'男'},
{id:10012,name:'李四',age:23,sex:'男'},
{id:10013,name:'王五',age:22,sex:'男'},
{id:10014,name:'赵六',age:21,sex:'女'},
{id:10015,name:'田七',age:20,sex:'男'},
{id:10016,name:'丽丽',age:25,sex:'女'},
{id:10017,name:'娜娜',age:23,sex:'女'},
{id:10018,name:'飞飞',age:24,sex:'男'}
]
},
methods:{
swap:function () {
this.seen = !this.seen;
}
}
});
</script>
</body>
</html>

v-for 除了可以遍历数组等集合之外,还可以遍历对象(因为对象其本质也是一个关联数组)
例如:


还可以已提供第二个参数作为键名(属性名):

还可以带第三个参数,表示索引(集合和对象遍历时都可以带上这个索引):


遍历集合时带上索引:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo16</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="(user,index) in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td>
<span>索引:{{index}}</span>
<a href="#">删除</a><a href="#">更新</a>
</td>
</tr>
</table>
</div>
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
users: [
{id:10011,name:'张三',age:23,sex:'男'},
{id:10012,name:'李四',age:23,sex:'男'},
{id:10013,name:'王五',age:22,sex:'男'},
{id:10014,name:'赵六',age:21,sex:'女'},
{id:10015,name:'田七',age:20,sex:'男'},
{id:10016,name:'丽丽',age:25,sex:'女'},
{id:10017,name:'娜娜',age:23,sex:'女'},
{id:10018,name:'飞飞',age:24,sex:'男'}
]
},
methods:{
swap:function () {
this.seen = !this.seen;
}
}
});
</script>
</body>
</html>

还可以迭代整数:


六、Vue的计算属性
1.计算属性是通过对 Vue 对象其他属性计算之后得到的一个新的 Vue 的属性,计算属性使用关键字:computed,计算属性在处理一些复杂的逻辑的时候比较有用,比如之前的例子:

表达式中的表达式很复杂,也不容易看懂,我们可以使用计算属性的方式来实现。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo19</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<input type="text" v-model="message">
<p>原始的字符串:{{message}}</p>
<p>计算属性之后的字符串:{{reverseMessage}}</p>
</div>
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
message:''
},
computed: {//计算属性
//reverseMessage 就是计算属性,也是 Vue 的属性,这个匿名函数就是计算属性的 getter 方法
//计算属性 reverseMessage 依赖于 message 属性,message 变化,reverseMessage 也跟着变化
reverseMessage:function () {
//this.message 就是指 data 中定义的 Vue 的属性 message
return this.message.split('').reverse().join('');
}
}
});
</script>
</body>
</html>

计算属性 computed 默认只有一个 getter 方法,我们也可以提供一个 setter 方法,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo20</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vm">
<!--这里其实调用了计算属性 site 的 getter 方法输出-->
<p>{{site}}</p>
</div>
<script>
//调用 Vue 的构造函数,产生一个 Vue 对象 vm
var vm = new Vue({
//el 定义 Vue 的挂载点,挂载到 #vm 上,那么整个 #vm 包括其后辈元素都被 Vue 管理起来,就可以使用 Vue 了
el:"#vm",
data: {//data 用于定义 Vue 对象(vm)的属性,由于 Vue 属于响应式框架,一旦这里的属性发生变化,界面上面的 Vue 的表达式页面跟着变
name:'Google',
url: 'http://www.google.com'
},
computed: {//计算属性
site: {
get:function () {//计算属性 site 的 getter 方法
return this.name + "," + this.url;
},
set:function (newValue) {//计算属性 site 的 setter 方法,参数newValue:给 site 赋值的时候,newValue就是这个值
var names = newValue.split(",");
this.name = names[0];
this.url = names[1];
}
}
}
});
//这里就给计算属性 site 进行了赋值,那么就会调用 site 的 setter 方法,setter 的 newValue 参数就是赋的值
vm.site = "Vue 教程,http://www.edu.com";
</script>
</body>
</html>

七、监听属性
1.Vue 提供了监听属性的方法 watch,我们可以通过 watch方法来监听数据的变化(注意:Vue 实例属性和方法需要加上 前缀,例如,vm.data,vm.el 和 vm.watch)
示例:利用 vm 实例和 $watch 方法监听数据的变化

