vue学习笔记（三）
1. 按键修饰符
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
1.1 vue定义的常用按键名：
<input type="text" class="form-control" v-model='name' @keyup.enter='add'>
1.2 直接使用按键码：
<input v-on:keyup.13="submit">
1.3 自定义按键名：
<input type="text" class="form-control" v-model='name' @keyup.F2='add'>
Vue.config.keyCodes = {
F2: 113
}
2. 自定义指令
vue的内置指令有v-on、v-bind、v-for等等，Vue 也允许注册自定义指令。调用的时候，一定要加 ' v- ' 前缀。
使用 Vue.directive(para1, para2) 定义全局指令
para1：指令名称，定义的时候不需要加 ' v- ' 前缀
para2: 一个对象，其中支持几个钩子函数：
-
bind：只调用一次，指令第一次绑定到元素时调用。只执行一次。 -
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)，只执行一次。 -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。可能执行多次。
-
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind：只调用一次，指令与元素解绑时调用。
示例：
Vue.directive('focus', {
inserted(el) {
el.focus();
}
})
<input type="text" class="form-control" v-model='keywords' v-focus>
也可以在组件内部定义私有指令：
directives: {
focus: {
inserted(el) {
el.focus();
}
}
}
钩子函数的参数：
el: 指令所绑定的元素，可以用来直接操作 DOM。
binding: 一个对象，包含以下 property：
name：指令名，不包括v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
Vue.directive('color', {
bind(el, binding) {
el.style.color = binding.value;
}
})
<input type="text" class="form-control" v-model='keywords' v-focus v-color="'pink'">
简写：如果想在 bind 和 update 时触发相同行为，而不关心其它的钩子。可以这样写：
directives: {
focus: {
inserted(el) {
el.focus();
}
},
color: (el, binding) {
el.style.color = binding.value;
}
}
3. 生命周期
生命周期流程图：
3.1 new Vue() ：( var vm = new Vue({}) ) 创建一个Vue的实例对象
3.2 init Events & LifeStyle：刚初始化完一个空Vue的实例对象，这时候对象身上只有默认的生命周期函数和默认的事件，其他东西都未创建
3.3 beforeCreated()： 执行该函数的时候，data和methods还没有初始化
3.4 init data & methods
3.5 created()：如果想调用 data 或 methods 中的数据，最早只能在created中操作
3.6 执行vue代码中的指令，在内存中编译、渲染模板
3.7 beforeMount()：内存中已经渲染好了模板，还没有挂载到DOM上，页面没有刷新数据
3.8 正在将内存编译好的模板，挂载到页面上去
3.9 mounted()：内存中的模板，已经挂载到了页面上。是实例创建的最后一个生命周期函数，当执行完 mounted 就表示，实例已经完全创建好了，此时组件已经脱离了创建阶段，进入了运行阶段。
如果要操作 DOM 中的节点，最早在 mounted() 中执行
3.10 when data changes
3.11 beforeUpdate()：界面没有更新，但是数据已经更新了
3.12 先在内存中生成最新的DOM树，然后再渲染到真实的页面中。Model -> View 的更新
3.13 updated()：此时，Model 和 View 都是最新的了，beforeUpdate 和 updated 这两个事件根据数据的改变，可以触发0次到多次。
3.14 beforeDestroy()：此时组件中的data、methods、指令等等都是可用的，还没有执行销毁操作
3.15 destroy()：执行完该函数，此时组件中所有的数据、方法已经完全销毁了
4. ajax请求
除了 js 原生的 XMLHttpRequest、jquery的 $.ajax 请求外，Vue可以使用 vue-resource 和 axios 处理 ajax 请求。
vue-resource是vue插件。主要用于vue里面使用。而axios是一个http请求库。
不论是vue还是react里面都能使用。而且axios兼容后端在node服务端也可以使用。所以目前来看 axios 是首选。
