Vue系列之指令（四）

前言

      紧接上一篇的模板，今天来介绍一下指令( Directives )。它的任务就是当js表达式改变时，可以动态地对dom进行响应，本章节仅对指令进行入门级讲解，后续在事件等其他章节会给大家更加详细的讲解哒~

 

正文

1. 参数

      指令以 v-名称：参数 的形式存在。例如，v-bind 指令可以用于响应式地更新 HTML 特性：

<a v-bind:href="url">跳转中</a>

      这里 bind是名称，href 是参数。该指令表示该元素的 href 与 url 表达式的值进行绑定 。

再举个 v-on 指令的栗子，它用于监听 DOM 事件：

<a v-on:click="点击">点击我啦</a>

      ps：后面我们会详细讲解事件。

 

2. 动态参数

      上面讲述的都是定义好的指令参数，有的时候我们需要对参数进行动态的配置，vue提供一种使用中括号[参数]的方式，看下面：

<a v-bind:[attributeName]="url"> ... </a>

      这里的 attributeName 就是一个动态的参数，依据 js 表达式进行动态求值，并作为最终的参数。例如，如果 attributeName值为 "href", 那么这个绑定将等价于 v-bind:href；如果值为"url", 那么这个绑定将等价于 v-bind: url。

 

3. 修饰符

      vue对指令还提供一种修饰符的功能，用于表示该指令的一种特殊方式绑定。表现形式为参数后面加一个 . 号。不明白的举个栗子：

<input v-model.trim="text" />

例如，.trim 修饰符告诉 v-model 指令对于输入的数据调用 trim()方法。

 

4. 指令缩写

      在日常开发中，我一直秉持的原则是能省的地方坚决不多敲一次键盘（就是这么懒）。所以对于指令的编写，我们可以使用它的缩写形式。vue也很友好地提供了 v-bind 和 v-on 两种指令的特殊缩写。
v-bind的缩写

# 完整语法
<a v-bind:href="url">跳转中</a>
# 缩写
<a :href="url">跳转中</a>

v-on的缩写

# 完整语法
<a v-on:click="点击">点击我啦</a>
# 缩写
<a @click="点击">点击我啦</a>

      从上面的栗子可以很清楚的看到，v-bind 被 : 替换，v-on 被 @ 替换，是不是很方便。

                                                                       觉得本文对你有帮助？请分享给更多人

                                                              关注「前端怪咖」，加入我们，一起提升前端技能