认识vue---语法、双向绑定、Vue组件通信、插槽slot
vue语法
八个生命周期函数是在Vue实例在某个时间点自动执行的函数，不需要手动执行，八个钩子函数；
beforecreate/Created/
beforemounte/Mounted/：
beforeupdate/Updated/
beforedestroy/Destroyed： vm.$destroy()方法调用后会断开实例的双向绑定。
创建一个Vue实例时，会加入一个data对象，data对象中的属性的改变会引起视图的更新渲染；但是如果在创建实例时data中没有某个属性值例如属性b，是后期添加的，那么该新增的属性b的改变不会引起视图的变化。
var data = {a:1};
var vm = new Vue({
data: data;
});
//访问属性data，可以使用$美元符，以与自定义属性区别开
vm.$data===data; //true
//新增一个属性值
vm.b=2;
那么怎样处理才能使其后增加的属性也会引起视图的变化呢？
当确定后期需要某个属性时，可以先提前设置该属性值为空或者null。
Vue数据绑定语法
使用{}}}双花括号将文本括起来：{{message}}插值表达式
-
v-bind: 绑定属性 < a v-bind:href=“url”>… 绑定href属性 缩写为 :href
-
v-on：监听DOM事件 < a v-on:click=“方法名dosomething”>… 缩写 @click 方法可传参数或不传参数。
事件修饰符：.stop .prevent .capture .self .once .passive
eg: v-on:click.stop v-on:click.once
按键修饰符：.enter .tab .up .space .up .down .left
eg: v-on:keyup.enter
系统修饰符： .ctrl .alt .shift .meta
eg: v-on:keyup.shift -
v-if/v-else: 条件性的渲染一块内容，在指令表达式返回truthy值时被渲染。会动态向DOM数添加或者删除元素。当值为false时，会将该元素从DOM树销毁；当为truthy时会编译渲染；频繁的切换会降低性能。
eg: < h1 v-if=‘colorsome’>some -
v-show: true或者false，表明是否显示元素，无论是否显示该元素都会被渲染并保留在DOM中。类似控制元素的display属性为none来控制隐藏。
-
计算属性computed
可用于较为复杂的逻辑运算，如字符串的翻转处理、根据姓和名得到姓名fullname。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例, 将复杂的处理置于computed属性中。
return this.message.split('').reverse().join('')
}
}
})
-
监听属性watch
监听某个属性是否发生改变，若发生改变，则可进行相应的操作。
当需要在数据变化时执行异步或开销较大的操作时，监听属性比计算属性适用。 -
列表渲染v-for
迭代数组元素或者对象属性。不要在同一级同时使用v-if和v-for，若一起使用v-for优先级更高。即每次v-for循环时v-if在跟着运行
- <--!items为data中的属性-->
{{ item.message }}
- 数组的更新检测：push、pop、shift、UNshift、splice、sort、reverse会引起视图变化；但是，修改数组长度不会引起视图变化eg：vm.items.length = 2 ，以及利用数组索引设置值时也不会引起视图的变化，eg： vm.items[1] = ‘x’ 。
替代方法为：
1）数组索引改变：vm.$set( vm.items数组, indexOfItem属性索引, newValue新值) 或者 Vue.set(…)
2）数组索引长度：vm.items.splice(indexOfItem, 1, newValue)
vm.items.splice(newLength)
注：对象属性的增加删除不会引起视图变化，但是可利用vm.$ set(),以及Object.assigh()
Vue双向绑定
v-model创建双向数据绑定，可用于,