学习重点
这一篇主要介绍一下vue中MVVM的特点。
也就是研究一下这个特点：改变数据的值，页面会跟着改变，页面上的值发生变化，数据也会联动。
我们要学的就是：
- Html标签与数据的绑定；
- Html标签与属性（CSS样式等）的绑定，；
- Html标签与事件（点击事件等）的绑定;
- 拦截器，给各种绑定设置一个拦截功能（数据需要满足什么情况，才需要绑定？）。
值绑定
使用占位符{{fieldName}}，数据会总动填充到页面上。
使用v-model可以与输入控件（input/select）进行绑定，输入框内的值发生变化，数据也会发生变化。
（v-model的设计就属于MVVM模式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="res/vue.js"></script>
</head>
<body>
<div id="app">
<!--数据绑定-->
<p>{{ message1 }} </p>
<!--类似InnerHTML-->
<div v-html="message2"></div>
<!--双向绑定，输入框与展示的数据进行联动，v-model的值影响data中的值，data中的值再影响<p>标签的值-->
<input v-model="message1">
</div>
<script>
new Vue({
el: '#app',
data: {
message1: 'runoob!',
message2: '<h>123456</h>',
}
})
</script>
</body>
</html>属性绑定
属性绑定指的是控件自身的属性，例如<a>标签的href属性，使用v-bind进行属性绑定，简写 “:bind”、或者只保留一个 “:”。
后面会发现，其实自定义组件的值，也是通过这种方式进行绑定的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="res/vue.js"></script>
</head>
<body>
<div id="app">
<!--绑定id属性-->
<div v-bind:id="rawId"></div>
<!--绑定href属性-->
<a v-bind:href="url">{{name}}</a>
<!--绑定CSS样式-->
<div :style="mystyle">{{name}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
mystyle:'background: #444;color: #eee',
name: 'baidu',
url: 'www.baidu.com',
rawId: 'div_id',
}
})
</script>
</body>
</html>事件绑定
事件和属性的区别，就是事件是一个Function，而属性是一个Object。
语法上有所差别，vue需要在methods中定义事件函数，
使用v-on:click绑定点击事件，简写@click。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Vue 测试实例</title>
<script src="res/vue.js"></script>
</head>
<body>
<div id="app">
<!--点击事件，v-on表示 监听事件-->
<button v-on:click="dialog('msg')">Click</button>
<!--点击事件，v-on表示 监听事件-->
<button @click="dialog()">Click</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob!'
},
methods: {
dialog: function (msg) {
if (!msg) {
alert(this.message);
} else {
alert(msg);
}
}
}
})
</script>
</body>
</html>拦截器（filters）
数据绑定之前，对数据计算或者校验，比如说：数值是百分比，显示之前，你需要给它增加一个百分号。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Vue 测试实例</title>
<style>
.class1 {
background: #444;
color: #eee;
}
</style>
<script src="res/vue.js"></script>
</head>
<body>
<div id="app">
<!--一般的属性绑定不需要拦截器，需要动态改变样式可以使用双向绑定实现-->
<div :class="{'class1': isShow}">Text</div>
<div :class="{'class1': true}">Text</div>
<!--在值绑定中，可以对输入输出进一步处理-->
<input :value="message2 | formatStr"/>
<span> {{message2 | formatStr}}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
message1: 'msg1',
message2: 'msg',
isShow: false
},
filters: {
formatStr: function (value) {
return value + "%"
}
}
})
</script>
<script>
</script>
</body>
</html>