vue-api-指令

v-text

详情：
更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

<template>
    <div>
        <span v-text="Message"></span>
        <span>{{ Message }}</span>
    </div>
</template>

v-html

详情：
更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

<template>
    <div>
       <div v-html="html"></div>
    </div>
</template>

v-show

详情：
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。

<template>
    <div>
        <span v-show="show">v-show</span>
    </div>
</template>

v-if / v-else-if / v-else

详情：
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 < template > ，将提出它的内容作为条件块

<template>
    <div>
        <span v-if="if"> true </span>
        <span v-else-if="!if"> false </span>
        <span v-else> v-if </span>
    </div>
</template>

v-for

详情：
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名

<template>
    <!-- Array -->
    <div v-for="(item, index) in Array">{{ item }} -- {{ index }}</div>
    <!-- Object -->
    <div v-for="(val, key, index) in Object">{{ val }} -- {{ key }} -- {{ index }}</div>
</template>

v-on

详情：
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

    # .stop - 调用 event.stopPropagation()。
    # .prevent - 调用 event.preventDefault()。
    # .capture - 添加事件侦听器时使用 capture 模式。
    # .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    # .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    # .native - 监听组件根元素的原生事件。
    # .once - 只触发一次回调。
    # .left - (2.2.0) 只当点击鼠标左键时触发。
    # .right - (2.2.0) 只当点击鼠标右键时触发。
    # .middle - (2.2.0) 只当点击鼠标中键时触发。
    # .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

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

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

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

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

    <!-- 阻止默认行为 -->
    <button @click.prevent="doThis"></button>

    <!-- 阻止默认行为，没有表达式 -->
    <form @submit.prevent></form>

    <!--  串联修饰符 -->
    <button @click.stop.prevent="doThis"></button>

    <!-- 键修饰符，键别名 -->
    <input @keyup.enter="onEnter">

    <!-- 键修饰符，键代码 -->
    <input @keyup.13="onEnter">

    <!-- 点击回调只会触发一次 -->
    <button v-on:click.once="doThis"></button>

    <!-- 对象语法 (2.4.0+) -->
    <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
</template>

子组件监听自定时事件：

<template>
    <my-component @my-event="handleThis"></my-component>

    <!-- 内联语句 -->
    <my-component @my-event="handleThis(123, $event)"></my-component>

    <!-- 组件中的原生事件 -->
    <my-component @click.native="onClick"></my-component>  
</template>

v-bind

详情：
动态地绑定一个或多个特性，或一个组件 prop 到表达式

    # .prop - 被用于绑定 DOM 属性 (property)。
    # .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase.
    # .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器

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

    <!-- 缩写 -->
    <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>

    <!-- XLink -->
    <svg><a :xlink:special="foo"></a></svg>
    
    <!-- .camel 修饰符绑定 svg -->
    <svg :view-box.camel="viewBox"></svg>
</template>

v-model

详情：
在表单控件或者组件上创建双向绑定。

限制：

    # <input>
    # <select>
    # <textarea>

修饰符：

    # .lazy - 取代 input 监听 change 事件 延迟
    # .number - 输入字符串转为有效的数字
    # .trim - 输入首尾空格过滤

<template>
    <!-- 绑定 -->
    <input type="text" v-model="input" />

    <!-- 延迟监听lazy -->
    <input type="text" v-model.lazy="input" />

    <!-- 将字符串转为Number -->
    <input type="text" v-model.number="input">
</template>

v-once

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

<template>
    <!-- 单个元素 -->
    <span v-once>This will never change: {{msg}}</span>
    <!-- 有子元素 -->
    <div v-once>
        <h1>comment</h1>
        <p>{{msg}}</p>
    </div>
    <!-- 组件 -->
    <my-component v-once :comment="msg"></my-component>
    <!-- `v-for` 指令-->
    <ul>
        <li v-for="i in list" v-once>{{i}}</li>
    </ul>
</template>

以上内容大部分来自官网！