v-once
<span v-once>这个将不会改变: {{ msg }}</span>
v-html
<span v-html="rawHtml"></span>
v-bind
<button :disabled="isButtonDisabled">Button</button>
v-if
<p v-if="seen">现在你看到我了</p>
v-show
<h1 `v-show`="ok">Hello!</h1>
注意,v-show 无法用于 <template> 元素,也不能和 v-else 配合使用。
如果需要频繁切换,推荐使用 v-show
v-text
更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>
v-cloak
个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令
可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div v-cloak>
{{ message }}
</div>
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 } 模式添加侦听器
<!-- 停止点击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 方法处理器 -->
<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>
<div v-on:click.self="doThat">...</div>
按键修饰符
<input v-on:keyup.13="submit">
.enter
.tab
.delete (捕获“删除”和“退格”按键)
.esc
.space
.up
.down
.left
.right
还可以[自定义按键修饰符别名](https://vue.docschina.org/v2/api/#keyCodes),通过全局 `config.keyCodes` 对象设置:
Vue.config.keyCodes.f1 = 112
v-on:click
<a @click="doSomething">...</a>
v-on:submit.prevent
<form v-on:submit.prevent="onSubmit">...</form>
v-for
1.还可以在 <template> 标签上使用 v-for,来渲染多个元素块
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
v-model
<input type="radio" id="two" value="Two" v-model="picked">
修饰符
.lazy
.number
.trim
网友评论