vue学习之：一篇搞懂vue的指令v-model，v-if 和 v-show

什么是指令

指令 (Directives) 是带有 v- 前缀的特殊属性，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。通过特定的指令，完成特定的事。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地绑定src动态地址

<img v-bind:src="imgSrc"  alt="">

在这里 src 是参数，告知 v-bind 指令将该元素的 src 属性与表达式 imgSrc 的值绑定。

从 2.6.0 开始，也可以用方括号括起来的动态参数作为一个指令的参数。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.stop 修饰符告诉 v-on 指令对于触发的事件调用 event.stopPropagation()，常见修饰符：

• .once 事件只触发一次
• .stop 阻止冒泡，调用 event.stopPropagation()
• .prevent 阻止默认行为，调用 event.preventDefault()
• .self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
• .capture 添加事件侦听器时使用事件捕获模式

常用指令

v-model

• 用法

v-model 指令在表单 、 及 元素上创建双向数据绑定。它负责监听用户的输入事件以更新数据。

• 示例

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-bind

• 用法

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。在绑定 class 或 style 属性时，支持其它类型的值，如数组或对象
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

• 缩写： ：
• 示例

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 动态属性 (2.6.0+支持) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定，“prop”必须在 my-component 中声明-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

v-for

• 用法

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名。
当和 v-if 一起使用时，v-for 的优先级比 v-if 更高

• 示例

//当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。
//如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，
//而是就地更新每个元素，并且确保它们在每个索引位置正确渲染.
//建议尽可能在使用 v-for 时提供 key 属性
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

v-on

• 用法

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click=“handle(‘ok’, $event)”。
从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

• 缩写：@
• 示例

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 动态事件缩写 (2.6.0+支持) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

在子组件上监听自定义事件 (当子组件触发“child-click”时将调用事件处理器)：

<child-component @child-click="doThis"></child-component>

v-if 和 v-show

• 用法

根据表达式的值的真假来有条件地渲染元素。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

• v-if：根据表达式的值的真假条件，切换时绑定组件 / 组件被销毁并重建。
• v-show：根据表达式之真假值，切换元素的 display CSS 属性。
• 示例

<!-- v-if -->
<h1 v-if="ok">Hello!</h1>
<!-- v-show， 注意 v-show 不支持 <template> 元素，也不支持 v-else-->
<h1 v-show="ok">Hello!</h1>

v-text

• 用法

更新元素的 textContent。

• 示例

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

可以用于提升性能的指令

v-once

• 用法

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

• 示例

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>

v-pre

• 用法

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

• 示例

<span v-pre>{{ this will not be compiled }}</span>

下一篇：vue自定义指令，实例操作
欢迎点赞留言！