vue——内部指令

指令是特殊的带有前缀v-的特性。指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。

1. v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。

false——移除；true——生成一个元素

如果想切换多个元素，可以把<template>元素当作包装元素

切换v-if模块时，有局部编译/卸载过程。

v-if是惰性的——如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

2.v-show

v-show指令是根据表达式的值来显示或隐藏HTML元素。

false—隐藏，元素上多了一个内联样式styLe=”display:none”

注：v-show不支持 <template>语法

v-show——元素始终被编译保留，只是简单的基于CSS切换。

注：一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁的切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。

3.v-else

v-else必须着在v-if或v-show，充当else的功能。

将v-show用在组件上时，因为指令的优先级v-else会出现问题，所以要用另一个v-show替换v-else。

4.v-model

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。

v-model指令后面还可添加多个参数（number、lazy、debounce）。

number——输入转换为number类型

lazy——将数据改到change事件中发生

debounde——设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。

5.v-for

v-for指令基于源数据重复渲染元素。使用$index呈现相对应的数组索引。

传入的表达式形式，如：item in/of items

6.v-text

v-text指令可以更新元素的textContent.

7、v-html指令可以更新元素的innerHTML.

注：不建议在网站上直接动态渲染任意HTML片段，很容易导致XSS攻击。

8、v-bind指令用于响应更新HTML特性，将一个或多个attribute，或者一个组件prop动态绑定到表达式。

9、v-on指令用于绑定事件监听器。事件类型由参数指定；表达式可以是方法的名字或一个内联语句；如果没有修饰符也可以省略。

如：方法处理器：<button v-on=”doThis”></button>

内联语句：<button v-on:click=”doThat(‘hello’,$event)”></button>

缩写：<button @click=”doThis”></button>

v-on后面可以增加修饰符：

·.stop——调用event.stopPropagation()

·.prevent——调用event.preventDefault()

·.capture——添加事件侦听器时使用capture

·.self——只当事件是从侦听器绑定的元素本身触发时才触发回调。

·.{keyCode | keyAlias}——只在指定按键上触发回调。

如：停止冒泡： @click.stop=”事件名”

阻止默认行为： @click.prevent=”事件名”

阻止默认行为（无表达式）：@submit.prevent

串联修饰符：@click.stop.prevent=”事件名”

键修饰符，键别名：@keyup.enter=”onEnter”

键修饰符，键代码：@keyup.13=”onEnter”

10.v-ref在父组件上注册一个子组件的索引，便于直接访问。