一、Vue.js介绍
Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。
Vue有以下特点：
- 是一个构建用户界面的框架
- 是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似
- 数据驱动+组件化的前端开发（核心思想）
- 通过简单的API实现响应式的数据绑定和组合的视图组件
- 更容易上手、小巧
参考：官网文档
二、第一个vue程序
<div id="main">
{{msg}} //字符串模板
</div>
<script src="./js/vue.js"></script> //引入vue文件
<script>
new Vue({ //创建vue实例
el: '#main', //绑定元素
data: {
msg: 'hello Vue.js'
},
methods:{ //用于存放方法
}
})
</script>
以上就是一个非常简单的vue程序。绑定元素这里不但可以使用id选择器，我们还可以使用类选择器或者标签选择器。但是，vue2.0中不允许将vue实例挂在到html或者body元素上。
三、常用指令
指令用来扩展HTML功能。vue内置了很多指令。
1、v-model
实现双向数据绑定，实时监控数据变化，一般用于表单。
<div id="main">
<input type="text" v-model="content">
<br> {{content}}
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#main',
data: {
content: ''
}
})
</script>
在这里，使用v-model指令将输入框的值与vue实例中的content进行绑定。此后，二者中的任一值发生变化，另一个值都会跟随变化。
2、v-for
用于遍历数组、对象等。
<div id="main">
<ul>
<li v-for="item in arr"> //遍历数组
{{item}}
</li>
</ul>
<ul>
<li v-for="item in obj"> //遍历对象
{{item}}
</li>
</ul>
<ul>
<li v-for="(value,key) in obj"> //键值循环，数组也适用，注意key在后面
{{key}}----{{value}}
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#main',
data: {
arr: [1, 2, 3, 4, 5, 6],
obj: {
name: 'hedawei',
age: 22,
gender: 'man'
}
}
})
</script>
3、v-on
用于绑定事件，用法：v-on:事件="函数"。
示例：点击事件
<div id="main">
<button type="button" v-on:click="showHello()">点击显示</button>
<br>
{{msg}}
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#main',
data: {
msg:''
},
methods: {
showHello() {
this.msg = 'Hello Vue.js';
}
}
})
</script>
this指向当前vue实例，由此可获取实例的其他属性。除了点击事件外还有很多其他事件，具体参考官网API。
4、v-show
用来显示或隐藏元素，v-show是通过display实现。当v-show的值为true时显示，为false时隐藏。
<div id="main">
<button type="button" v-on:click="change()">隐藏</button>
<div style="width:100px;height:100px;background:red" v-show="flag"></div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#main',
data: {
flag: true
},
methods: {
change() {
this.flag = !this.flag;
}
}
})
</script>
四、事件
之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。
1、事件简写
之前的事件都是这样的写法：v-on:click="showHello()"，vue提供了一种简写方式：
@click="showHello()"
2、事件对象$event
我们可以通过事件对象取得事件相关信息，如事件源、事件类型、偏移量。
下面这个例子通过事件对象取得按钮的值：
<div id="main">
<button type="button" @click="print($event)">点击显示按钮的值</button>
<br> {{msg}}
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#main',
data: {
msg: ''
},
methods: {
print(e) {
this.msg = e.target.innerHTML;
}
}
})
</script>
3、事件冒泡与事件默认行为
这里需要讨论阻止事件冒泡与阻止默认行为，原生js阻止事件冒泡首先得取得事件对象，然后调用事件对象的stopPropagation方法。在vue里，则不需要依赖于事件对象，只需要调用相应的事件修饰符stop即可：
@click.stop = "print()"
阻止事件默认行为和阻止事件冒泡基本一致，在vue里也有十分便利的操作方法：
@click.prevent = "print()"
4、键盘事件
vue里内置了一些键盘事件，便于开发者操作。语法如下：
@keydown.13 = "print()"
@keydown.enter = "print()"
除了回车事件外，还有很多其他键盘事件，例如下：@keydown.38="print()"。还有一些其他键盘事件，具体参考官方文档。
默认没有@keydown.a/b/c...事件，可以全局自定义键盘事件，也称为自定义键码或自定义键位别名：
Vue.config.keyCodes = {
v: 86,
f1: 112,
// camelCase 不可用
mediaPlayPause: 179,
// 取而代之的是 kebab-case 且用双引号括起来
"media-play-pause": 179,
up: [38, 87]
}
除了stop、prevent、keyCode这些事件修饰符以外，还有一些比较常用：
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
五、属性
vue提供了绑定属性的方法：v-bind:属性名=""，这样我们即可动态的改变属性值。
1、属性简写
属性和事件一样，也有简写方式：:属性名=""
2、class属性和style属性
绑定class和style属性时的语法比较复杂。
（1）变量形式
html部分：
<p :class="myClass">Hello vue.js</p>
对应的vue的data部分：
data:{
myClass:className
}
（2）数组形式，同时引入多个类
html部分：
<p :class="[myClass1,myClass2]">Hello vue.js</p>
对应的vue的data部分：
data:{
myClass1:className1,
myClass2:className2,
}
（3）json形式（常用）
html部分：
<p :class="{className1:true,className2:false}">Hello vue.js</p>
（4）变量引用json形式
html部分：
<p :class="myClass">Hello vue.js</p>
对应的vue的data部分：
data:{
myClass:{
className:true
}
}
style的用法和class的用法基本一致，但是不常用。
六、模板
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据。模板就是{{}}，用来进行数据绑定，显示在页面中，也称为Mustache语法。
1、数据绑定的方式
（1）双向数据绑定
使用v-model指令，前面已经学习过。
（2）单向数据绑定
a.使用两对大括号{{}}
这个在之前也经常使用，但是有一个缺点，就是vue实例需要长时间编译时会在页面中出现{{}}（闪烁现象）。vue提供了一个解决办法：使用v-cloak配合css。
//html内容
<div id="app" v-cloak>
{{msg}}
</div>
//css内容
[v-cloak] {
display: none;
}
b.使用指令v-text、v-html
v-text也可达到与使用v-cloak相同的效果。
//html内容
<div id="app" v-text="msg">
</div>
v-html会将文本中的html解析为html标签，然后渲染到页面中。
//html内容
<div id="app" v-html="msg">
</div>
//vue实例中data部分内容
data: {
msg: 'hello<mark>vue.js<mark>'
},
这里的vue.js会有一个黄色的背景颜色。
七、过滤器
过滤器用来过滤模型数据，在显示之前进行数据处理和筛选。语法：{{ data | filter1(参数) | filter2(参数)}}。
vue1.0中内置了很多过滤器，但是在2.0中全部删除了。使用过滤器我们可以通过使用第三方库：lodash、date-fns日期格式化、accounting.js货币格式化。或者我们可以自定义过滤器。
1、自定义过滤器
过滤器分为全局过滤器和局部过滤器。
（1）全局过滤器
使用全局方法Vue.filter(过滤器ID,过滤器函数)。
示例：
<p>{{8|addZero}}</p>//数据会自动作为传过去
Vue.filter('addZero', data => {
return data > 10 ? data : '0' + data;
});
有时过滤器也要传递自己的参数：
<p>{{12.3456|number(3)}}</p>
Vue.filter('number', (data,n) => {
return data.toFixed(n);
});
（2）局部过滤器
局部过滤器的使用方法与全局过滤器的使用方法一致。
不过过滤器写在vue实例中filters选项中。
new Vue({
el:'#app',
data:{},
filters:{
number:data => {
//具体操作
}
}
})
未完待续。
