vue指令总结

原生js的Style操作方式：xxx-yyy-zzz ——xxxYyyZzz

例如：font-size ——fontSize

在vue中同样遵循原生js的这种操作。

2.1 v-text

功能和{{}}是一样 做文本的写入

依赖于一个标签，值写在标签中

<h4>{{msg}}</h4>

<h4 v-text="message"></h4>

2.2 v-html

将输入的字符串一解析的方式写入到页面

data{

  html："<h4>标签文本</h4>

}

<div>{{html}}</html>

<div v-html="html"></div>

2.3 v-on

v-on 需要配合参数进行使用，参数就是元素的事件，就是原始的HTML的事件名

v-on监听HTML的原始dom事件，指定的方法定义的方式和原生的方法定义一样

绑定的事件一定要是在创建的Vue对象所指定的事件，事件方法是定义在methods中

增减修饰符：

定义键盘拦截

阻止冒泡、默认事件

对于键盘而言，可以判断键盘按下的值，用于判断什么时候触发事件

例如当键盘按下a的时候触发事件

<input type="text" v-on:keyup.65="print2()">

2.4 v-bind

元素属性绑定，class style属性该如何处理

v-bind 简写方式  ：（冒号）（属性）

对于互斥的属性，可以结合三目运算符通过bool类型变量取反的形式实现

2.5 v-model

双向数据绑定，经常在表单中使用

.lazy修饰符 用于定义input框的光标移开事件

v-model双向数据绑定对于表单元素的影响

2.6 v-pre

完整显示，让当前标签中的{{}}不做解析，而作为文本直接显示

2.7 v-clock

解决页面的闪烁问题

单独使用无效，需要配合css样式来实现

需要定义css样式：{v-clock}{display:none;}

2.8 v-once

只绑定一次，在vue对象刚创建时，指定改属性的元素只会渲染一次，后续的vue数据变化不会影响到该标签。

2.9v-if

判断boolean类型，用于决定绑定了v-if的元素是否显示

根据选择的结果选择是创建元素还是不创建元素

2.10 v-show

v-show 判断boolean类型，用于决定绑定了v-if的元素是否显示

会直接创建dom元素，但是会根据display：none方式进行元素的隐藏

两者的区别是v-if在dom渲染的过程中，直接不会加载这个元素的dom，而v-show则是会创建dom,但是会设置display：none

2.11 v-else和v-else-if

两者不可以单独使用，必须配合v-if来使用

2.12 v-for

对绑定v-for的元素做循环操作

v-for里面可以获取key和value，例如<span v-for="(v,k) in user">{{k}}:{{v}}</span>

1.x：（v,k）v:当前循环的对象 k:当前的下标

2.x： （k,v）同上

2.13 自定义指令