Vue内置指令大盘点

165 阅读2分钟

小知识,大挑战!本文正在参与“   程序员必备小知识   ”创作活动

作者的其他平台:

| CSDN:blog.csdn.net/qq_4115394…

| 掘金:juejin.cn/user/651387…

| 知乎:www.zhihu.com/people/1024…

| GitHub:github.com/JiangXia-10…

| 公众号:1024笔记

本文大概7686字,读完共需10分钟

1 前言

指令是Vue模板中最常用的一项功能,它带有前缀v-,主要职责是当其表达式的值改变时,相应的将某些行为应用在 DOM 上。

这篇文章主要介绍了vue一些内置的指令。

2 正文

直接上实例代码,具体的解释都注释在代码种,代码最好也会同步至github,需要的可以下载:

<template>
    <!-- vue内置指令学习 -->
    <div id="demo5">
        <!-- v-html、v-text、{{}}
        v-html用法:更新元素的 innerHTML 
        用法和v-text 相似 但是它可以将HTML片段填充到标签中可能有安全问题, 一般只在可信任内容上使用 v-html,永不用在用户提交的内容上
        它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
        v-text:更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。
        用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题 (如果数据中有HTML标签会将html标签一并输出 )
        注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值 -->
        <h1>v-html、v-text指令以及{{}}数据绑定</h1>
        <div id="div0" v-html="riqi"></div>
        <div id="div00">{{riqi}}</div>
        <div id="div000" v-text="riqi"></div>
        <br>
        <div id="div1" v-html="'现在是'+year+'年'+month+'月'"></div>
        <div id="div11" v-text="'现在是'+year+'年'+month+'月'">
        </div>
        <div id="div111">现在是{{year}}年{{month}}月</div>
        <br>
        <!-- v-show的用法:v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏。-->
        <h1>v-show指令</h1>
        <div id="div2" v-show="type=='晴天'">今天是晴天</div>
        <div id="div22" v-show="type1!='晴天'">今天不是晴天</div>
        <div id="div222" v-show="type=='阴天'">今天是阴天</div>
        <div id="div2222" v-show="yes">今天是晴天</div>
        <div id="div22222" v-show="no">今天是阴天</div>
        <br>
         <!-- v-if的用法 -->
         <!-- 类型:any
        用法:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ,将提出它的内容作为条件块。
        v-show 指令的功能与 v-if 指令相似。不过 v-if 指令会根据表达式重建或销毁元素或组件以及它们所绑定的事件。v-show 指令只是简单地设置 css 属性。
        因为 v-if 指令开销较大,所以更适合条件不经常改变的场景。而 v-show 指令适合条件频繁切换的场景。-->
        <h1>v-if 组合指令</h1>
        <div id="div3" v-if='yes'>yes</div>
        <div id='div33' v-if='no'>no</div>
        <div id='div333' v-show='no'>no</div>
        <div id='div3333' v-show='yes'>yes</div>
        <br>
         <!-- v-else的用法 -->
        <div id="div4" v-if="0>1">这是不可能的</div>
        <div id="div44" v-else>0肯定小于1</div>
        <!-- v-else-if 指令 与前面两个配合使用-->
        <br>
        <div id="div5" v-if="0==1">0等于1</div>
        <div id="div55" v-else-if="0<1">0小于1</div>
        <div id="div555" v-else>0大于1</div>
        <!-- v-for指令 -->
        <!-- 类型:Array | Object | number | string
        用法:基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名:-->
        <div id="div6">
            <h1>v-for指令</h1>
            <h3>桃园三结义</h3>
            <li v-for="vlaue in array">{{vlaue}}</li>
        </div>
        <br>
        <!-- v-on指令 -->
        <!-- 类型:Function | Inline Statement
        参数:event (required)
        修饰符:
        .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 } 模式添加侦听器
        用法:
        绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
        用在普通元素上时,只能监听 原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
        在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event **属性:**v-on:click="handle('ok', $event)"。-->
        <!-- 方法处理器 -->
        <!-- <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> -->
        <!-- 在子组件上监听自定义事件(当子组件触发 “my-event” 时将调用事件处理器):-->
        <!-- <my-component @my-event="handleThis"></my-component> -->
        <!-- 内联语句 -->
        <!-- <my-component @my-event="handleThis(123, $event)"></my-component> -->
        <!-- 组件中的原生事件 -->
        <!-- <my-component @click.native="onClick"></my-component> -->
        <div id="div7">
            <h1>v-on指令</h1>
            <!-- 以下两个按钮都能弹出1 -->
            <input type="button" value="按钮1-没有v-on" onclick="alert(1)"/>
            <input type="button" value='按钮2v-on' v-on:click='show()'/>
            <input type="button" value="按钮3" @click="show()"/>
            <!-- 事件对象 -->
            <input type="button" value="按钮4" @click="show1($event)"/>
            <input type="button" value="按钮5" @click="show1($event,12)"/>
            <!-- 事件冒泡 -->
            <br>
            <div @click="show4()">
                <input type="button" value="按钮6" @click="show3($event)"/>
                <input type="button" value="按钮7" @click.stop="show4()"/>
            </div>
             <!-- 默认行为 -->
             <!-- contextmenu 右键弹出行为 -->
            <div id="div9"> 
                <input type="button" value="按钮8" @contextmenu="show5($event)"/>
                <input type="button" value="按钮9" @contextmenu.prevent="show5()"/>
            </div>
        </div>
        <br>
        <div id="div77">
            <h1>鼠标点击事件</h1>
            <div id="div777"><span style="display:inline-block">{{number}}</span></div>
            <div id="div7777">
                <!-- 点击事件 -->
                <input type="button" value="按钮1click" v-on:click='add()' />
                <!-- onmouseover 事件会在鼠标指针移动到指定的元素上时发生。-->
                <input type="button" value="按钮2mouseover" v-on:mouseover='add()' />
                <!-- 鼠标离开触发事件 -->
                <input type="button" value="按钮3mouseout" v-on:mouseout='add()' />
                <!-- 鼠标按下事件 -->
                <input type="button" value="按钮4mousedown" v-on:mousedown='add()' />
                <!-- 鼠标抬起事件 -->
                <input type="button" value="按钮5mouseup" v-on:mouseup='add()' />
                <!-- 鼠标双击事件 -->
                <input type="button" value="按钮6dblclick" v-on:dblclick='add()' />
            </div>            
        </div>

        <!-- 键盘事件 -->
        <div id="keyboard">
             <h1>键盘事件</h1> 
            <input type="text" value="按钮" @keyup.13="showkeyboard()"/>
            <input type="text" value="按钮" @keyup.enter="showkeyboard()"/>
            <input type="text" value="按钮" @keyup.up="showkeyboard()"/>
            <input type="text" value="按钮" @keyup.down="showkeyboard()"/>
            <input type="text" value="按钮" @keyup.left="showkeyboard()"/>
            <input type="text" value="按钮" @keyup.right="showkeyboard()"/>
        </div>
        <br>
        <!-- v-bind指令 -->
        <!-- 类型:any (with argument) | Object (without argument)
        参数:attrOrProp (optional)
        修饰符:
        .prop - 被用于绑定 DOM 属性。(what’s the difference?)
        .camel - (2.1.0+) transform the kebab-case attribute name into camelCase. (supported since 2.1.0)
        .sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。
        用法:
        动态地绑定一个或多个特性,或一个组件 prop 到表达式。
        在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。
        在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
        没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。-->
        <div id="binddiv">
            <h1>v-bind指令</h1>
            <a href="#" v-bind:href="url">我的博客地址</a>
        </div>
        <br>
        <!-- v-model指令 -->
        <!-- 数据类型:随表单控件类型不同而不同。
        修饰符:
        .lazy - 取代 input 监听 change 事件
        .number - 输入字符串转为数字
        .trim - 输入首尾空格过滤
        用法:
        v-model指令用来在input、select、text、checkbox、radio等表单控件或者组件上创建双向绑定。
        可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。
        v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。
        对于要求 IME (如中文、 日语、 韩语等) 的语言,会发现那v-model不会在 ime 构成中得到更新。如果也想实现更新,请使用 input事件。-->

        <div id="model">
            <h1>v-model指令</h1>
            <!-- 修改input输入框的值,同时p标签的变量的值也会同时发生改变 -->
            <input v-model="model" placeholder="v-model"/>
            <p>{{model}}</p>
        </div>
        <br>
        <!-- v-pre指令 -->
        <!-- v-pre指令用法:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。-->
        <div id="prediv">
            <h1>prediv指令:</h1>
            <!-- 第一个span里的内容不会被编译,显示为{{model}},第二个span里的内容会被编译,显示为今天是个好日子 -->
            <span v-pre>{{model}}</span>
            <br>
            <span>{{model}}</span>
        </div>
        <br>
        <!-- v-cloak指令 -->
        <!-- v-cloak指令用法:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕,否则在渲染页面时,有可能用户会先看到Mustache标签,然后看到编译后的数据。-->
        <div id="cloak">
            <h1>v-cloak指令:</h1>
            <!-- 下面两个span都会显示今天是个好日子 -->
            <span>{{model}}</span>
            <br>
            <span v-cloak>{{model}}</span>
        </div>
        <br>
        <!-- v-once指令 -->
        <!-- v-once指令用法:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。-->
        <div id="oncediv">
            <h1>v-once指令:</h1>
            <!-- 单个元素 -->
            <span v-once>{{model}}</span>
            <!-- 有子元素 -->
            <div v-once>
              <p>{{model}}</p>
            </div>
        </div>
    </div>    
</template>

<script>
    export default{
        name:"Demo5",
        data(){
            return {
                year:new Date().getFullYear(),
                month:new Date().getMonth()+1,
                riqi:'<h3>日期显示</h3>',
                type:'晴天',
                type1:'阴天',
                yes:'true',
                no:'false',
                array:['刘备','关羽','张飞'],
                number:0,
                url:'https://blog.csdn.net/qq_41153943',
                model:'今天是个好日子'
            }
        },
        methods: {
            show:function(){
                alert("1")
            },
            add:function(){//方法
                this.number+=1
            },
            show1:function(ev,b){
                alert(ev.clientX);
                alert(b)
            },
            show3:function(ev){
                alert(3);
                //阻止事件冒泡
                ev.cancelBubble=true;
            },
            show4:function(){
                alert(4)
            },
            show5:function(ev){
                alert(5);
                //阻止默认行为
                ev.preventDefault();
            },
            showkeyboard:function(){
                alert("按了键盘")
            },
        },
    }
</script>

图片

图片图片

3 总结

以上就是vue中内置指令的实例代码以及解释说明,代码最后会同步至github,需要的可以下载。

相关推荐: