监听键盘事件

1. keyup按键弹起时执行事件 .enter 就是绑定enter键，在文本框中回车执行add方法

<input type="text" class="form-control" v-model="name" @keyup.enter="add">

2. 按键修饰符,全部按键别名:
   .enter
   .tab
   .delete
   .esc
   .space
   .up
   .down
   .left
   .right
3. 其他按键可以通过键盘码操控(键盘码为可查询固定值)，绑定f2按键

<input type="text" class="form-control" v-model="name" @keyup.113="add">

4. 自定义全局按键修饰符，绑定f2按键

<input type="text" class="form-control" v-model="name" @keyup.f2="add">

Vue.config.keyCodes.f2=113;

---

自定义指令

1. Vue中所有指令在调用的时候都以v- 开头
2. 自定义指令 使用Vue.directive()定义全局指令 参数1：指令的名称（注意：在定义的时候，指令的名称之前不需要加v- 前缀）参数2：是一个对象（这个对象上有一些指令相关的函数）

钩子函数

• bind:function(){},//当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
• inserted:function(){},//表示元素插入到DOM中的时候,会执行inserted函数,只触发一次
• updated:function(){}//当VNode更新的时候会执行update,可能会触发多次

---

1. 在每个函数中第一个参数永远是el，表示被绑定了指令的元素，el是一对象个原生的js
2. 自定义一个v-focus指令为文本框获取焦点

<input type="text" v-model="keywords" class="form-control" v-focus>

3. 元素刚绑定指令的时候，还没有插入到DOM中去，此时调用focus方法没有作用(此时不会有样式效果)

Vue.directive('focus',{
                bind:function(el){
                    el.foucus()
                },/
            })

4. 一个元素只有插入DOM后才能获取焦点

Vue.directive('focus',{
                inserted:function(el){
                    el.focus()
                },
            })

光标聚集

5. 自定义一个文本框中输入字体颜色的指令

<input type="text" v-model="keywords" class="form-control" v-focus v-color>
            Vue.directive('color',{
                    bind:function(el){
                    el.style.color='red'
                }

输入字体颜色更改

6. 和js有关的操作最好在inserted中执行，放置js行为不生效；和样式有关的操作一般可以在bind中执行

---

钩子函数的属性

1. el：指令所绑定的元素，可以用来直接操作DOM
2. binding：一个对象包含以下属性
   • name 获取指令的名字
   • value 指令的绑定值
   • oldValue 指令绑定的前一个值
   • expression 绑定值的字符串形式
   • arg 传给指令的参数
   • modifiers
     3.vnode vue生成的虚拟节点
3. oldVnode 上一个虚拟节点
4. 让自定义的v-color能够自定义颜色

<input type="text" v-model="keywords" class="form-control" v-focus v-color="'green'">

Vue.directive('color',{ 
                bind:function(el,binding){
                    el.style.color=binding.value
                }
                
            })

定义私有指令

1. 自定义一个改变字体粗细的指令

directives:{
                    'fontweight':{
                        bind:function(el,binding){
                            el.style.fontWeight=binding.value
                        }
                    }
                }

2. 函数简写，大多数情况下想在bind和updated钩子上做重复动作，可以

<div  v-fontsize="'70px'">{{date|dataFormat('')}}</div>

directives:{
            'fontsize':function(el,binding){//这个function等同于把代码写到bind和updated中
              el.style.fontSize=parseInt(binding.value)+'px'
                }
        }

---

• 字符串方法padStart,ES6中的字符串新方法String.prototype.padStart(maxlength,fillString=’’),或者String.prototype.padEnd(maxlength,fillString=’’)来填充字符
• 例如可以让时间时分秒不是两位数时自动填充0,

                            var hh=dt.getHours().toString().padStart(2,'0')
                            var mm=dt.getMinutes().toString().padStart(2,'0')
                            var ss=dt.getSeconds().toString().padStart(2,'0')