接下来我们将会学习 Vue.js 的指令和模板语法。

一个指令是一个特殊的记号，它会告诉 Vue 应该对DOM元素做什么特殊处理。

在 Vue.js 中，指令是以 HTML 元素为前缀的 HTML 属性形式。

指令的目的是将 HTML 元素绑定到 Vue 实例上面，这样可以让 Vue 对这个 DOM 元素进行更改。

在更改元素的过程中，可能会用到一些其他的资源，可能包括 Vue 实例中的数据、方法和其他元素。

通用指令语法如下所示：

<element
  prefix-directiveId="[argument:] expression [| filters...]">
</element>

我们将在本课中解释上述代码的第 2 行中的所有内容，包括前缀（prefix）、指令 ID（direactiveId）、参数（grgument）、表达式（expression）和过滤器（filters）。

v- 前缀

所有 Vue 指令都是以 v- 开头的。

v- 前缀后面紧跟着的是指令 ID。指令 ID 包括 if、on、ref、show、pre、bind 和 html。

通过将 v- 前缀与指令 ID 结合起来，就可以生成完整的指令。例如 v-if、v-html 等。

指令的可执行示例如下所示：

new Vue({
  el: '#app',
  template:
  `<div>
    <h1>Vue.js Application</h1>
    <p v-if="visible"> I am visible because the visible variable is true! </p>
  </div>
  `,
  data: {
      visible: true
  }
})

你可以在上面的代码示例中尝试将变量 visible 更改为 false，并重新运行应用程序来观察运行结果的变化。

修改之后，第 6 行的 p 元素将不会出现在 HTML 中。

指令参数

一些指令需要额外的参数来告诉指令要做什么。

这些属性会跟在指令的 : 之后。

例如，v-bind 指令需要一个额外的参数，例如我们需要用 v-bind 将 Vue 实例上的 url 属性绑定到元素的 href 上面。

<a v-bind:href="url"> ... </a>

在上面的例子中，v-bind 指令后面的 href 会将 Vue 实例上的 url 属性绑定到 a 元素的 href 属性上面。

表达式

表达式必须返回一个变量。因为指令是通过一个实际的变量来决定元素的外观或行为的。

在上面显示的示例中，url 是一个变量。该值将绑定到 a 元素的 href 属性上。

过滤器

过滤器的主要作用是实现文本格式化。

它通常与 v-bind 和插值表达式一起使用。

它的语法是将它放在表达式末尾的管道符号 (|) 之后。

过滤器接受一个格式化的参数，通常是一段文本。

| 前面的表达式会作为参数传递给过滤器。

过滤器的一个可执行示例如下所示：

new Vue({
  el: '#app',
  template:
  `<div>
    <p> 名字 {{name}} 一共有 <b>{{name | lettersCount}}</b> 个字 </p>
  </div>
  `,
  data: {
      name: '张三'
  },
  filters : {
        lettersCount : function(value) {
          return value.length;
      }
    }
})

在上面的示例中，过滤器 lettersCount 将 name 用作参数并返回其随后显示的字母数，而不是显示 name 的实际值。

自定义指令

Vue.js 也允许你定义自己的指令。

当执行某种类型的格式化或启用应用程序中常见的某种行为时，这些自定义指令会很有用。

下面是定义自定义指令的语法：

Vue.directive('directiveName', {
   bind(element, binding, v_node) {
     // 你要做的事情
   }
})

directiveName 是你的指令命名，可以取任何你想要的名称。

注意 bind 函数的 element、binding 和 v_node 参数。

bind 函数是执行指令和处理指令的核心部分，它需要上述的三个参数。

element

它是将要进行修改的元素。

binding

binding 是传递给自定义指令的所有参数。

例如，如果参数 color:green 像这样传递 myDirective = "{color: 'green'}"，那么 binding 将包含属性 binding.value.color，它的值是 green。

v_node

VNODE 是 Vue 中 Virtual Node 的缩写。

Vue 的虚拟 DOM 是包含 VNodes 的树。

它也会传递给 bind 函数，以便 bind 函数可以访问元素的虚拟 DOM。

可以运行下面提供的示例来查看如何定义和使用自定义指令：

Vue.directive("textStyle",{
    bind(element,binding, v_node) {
      element.style.color=binding.value.color;
      element.style.fontSize = "35px";
    }
});

new Vue({
  el: '#app',
  template:
  `<div>
    <p v-textStyle = "{color:'red'}">这段内容的样式是通过自定义指令来实现的。</p>
  </div>
  `
});

在上面的例子中，我们定义了 textStyle 指令，并将 color 传递给它。

在 bind 函数中，我们根据传递的 color 参数更新了元素的样式。

注意：必须在创建 Vue 实例之前定义自定义指令，否则将会不起作用！