vue-指令&修饰符
基本指令
v-html
作用： 相当于js中的innerHTML，插入元素，可以输入html标签
使用：
总结：有时后台会返回一段带html标签的数据而不是字符串，这是v-html就有用武之地了。
v-text
作用： 相当于js中的innerText，插入文本，等同于插值表达式/mustache语法 -- {{}}
使用：
注意：解析不了html标签。
总结：不常用
v-pre
作用：跳过使用此语法的元素极其子元素，直接显示插值表达式内容，加快编译速度，一般静态内容不需要解析的可以使用。
使用：{{message}}
注意：没有使用指令且未使用插值表达式使用，不然会显示{{要解析的数据名}}
总结：特定场景使用，提高性能。
v-cloak
作用：页面加载时的数据会出现插值表达式在页面上闪烁，使用v-cloak指令则在表达式内的值未渲染完成则隐藏。
使用：html {{message}} css/ [v-cloak] { display: none; }
总结：出现令用户无法的理解代码，会影响用户体验感，优化用户使用体验
v-once
作用：对于只需要渲染一次的数据，v-once使其节点以及子节点以下所有节点都不进行第二次渲染。
使用：这里使用定时器测试下，使其作用看起来更直观
{{message}}
mounted() {
setTimeout(() => { //使用了v-once则不会受到第二次数据变动的影响
this.message = 'change value'
log(this.message)
},5000)
}
注意：只能渲染一次，不要忽略了子节点内的数据，如果子节点需要动态接收数据状态则不适合用
总结：一次性数据进行过滤，提高性能
判断指令
v-if
作用：对元素的显隐的判断操作
使用：message
注意：它与另外一个判断指令v-show的区别就在于，不符合判断的被绑定的这个节点就会连同被整个删除。
总结：对于节点的显隐判断操作还是非常频繁的，不过v-if对节点显隐操作的消耗更大，不适合频繁对元素进行的显隐操作
V-else-if & v-else
作用：就是正常的if判断，一级判断未进入则进入二级判断，否则进入else
使用：
{{message}}
else-if偷偷跑出来的
else偷偷跑出来的
注意：与v-if成对出现
总结：使用时如果注意到时频繁操作，除非需要涉及到一些安全性问题，v-show会有。
v-show
作用：根据判断对绑定元素进行显隐操作
使用：is_show
注意：使用v-show的元素即使隐藏或显示了，也可以通过浏览器将其显示/隐藏
总结：适合频繁的显隐操作，以及不能让用户操作显隐的操作可以使用。
循环指令
v-for
作用：循环数据并在页面中渲染
使用
{{item.id}} + {{item.name}}
注意：:key是一定要添加的，否则在eslint或vuter中报错，在对于复杂的数据，
且有唯一id标识，比如对象数组的数据使用其id作为key值能提高性能，一般使用数组下标多为为了盖住警告，对性能无提优。
还有v-for和v-if一起使用时，v-for的优先级要比v-if高，所以循环的节点都会拥有v-if指令
总结：使用很频繁，可以循环，String,Array,Object等...
双向绑定指令
v-model
作用：常用于对form表单内元素的数据绑定
使用：
{{item.id}} + {{item.name}}
双向绑定的数据用户id：{{userId}}用户名:{{userName}}
add() {
this.user.push({ id: this.userId, name: this.userName })
log(this.user)
}
总结：对于用户form表单上的数据绑定很有用
属性绑定指令
v-bind
作用：将元素的属性使用动态的方式绑定，例如image的src,或普通元素的clss/style ，等等...
使用：
style
class
对象语法绑定
数组语法绑定
.active_class{
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
border: 1px solid #CCCCCC;
color: gold;
font-size: 12px;
}
.obj_sty{
font-size: 30px;
color: red;
}
.obj_sty2{
border: 10px solid skyblue;
}
.arr_sty{
font-size: 25px;
color: #5500ff;
}
.arr_sty2{
font-family: "楷体"
}
总结：v-bind的使用十分频繁，只要需要动态修改的元素属性都会用到，其语法糖是<:>
修饰符
v-model修饰符（.lazy、.number、.trim）
.lazy
作用：动态绑定input框输入时，v-model是在用户每一次输入/input事件后则同步数据，添加.lazy后则转变为每次onchange事件之后触发,如失焦，keyup.Enter操作之后同步数据
使用：
注意：添加了.lazy修饰符就不能监听每一次keyup操作了，除了keyup.Enter以及使其输入框失焦的键盘操作
总结：除了特殊要求外可以减轻监听的频率
.number
作用：
使用：
log("得到的值",this.userId) //通过打印我们看到原本String类型的值被转换成了Number类型
log("查看输入的类型",typeof this.userId)
结果：
注意：当输入了数值型和字符串一起的值，输入字符串要先将字符串删除才会同步数据，且最终打印出来的只有数值，因为.number修饰符使用了parseInt方法去解析，字符串会被过滤出去
总结：由于此修饰符的限制性，这里建议使用正则表达式和Number来限制
//绑定一个input事件，注意不能使用.lazy修饰符，不然可以输入字符串，最后得到NaN
u_input(e){
this.userId = this.userId.replace(/[^\d]/g,'')
}
this.userId = Number(this.userId)
.trim
作用：去除掉用户输入的左右两边的空格
使用：
注意：使用了.lazy是失焦事件触发，否则是keydown触发
总结：去除掉两边的空格
键盘事件（keydown/keypress/keyup）
1. keydown: 当用户按下任意键时触发，按住不放，重复触发。
2. keypress: 当用户按下且松开按键时触发，按住不放，重复触发
3. keyup: 当用户释放按键时触发
键盘事件修饰符
1. .enter //回车键
2. .tab //切换键
3. .delete //删除
4. .esc //返回/离开键
5. .space //空格键
6. .up // 方向上键
7. .down //方向下键
8. .left //方向左键
9. .right //方向右键
使用：
key_p(){
log('键盘事件')
}
key_ups(e){
if(e.keyCode == 13){
log('回车操作,获取用户输入数据:',this.key_event)
}
}
//全局注册个指定键码
Vue.config.keyCodes.a = 38
附上本篇所有代码
愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话 —— 鲁迅
end