指令

v-pre

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

<!-- 显示为 {{ 我不会被编译 }} -->
<span v-pre>{{ 我不会被编译 }}</span>

v-once

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

<ul>
  <li v-for="i in 8" v-once>{{i}}</li>
</ul>

v-html

更新元素的 innerHTML，常用于富文本。

注意

内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译，即不能有

<div v-html='<span>hello</span>'></div>

v-text

更新元素的 textContent。

<div v-text='msg'></div>
<!-- 跟下面的一样 -->
<div>{{msg}}</div>

v-if、v-else-if、v-else

根据表达式的布尔值来创建或销毁元素。如果元素是 <template> ，将提出它的内容作为条件块，渲染之后<template>是不存在的。

当条件变化时该指令触发过渡效果。

注意

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

<div v-if="Math.random() > 0.8">
  Now you are good
</div>
<div v-else-if="Math.random() < 0.3">
  Now you are bad
</div>
<div v-else>
  Now you are sosos
</div>

v-show

根据表达式的布尔值，切换元素的 display CSS 属性。

当条件变化时该指令触发过渡效果。

它与 v-if 的区别有两点：

• 带有v-show指令的元素始终会被渲染并保留在dom中，它只是简单的切换display值而已
• v-show不支持template，v-if则支持

v-bind

用于绑定属性。

缩写：:

修饰符：

• .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。
• .camel - 将-连接的属性名转换为小驼峰命名。（my-name -> myName）
• .sync - 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

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

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

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

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

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

<!-- class 绑定 -->
<!-- 仅有添加class功能 -->
<!-- 这个语法表示red这个class能否添加取决于isRed的布尔值 -->
<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-on

绑定事件。

缩写：@

修饰符：

• .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 } 模式添加侦听器

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

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

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

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

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="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>

v-for

for循环。

注意

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

<!-- 可遍历数字,从1开始 -->
<div v-for="item in 8">{{item}}</div>

<!-- 可遍历字符串 -->
<div v-for="item in 'abcdefg'">{{item}}</div>

<!-- 可遍历对象 -->
<div v-for="(val, key) in obj"></div>

<!-- 可遍历数组 -->
<div v-for="(item, index) in arr"></div>

<!-- 可遍历具有迭代接口的对象 -->
<div v-for="(val, name, index) in obj"></div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

v-model

在表单控件或者组件上创建双向数据绑定，即视图可改变数据，数据可改变视图。

限制：

• <input>
• <select>
• <textarea>
• component

修饰符：

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

<div id="app">
    <input type="text" v-model="content">
    <span>{{ content }}</span>
    
    <textarea v-model="content"></textarea>
    <span>{{ content }}</span>
    
    <input type="checkbox" v-model="checked">
    <span>{{ checked}}</span>
    
    <label for="cat">猫</label>
    <input type="checkbox" v-model="checked" id="cat" value="Cat">
    <label for="dog">狗</label>
    <input type="checkbox" v-model="checked" id="dog" value="Dog">
    <label for="pig">猪</label>
    <input type="checkbox" v-model="checked" id="pig" value="Pig">
    <span>{{ checked }}</span>
    
    <label for="one">one</label>
    <input type="radio" v-model="picked" id="one" value="One">
    <label for="two">two</label>
    <input type="radio" v-model="picked" id="two" value="Two">
    <span>{{ checked }}</span>
    
    <select v-model="selected">
        <option value="" disabled>请选择</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        content: 'aabbcc',
        //checked: 'true',
        checked: [],
        picked: '',
        //selected: '',
        selected: []
    }
})

v-slot

插槽。

缩写：#

<!-- App.vue  -->
<template>
	<div id="app">
        <MyButton>
    		点击按钮
            <template #right>右侧</template>
    	</MyButton>
    </div>
</template>

<script>
import MyButton from './MyButton'
export default {
    components: { MyButton }
}
</script>

<!-- MyButton.vue -->
<template>
	<button>
        <!-- slot标签的name属性默认值为default -->
    	<slot></slot> <!-- 渲染后，该标签会变成点击按钮 -->
        <slot name="right"></slot> <!-- 渲染后，该标签标签会变成右侧 -->
    </button>
</template>

参考资料

• 官方文档 - Vue指令