Vue使用的模板语言是HTML的超集。在Vue的模板中除了使用插值（{{}}）之外还可以使用指令。在上一节中，我们主要学习和探讨了Vue模板相关的知识，在这一节中，我们将一起来了解Vue中的指令。在Vue中，指令基本上类似于添加到模板中的HTML属性。它们都是以v-开头，表示这是一个Vue特殊属性。Vue中的指令主要分为内嵌的指令和自定义指令。另外有一些指令还带有相应的修饰符。接下来我们主要围绕着这些点来展开，咱们先从内嵌的Vue指令开始。

Vue内嵌指令

在Vue中常见的内置嵌套指令主要有：

接下来，咱们简单的了解一下内嵌指令的使用。

v-text

在Vue模板一节中，我们知道可以使用插值的语法{{}}向模板中插入字符串内容。

<!-- App.vue -->
<template>
    <h1>Vue插值语法：{{}}</h1>
    <div>{{ message }}</div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                message: 'Hello Vue (^_^)'
            }
        }
    }
</script>

如果我们要更新元素的textContent。除了使用Vue插值语法之外，还可以使用v-text指令。他们最终达到的效果是一样的：

<!-- App.vue -->
<h1>v-text</h1>
<div v-text="message"></div>

v-html

有些时候，我们在data中定义的字段会带有HTML的标签，面对这样的场景，如果使用{{}}插值语法或者v-text指令，都会将数据中的HTML当做字符串插入到模板中。这并不是我们期望要的结果。这个时候，使用v-html指令可以解决。v-html指令会更新元素的innerHTML。比如下面这个示例：

<!-- App.vue -->
<h1>v-html</h1>
<div>{{ rawHtml }}</div>
<div v-html="rawHtml"></div>

<script>
export default {
    name: 'app',
    data () {
        return {
            rawHtml: 'Hello, <strong>Vue (^_^) </strong>'
        }
    }
}
</script>

在使用v-html相当于在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击。只在可信内容上使用v-html，永不用在用户提交的内容上。另外在单文件组件里，scoped的样式不会应用在v-html内部，因为那部分HTML没有被Vue的模板编译器处理。如果想对v-html的内容设置带作用域的CSS，可以替换为CSS Modules或用一个额外的全局<style>元素手动设置样式。如果你想在scoped设置v-html内标签元素的样式，需要借助Vue的另外特性，比如 >>> 或 /deep/ 来设置样式。比如上例中的strong样式，我们可以像下面这样来设置：

<style scoped>
    div >>> strong {
        color: red;
    }

    div /deep/ strong {
        color: green;
    }
</style>

有关于这方面更详细的介绍可以阅读早前整理的一篇博文《Vue中的作用域CSS和CSS模块的差异》。有关于v-text和v-html指令更详细的介绍可以阅读《v-text 和 v-html》一文。

v-once

我们知道{{ message }}语法可以将data中的message插入到Vue的模板（或组件）中。当数据中的message发生变更时，模板中对应的值也会发生变更，比如：

<!-- App.vue -->
<h1>v-once</h1>
<div>{{ message }}</div>
<div v-once>{{ message }}</div>
<button @click="changeMessage">修改消息</button>

<script>
    export default {
        name: 'app',
        data () {
            return {
                message: 'Hello Vue (^_^)'
            }
        },
        methods: {
            changeMessage () {
                this.message = 'Hello, 大漠 !'
            }
        }
    }
</script>

当你点击修改消息按钮时，没有使用v-once指令的{{ message }}中的message值会发生变化，反之却不会有任何更新，如下图所示：

上面的示例再次验证了，v-once指令只渲染元素和组件一次。随后的重新渲染，元素或组件及其所有子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-bind

Vue插值语法只能在HTML标签中内容工作，而HTML属性中是不能使用它。如果要动态地给HTML标签绑定属性，需要使用v-bind。比如：

<!-- App.vue -->
<a :href="url">{{ linkText }}</a>

v-bind还有一个简写的方式，使用:来替代：

<a v-bind:href="url">{{ linkText }}</a>
<a :href="url">{{ linkText }}</a>

这两种写法是等效的。

v-bind不仅仅绑定一个物性，还可以绑定多个物特或一个组件prop到表达式。在绑定class或style特性时，支持其它类型的值，比如数组或对象。在绑定prop时，prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。没有参数时，可以绑定到一个包含键值的对象。

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

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

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

<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<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>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

比如上面的示例中，v-bind中还使用了修饰符，常见的修饰符主要有：

• .prop：被用于绑定DOM属性
• .camel：将kebab-case特性名转换为camelCase
• .sync：这是一个语法糖，会扩展成一个更新父组件绑定值的v-on侦听器

注意，在使用字符串模板或通过vue-loader或vueify编译时，不需要使用.camel修饰符。

有关于v-bind指令更详细的介绍可以阅读《v