本笔记仅用作学习vue过程中的知识记录，亦用作知识温习查询的纲要。
a、一些称呼
函数-方法：一般在上下文直接定义的function叫做函数，而在对象中定义的叫方法。即方法是附属于某个实例的，而函数是一个声明。通常，这个并不严格定义区分，更多是习惯约定。
1、options的主要属性
const obj = {
counter: 0,
message: "abc"
}
const app = {
el: "#app",
data: obj,
methods: {
add: function(){
console.log('add 被执行');
this.counter ++;
},
sub: function(){
console.log('sub 被执行');
this.couter --;
}
}
}
其中，格式要求如下：
const app = {
el: 字符串或者htmlObject对象，决定vue之后会管理哪一个dom对象
data: 对象或者函数（组件中，data必须为函数）。vue实例对应的数据对象
methods: 函数，定义属于vue的方法，可以在其他地方调用，也可以在命令中调用
}
2、生命周期
vue 的主要生命周期主要有
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
具体的完整生命周期，见官网图
3、基本用法
v-bind 数据绑定
mustache语法只能用于text处，标签属性不可以使用。应使用v-bind:属性="变量名"的形式，可以简写为:属性="变量名"。
动态绑定class(根据data的某个属性，动态调整元素的class)，可以使用:class="{class1:true,class2:false}"的形式，如此则class1有效，class2无效。动态绑定class，可以支持数组跟函数。
动态绑定style，跟class类似，可以支持字符串，对象，数组，函数。
computed 计算属性
跟methods有点类似，但有缓存效果。页面重新渲染值不会变化，会立即返回之前的计算结果，而不必再次执行函数。注意跟watch区分，watch没有缓存效果，每次渲染都会执行(值无变化也会执行)。(这里的渲染指页面多次引用，而不是浏览器dom对象刷新)
computed中的数据为对象，写作方法时，实际是对象的getter方法的简写(setter略掉了)。setter方法可以传值。比如以下代码实际是一样的：
new Vue({
computed:{
//写法1
fullName:{
get: function(){
return this.firstName + this.lastName;
}
},
//写法2
fullName: function(){
return this.firstName + this.lastName;
}
}
})
因为有get，set方法，每次调用实际都是先set再get方法。简写的方式实际是语法糖，这里调用的是一个属性，而不是方法，mustache写法中没有括号。
v-on 事件绑定
比如onclick可以写作：v-on:click="",内容可以是函数名，也可以是js代码。可以简写为@click。默认方法的第一个参数为事件对象，手动指定事件对象用$event。
v-on可以支持一些修饰符，用于阻止冒泡等。
.stop 阻止冒泡
.self 当时间在钙元素本身触发时，才触发事件
.capture 添加事件监听器时，使用事件捕获模式
.prevent 阻止默认事件
.native 监听组件根元素的原生事件
.once 只触发一次
对于capture，即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁。
<div id="content">
<div id="obj1" v-on:click.capture="doc">
obj1
<div id="obj2" v-on:click.capture="doc">
obj2
<div id="obj3" v-on:click="doc">
obj3
<div id="obj4" v-on:click="doc">
obj4
<!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
-->
</div>
</div>
</div>
</div>
</div>
什么是根元素的原生事件？ 组件相关，稍后处理；
v-if, v-else if, v-else 条件语句
如果条件不满足，则对应的html内容不予展示；值可以为判断条件或者变量；
ps：页面上元素进行切换时，vue为了性能考虑，会优先重用重复的元素。如果不想被重用，可以给标签设置不同的key来实现，相同的key，vue认为是可以重用的。
v-show 显示隐藏
v-show 后跟判断条件或变量，如果为false，则display=none,隐藏元素。(v-if如果为false，页面直接无此元素)
频繁切换显隐，使用v-show，只有一次切换，使用v-if；
v-for 遍历
(val, key, index) in objList 这种方式，可以获取到键值以及下标索引。需要注意的是，官方推荐，在使用v-for时，给对应的元素或组件添加一个:key属性。
原因跟vue的虚拟DOM的diff算法有关，如果没有加:key，则vue无法区分列表中的多个元素，在对列表的中间元素进行增删改时会进行全局遍历，效率较低。而有:key则方便区别定位元素，效率较高。
数组中哪些方法是响应式的？
1、push()
2、pop() 从后边删除
3、shift() 从前删
4、unshift() 最前追加
5、splice()
6、sort()
7、reverse()
直接修改数组元素，不能触发响应式，原因是赋值操作符 = 并没有被vue监听。
filters 过滤器
过滤器用于对某类数据的展示等提供修饰，也是一类方法，可以直接{{data | 过滤器}}使用。
v-model 双向绑定
mustache语法只能实现单向绑定(数据渲染元素)，不能完成元素到数据的绑定。v-model可以实现双向绑定。
实现原理是v-bind将数据绑定到元素，并通过v-on监听事件，将元素的值绑定到数据。
<div id="app">
<!--input、textarea绑定-->
<input type="text" id="myMessage" name="message" v-model="message" />
<!--radio绑定，v-model相同，可以省略name(v-model可以实现多选1)-->
<input type="radio" id="male" value="男" v-model="gender" /> 男
<input type="radio" id="female" value="女" v-model="gender" /> 女
<!--checkbox 单个，一般用boolean-->
<input type="checkbox" id="license" v-model="license" /> 同意协议
<!--checkbox 多个，对应数组-->
<input type="checkbox" value="足球" v-model="hobbies" />足球
<input type="checkbox" value="篮球" v-model="hobbies" />篮球
<input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
<input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球
<!--select 单选-->
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="葡萄">葡萄</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
</select>
<!--select 多选(按住ctrl)-->
<select name="abc" v-model="fruit" multiple>
<option value="苹果">苹果</option>
<option value="葡萄">葡萄</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
</select>
<!--动态数据绑定-->
<!--更多时候，select及checkbox的选项是不固定的，前端无法写死，而是要根据后台数据动态生成-->
<!--用label包起来，是为了点击文字也有效果，提升用户体验-->
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies" />{{item}}
</label>
</div>
const app = new Vue({
el: "#app",
data:{
message: "你好呀",
gender: "男"，
license: false,
hobbies: []，
fruit: "香蕉",
fruits: []
}
})
v-model还需注意的一点是修饰符，修饰符有：lazy、number、trim三个。
lazy即延迟处理，一般是input之类的内容在失去焦点或者触发回车时进行数据刷新，而不是一旦有变动立即刷新。 number用于确保输入的数据类型为数字，默认为字符串。
trim是自动去掉前后的空格。
使用方式均为v-model.lazy="值"