Vue指令

指令

在Vue.js中指令 (Directives) 是指带有 v- 前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

数据绑定语法 - 插值

• v-text：写法
  < span v-text=“msg” >< /span >
  < span >{{msg}}< /span >
  用途：更新元素的 textContent。

• v-html：写法
  < div v-html=“html” >< /div >
  用途：更新元素的 innerHTML。
  注意：内容按普通 HTML 插入，不会作为 Vue 模板进行编译 。

条件渲染

条件渲染指令在总体分为v-if和v-show。

• v-if：写法 < p v-if=“ok” >v-if渲染< /p >
  特点：满足条件才渲染，否则整个标签都不渲染。
  可与v-else、v-else-if搭配使用，用法类似写原生js，但是不能缺少v-if语句。

实例：
< div v-if=“type === ‘A’” >
A
< /div >
< div v-else-if=“type === ‘B’” >
B
< /div >
< div v-else >
Not C
< /div >

• v-show：写法< h1 v-show=“ok” >v-show渲染< /h1 >
  特点：元素始终会被渲染并保留在 DOM 中，仅会根据是否满足条件而控制元素display属性进行显示隐藏。
  v-show不能与v-else配合使用，一般单独使用。

属性绑定

• v-bind：写法< img v-bind:src=“img” >，缩写< img :src=“img” >
  特点：一般对元素的属性进行绑定，可以让属性后面跟变量或者表达式。

事件绑定

• v-on：写法< button v-on:click=“once” >< /button >，缩写< button @click=“once” >< /button >
  用途：绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
  注意：
  事件处理函数一定要写在实例的 methods内部。
  默认参数（啥参数都不传都有的参数）是事件对象，如果有其他参数 事件对象需要通过 $event 手动传递

列表渲染

• v-for：写法
  < div v-for=“item in items” >
  {{ item.text }}
  < /div >
  或
  < div v-for="(item, index) in items" >< /div >
  用途：基于源数据多次渲染元素或模板块。
  特点：当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

表单控件

• v-model：写法
• < input v-model=“check” >
  {{check}}
  用途：在表单元素上创建双向数据绑定。
  特点：监听用户的输入事件以更新数据。

自定义指令

除了核心功能默认内置的指令，Vue 也允许用户自行根据需求注册自定义指令。下文以自动获得焦点为例说明自定义指令注册步骤。
// 注册一个全局自定义指令 v-focus
Vue.directive(‘focus’, {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
之后即可在body中添加自动获焦指令< input v-focus >