指令

作者: 小杰的简书 | 来源:发表于2018-11-24 10:47 被阅读0次

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

相关文章

网友评论

      本文标题:指令

      本文链接:https://www.haomeiwen.com/subject/jxmotqtx.html