• padStart(位数，需要补的数字),padEnd() 的使用，ES6新增Stringz方法，用于补充位数不足的情况。

• 按键修饰符

比如说:下面的键盘抬起事件调用了submit方法，在键盘事件中可以加上修饰符可以指定某个按键触发事件

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

Vue官方提供了很多内置按键别名

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

除此之外，对于没有提供的别名的按键，我们可以使用js里面的键盘事件对应的编码 来添加修饰符，也可以为指定按键自定义别名

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

• 自定义全局指令让文本框获取焦点

//自定义Vue全局指令,定义时不需要添加v-前缀，调用时需要添加
//参数一，指令名，参数二，对象（带有指令的钩子函数）
Vue.directive("focus",{
    bind: fucntion(el){  //指令绑定到该元素上时，会立即执行bind,且只执行一次
        //el表示被绑定指令的元素，是原生js对象
        //el.focus()
    },
    inserted: function(el){  // 元素插入到dom中时，会执行该函数，只执行一次
        el.focus()
    },
    updated: fucntion(){ //当组件更新时，会执行update函数，可能会触发多次
    
    }
})

• 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

3. update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。

4. componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

5. unbind：只调用一次，指令与元素解绑时调用。

• 一般，设置dom样式可放在bind钩子函数中，和dom行为相关的可放在inserted钩子函数中

• 指令钩子函数会被传入以下参数：

1. el：指令所绑定的元素，可以用来直接操作 DOM 。

2. binding：一个对象，包含以下属性：

• 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 }。

3. vnode：Vue 编译生成的虚拟节点.
4. oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

• 注意：除了el属性，其他属性都是只读的

• 定义私有指令

let vm = new Vue({
    el: xxx,
    methods:{
    },
    filters:{
    
    },
    //自定义私有指令，属性同全局指令
    directives:{
        
    }
});

• 指令简写： 同时写在bind 和 update属性中,那么可以使用如下写法

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

• Vue实例的生命周期（钩子）函数

从Vue实例被创建，运行，销毁期间中的过程，叫做Vue实例的生命周期

1. 创建时期的生命周期钩子

beforeCreate()：实例完全被创建出来之前执行，这时data,methods属性中的数据都未被初始化 created(): 这时，data,methods属性中的数据已经被初始化 beforeMount(): 在内存中编译好模版后，尚未将模版渲染到页面中，页面中的dom元素尚未被替换过来，叫做挂载数据之前 mounted(): 挂载模版到页面中（用户可见），已经替换了页面中的值，当执行完mounted表示，实例已经完全创建完成。

2. 运行时期的生命周期钩子

beforeUpdate(): 当data中的数据发生改变（被更新）时触发，执行该钩子函数时，页面上的数据是旧，M和V尚未同步。 updated(): 此时根据data中最新的数据，内存中重新生成一份最新的dom树，虚拟dom已经重新渲染并且更新。完成了从M到V的更新

3. 销毁期间的生命周期钩子

beforeDestroy(): 执行该钩子函数时，Vue实例身上的data,methods，过滤器，自定义指令，还属于可用状态 destroy(): 执行该钩子函数时，Vue实例上的组件已经完全被销毁，data，methods，过滤器，指令属于不可用状态

• Vue实例生命周期钩子的实际应用场景