一、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 = names0;
this.url = names1;
}
}
}
});
//这里就给计算属性 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 方法监听数据的变化
