指令

作者: 小杰的简书 | 来源:发表于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