vue的常用指令

文本插值：数据绑定最常见的形式就是使用双大括号的文本插值

<span>Name: {{ name }}</span>

简单的操作运算：Vue提供了完全的JavaScript表达式支持，可以再插值时进行简单的计算，且每个绑定都只能包含单个表达式，如

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

指令是带有v-前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到DOM上

v-model指令：在input、textarea、select、checkbox和radio等表单元素上双向绑定数据

<input v-model="demo" />
<p>{{demo}}</p>
当用户在input中输入内容，P标签内的内容也会随着改变
数据绑定的是表单的value值，但checkbox没有value值，这时绑定的值为true和false

我们可以自定义选择和取消两种状态的值
<input type="checkbox" v-model="demo" true-value="选中" false-value="取消" />

v-model修饰符

.lazy：默认情况下在每次input事件触发后将输入框的值与数据进行同步，该修饰符可以在change事件之后进行同步
    <input v-model.lazy="demo" />
.number：自动将用户输入的转换为数值，如果无法被parseFloat()解析，则返回原始值
.trim：过滤输入的首尾空白字符</pre><strong>v-once指令</strong>：当name的值发生了改变对应的组件实例上也会发生改变，可以使用v-once对数据仅进行单次绑定

<span v-once>Name: {{ name }}</span>

v-if指令：根据该指令的值的真假来确定是否渲染

<p v-if="val">val为真时能看到

v-else-if和v-else指令：为v-if指令添加else

<p v-if="val>0">看到if</p>
<p v-else-if="val==0">看到if</p>
<p v-else>看到else</p>

v-show指令：根据该指令的值的真假来确定是否显示

不同于v-if指令，该值为false时仅仅会设定其css的display属性为none，而v-if是不渲染

v-html指令：双大括号会将数据解释为普通文本，其中的HTML代码也会原样输出，使用v-html指令可以输出html内容

<span v-html="html_str"></span>
相当于该span的innerHTML值等于html_str

v-for指令：便利一个数组或对象来渲染一个列表，其值使用"item in items"形式的语法

<li v-for="val in arr_or_obj">{{val}}<li>
    以上代码会遍历arr_or_obj，并输出其每个元素的值

还可以传入2个或3个参数获取遍历对象的索引值和键名
<li v-for="(val,name,index) in arr_or_obj">{{index}}==>{{name}}==>{{val}}<li>
    当遍历的是数组时，第一个是值，第二个是索引值，如果传入第三个参数那么该参数值为空
    当遍历的是对象时，第一个是值，第二个是键名，如果传入第三个参数那么该参数值为索引值

当遍历的对象发生改变时为了高效vue仅仅会再次渲染新添加的元素，这有可能导致我们的列表顺序错误
此时需要使用key属性用来指定遍历对象的关键元素进行监控用以更新渲染的列表排序
<li v-for="val in arr" :key="val.index">{{val}}<li>
<li v-for="val in obj" :key="val.id">{{val}}<li>

v-bind:attr指令

对于属性值我们是不能直接使用双大括号的，而直接输入不会编译，此时我们需要使用v-bind:attr指令，用于添加指定的属性及其值

<span v-bind:id="myid" v-bind:title="mytitle">Name: {{ name }}</span>
如果绑定的值是null或undefined，那么该attribute将不会被包含在渲染的元素上

v-on:event指令：用于监听DOM事件

<p v-on:click="doSomething">

如果其值为一个方法名，那么这个方法可以接受一个event参数用以获取该事件的具体信息，如event.target.tagName
也可以直接使用包含参数的方法调用，如v-on:click="demo('arg')"
此时如果我们仍然像获取事件对象，可以传入参数$event，如v-on:click="demo('arg',$event)"
还可以传入多个事件处理方法，多个处理之间使用逗号隔开v-on:click="demo1('arg',$event),demo2"

事件中的修饰符，是由点开头的指令后缀来表示的，用来更方便和精确的控制事件

.stop     ：阻止事件继续冒泡
.prevent  ：取消事件的默认行为
.capture  ：与事件冒泡的方向相反，事件捕获由外到内，阻止捕获
.self     ：只会触发自己范围内的事件，不包含子元素
.once     ：事件仅触发一次
.passive  ：立即执行事件默认行为
    每次事件产生，浏览器都会去查询是否有preventDefault阻止该次事件的默认动作
    加上passive就是告诉浏览器不用查询而是立即执行默认行为
    一般用在滚动监听，@scoll，@touchmove
    滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿
    通过passive将内核线程查询跳过，可以大大提升滑动的流畅度
多个修饰符可以串联使用，且串联顺序很重要，如@click.prevent.self会阻止元素本身及其子元素的点击的默认行为，而 @click.self.prevent只会阻止对元素自身的点击的默认行为

按键修饰符

可以将点击查看中暴露的按键名转换为kebab-case格式来作为修饰符
如@keyup.enter="submit"、@keyup.page-down="something"
vue为常用的按键提供了修饰符别名：
.enter、.tab、.esc、.space、.up、.down、.left、.right、.delete (捕获“删除”和“退格”键)

系统修饰符

实现仅在按下相应按键时才触发鼠标或键盘事件，事件触发时修饰键必须处于按下状态
.ctrl、.alt、.shift、.meta，如@keyup.alt.enter="clear"
.exact修饰符允许控制精确的系统修饰符组合触发的事件
    @click.ctrl="onClick"：只要点击的时候ctrl处于按下状态就会触发，即使触发时其他按键如shift也处于按下状态
    @click.ctrl.exact="onClick"：当且仅当ctrl按下时点击才会触发
    @click.exact="onClick"：当且仅当没有任何系统修饰符按下时点击才会触发

鼠标修饰符

.left、.right、.middle

动态属性和动态监听：

用方括号括起来的JavaScript表达式用来表示具体的操作，动态参数预期会求出一个null以外的字符串，任何其它非字符串类型的值都将会触发一个警告
<a v-bind:[attr]="url"> ... </a>，会根据attr的值插入指定的属性
<p v-on:[event]="doSomething">

vue的简写指令

Vue为v-bind和v-on这两个最常用的指令，提供了特定简写，用于加快开发效率

v-bind指令直接省略'v-bind'字符。仅保留冒号：
    <span v-bind:id="myid"></span> ==> <span :id="myid"></span>
v-on指令替换为'@'字符，冒号也被替换：
    <p v-on:click="doSomething"> ==> <p @click="doSomething">

操作class属性

在vue中对常用的class属性做了加强

可以传入一个对象，该对象的属性名为className

属性名如果是驼峰命名可以省略引号，如果包含其他字符如短横线需要使用引号包含

属性值为bool值，为真该className会进行渲染

<div class="class01" :class="{ 'class02': class02_bool, 'class03': class03_bool }"></div>
以上示例如果当class02_bool为false，class03_bool为true时渲染的结果为
<div class="class01 class03"></div>
也可以传入一个数组，每个元素可以是字符串，也可以是对象，也可以是一个简单的返回字符串或对象的表达式(如三元表达式)，最后会将所有符合的className进行组合渲染

组件中在根元素使用class属性时，这些class不会被覆盖而是添加到该元素中

app.component('my-component', {
    template: `<p class="foo bar">Hi!</p>`
})
<my-component class="baz boo"></my-component>

渲染结果为
<p class="foo bar baz boo">Hi</p>

操作style属性

在vue中也对style属性做了加强，会自动为对应浏览器添加前缀

传入对象，对象的每个元素的属性名要使用驼峰命名或短横线分割，每个键值对对应一对css属性

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
传入数组，可以将多个样式对象应用到同一个元素上，数组每个元素为一个对象