一、条件渲染
1、v-if 和v-else
条件渲染就是，通过改变条件来决定一些东西是否出现在页面中。如v-if和v-else，此要成对出现，且放在同级别标签中。
如下例子，当v-if为true时，页面显示hello world 。当v-if为false时，则显示 你好 世界。
<p v-if="isShow">hello world</p>
<p v-else>你好 世界</p>
data:{
isShow:false
}①如果想要同时渲染多个元素，可以外包裹一个<template>，再用v-if
②v-else-if
③关键词key
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因此当v-if和v-else有相同的元素时，会直接使用同一个元素。如果想要重新渲染，则只需添加一个具有唯一值的 key属性即可：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>2、v-show
v-show和v-if类似，当值为flase时，都不会显示在页面中。
但是v-show是有在DOM树中的，只是被设置为display:none，而v-if则没有被添加到DOM结构中。
v-show 不支持 <template> 元素，也不支持 v-else
v-if通常是用于初始化时设置，不适合频繁切换。而v-show课可以作为频繁切换，如下拉菜单等。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
二、列表渲染 v-for
可以用 v-for 指令基于一个数组来渲染一个列表。在 v-for 块中，我们可以访问所有父作用域的属性。
①v-for 第一个参数为要遍历的项，第二个参数可选为当前项的索引index。
<ul id="example-2">
<li v-for="(item, index) in items"> //index当前索引，可以用of代替in
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>②也可以用v-for来遍历一个对象的属性，第一个参数value为属性值，第二个参数（可选）为属性名，第三个参数为索引（可选）
<ul id="v-for-object" class="demo">
<li v-for="(value,key,index) in object"> {{ key }} : {{ value }} </li>
</ul>（1）数组更新检测：
使用以下方法会触发视图的更新
这些方法会改变原始数组：push() pop() shift() unshift() splice() sort() reverse()
①push() ：向数组尾部添加多项，返回值为新数组长度
②unshift() ：向数组的首部添加多项，并返回新数组的长度
③pop() ：删除并返回数组的最后一项
④shift()：删除并返回数组的第一项
⑤splice() ：替换数组，参数为（起始索引，要删除的项数，要添加的项...），返回值为删除的项
⑥sort()：排序，参数为排序的函数，是一个比较函数，返回值大于零调换顺序。无参数时按照字符编码顺序排序。
⑦reverse()：颠倒数组顺序
非变异方法：这些方法返回一个新数组：filter()、concat() 和 slice()
①filter()：过滤器，参数为一函数function(当前项值, 当前项索引,当前元素属于的数组对象)第一项为必选项
②concat()：连接两个或多个数组
③slice()：剪切，参数为（起始 索引，结束索引）
但是Vue不能检测以下数据的变动：①利用索引直接设置一个数组项时 ②修改数组长度时
（2）对象变更检测
Vue不能检测对象属性的添加或删除。但是，可以使用 Vue.set(object, propertyName, value) 添加响应式属性。
如，添加一个新的age属性到嵌套的userProfile对象中
vm.$set(vm.userProfile, 'age', 27) //或者Vue.set当要添加多个新属性时，应该用两个对象的属性创建一个新的对象。Object.assign() 或 _.extend()
Object.assign(target,source1,source2)方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象（target）
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})v-for 也可以有 <template> 来循环渲染一段包含多个元素的内容（就不用创建多个根元素如div了！）。
三、事件处理
1、监听事件：用v-on指令监听DOM事件
v-on可直接写事件处理函数，也可写需要调用的方法名称（此时不用写()）
<button v-on:click="greet">Greet</button>
methods: {
greet: function (event) {
alert('Hello ' + this.name + '!')
if (event) {
alert(event.target.tagName) //tagName属性返回的是此元素标签的大写名称
}
}
}JS中的事件都能用，常用事件：click单击，dblclick双击，mousemove鼠标移动
2、事件修饰符：修饰符可叠加，修饰符的顺序很重要，根据先后顺序来处理的
.stop阻止事件冒泡.prevent阻止事件的默认行为-
.capture使用事件捕获模式 -
.self只当在 event.target 是当前元素自身时触发处理函数 -
.once 只触发一次 .passive 滚动行为会立即触发
3、按键码（类似事件修饰符）
.enter 按下Enter键时触发.tab 按下tab键时触发-
.delete捕获“Delete”和“退格”键 .esc.space.up.down.left.right
4、系统修饰符：仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl.alt.shift.meta
5、鼠标按钮修饰符：限制处理函数仅响应特定的鼠标按钮
.left.right.middle
四、双向输入绑定
用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
1、input / textarea 文本
<input v-model="message" placeholder="edit me">2、复选框checkbox
①单个复选框checkbox，绑定为布尔值：
<input type="checkbox" id="checkbox" v-model="checked">②多个复选框checkbox，绑定value到同一个数组
3、单选按钮radio
绑定单个被选中的value
<input type="radio" id="one" value="One" v-model="picked">4、选择框select
单选时，绑定的是被选中的那一个value。多选时，被选中的value绑定到同一个数组中。
<select v-model="selected">
<option disabled value="">请选择</option><select v-model="selected" multiple >三、实例与生命周期钩子
五、生命周期
1、beforeCreate：组件实例化之前执行的行数，用于加载ing...
2、created：组件实例化完毕，但页面还没有显示
此后检查是否有el，或者vm.$mount(el)，再检查是否有`HTML`template或者template。
3、beforeMount：组件挂载前，页面仍未显示，但虚拟DOM已经配置
4、mounted：组件挂载后，此方法执行后页面显示
5、修改数据：
beforUpdate：组件更新之前，页面仍未更新，但虚拟DOM已经配置
updated：组件更新好，此方法执行后页面显示
6、beforDestory：在组件销毁之前
7、destoryed：销毁之后
beforCreate:function(){
alert("组件实例化之前执行的行数")
}1、created钩子用在一个实例被创建之后执行代码。在模板渲染成html前调用
new Vue({
data:{
a:1
}
created:function(){
console.log('a is:'+this.a)
}
})不能再选项属性或回调函数上使用箭头函数，因为他没有this
2、mounted:el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。即在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
3、undata：数据更新后调用
4、destroyed：实例被销毁时调用
