Vue.js提供了哪些内置指令,至少写出五个。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js提供了哪些内置指令,至少写出五个。相关的知识,希望对你有一定的参考价值。

参考技术A 5.1 基本指令
5.1.1 v-­cloak一般与display:none进行结合使用
作用:解决初始化慢导致页面闪动的最佳实践
5.1.2 v­-once
定义它的元素和组件只渲染一次
5.2 条件渲染指令
5.2.1 v­-if, v-­eles-­if ,v­-else
用法: 必须跟着屁股走
v-if后面的等号必须是布尔值
v-if的弊端 :
Vue 在渲染元素时 ,出于效率考虑,会尽可能地复用已有的元素而非重新渲染, 因此会出现乌龙
只会渲染变化的元素,也就是说,input元素被复用了

Vue.js实战 章五:内置指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="https://vuejs.org/js/vue.js"></script> -->
    <script src="Vue.2.6.10.js"></script>
</head>
<style>
    [v-cloak]{
        display: none;
    }
</style>
<body>
    <div id="app1" v-cloak>
        {{ message }}
    </div>

    <div id="app2">
        <input type="text" v-model=‘message‘>
        <span> {{ message }} </span>
        <span v-once> {{ message }} </span>
    </div>
    <br>
    <div id="app3">
        <input type="text" v-model=‘message‘ v-model=‘odevity‘>
        <p v-if = "message == 1"></p>
        <p v-else-if = "message == 2"></p>
        <p v-else>其他</p>
        <template v-if = "odevity == ‘大于100‘">
            <p>大于100</p>
            <p>是真的,真的大于100</p>
            <!-- 一次判断多个元素时这样安排 -->
        </template>
    </div>

    <div  id="app4">
        <template v-if = "type === ‘name‘">
            <label>用户名</label>
            <input type="text" placeholder="用户名">
        </template>
        <template v-else >
            <label>密码</label>
            <input type="text" placeholder="密码">
        </template>
        <button @click = "toggleType">切换输入类型</button>
    </div>

    <div id="app5">
        <p v-show=‘show == true‘>为true时显示改行</p>
        <button @click = "toggleShow">切换显示状态</button>
    </div>

    <!-- 列表渲染指令 -->
    <div id="app6">
        <!-- 遍历数组 -->
        <ul>
            <template v-for = "(book,index) in books">
                <li>{{ index+1 }} - {{ book.name }},{{ book.author }}</li>
                <!-- <span v-for = ‘value in author‘>{{ value }}</span>  如果写在这里,相当于遍历中嵌了一个遍历-->
            </template>
            <br>
            <!-- 遍历对象 -->
            <li v-for = ‘(value,key,index) in author‘>{{ index }} - {{ key }}:{{ value }}</li>
        </ul>
    </div>

    <div id="app7">
        <!-- 数组更新及方法 -->
    </div>






    <div id="app8">
        <!-- 方法与事件 -->
        点击次数:{{ counter }}
        <button @click = "counter++">+1</button>
        <button @click = "add">+1</button>
        <button @click = "add(10)">+10</button>
    </div>

    <div id="app9">
        <a href="https://www.4399.com" @click = "handleClick(‘禁止打开哈‘,$event)">无法被打开的链接</a>
    </div>


    <div id="app10">
        <!-- 使用修饰符简化操作 -->
        <a href="#" @click.stop = "handle">阻止单击事件冒泡</a>
        <form action="#" @submit.prevent = "handle">提交事件不再重载页面</form>
        <form action="#" @submit.prevent>提交事件不再重载页面(仅有修饰符而无回调函数)</form>
        <a href="#" @click.stop.prevent = "handle">串联修饰符</a>
        <a href="#" @click.capture = "handle">添加事件侦听器时,使用事件捕获模式</a>
        <a href="#" @click.self = "handle">只当事件在元素本身触发时触发</a>
        <a href="#" @click.once = "handle">只触发一次</a>
    </div>
</body>
<script>
    // console.log(new Vue());
    //v-cloak 无需表达式 会在Vue实例结束编译后从绑定的html元素上移除,常和display:none结合使用
    var app1 = new Vue({
       el:"#app1",
       data:{
           message:这是一段文本~//防止在网速较慢是页面上会出现{{ message }}的字样
       } 
    });//解决初始化慢导致页面闪动

    var app2 = new Vue({
       el:"#app2",
       data:{
           message:test//v-once 定义它的元素/组件只渲染一次  以后将视为静态内容
       } 
    });

    var app3 = new Vue({
        el:"#app3",
        data:{
            message:‘‘,
        },
        computed: {
            odevity:function(){
                if(this.message > 100){
                    return "大于100";
                }else{
                    return "小于100";
                };
            },

        },
    });

    var app4 = new Vue({
       el:"#app4",
       data:{
           type:name
       },
       methods: {
           toggleType:function(){
               this.type = this.type === name ? mail:name;
           }
       },
       //虽然DOM改变了,但是之前键入的内容并没有改变,<input>元素被复用了
       //不想这样做?在不希望被复用的<input>元素中添加key属性 key的值必须是唯一的
    });
    
    var app5 = new Vue({
       el:"#app5",
       data:{
           show:true
       },
       methods:{
           toggleShow:function(){
            //    console.log(show,this.show);//未定义的show
               console.log(this.show);//
               show = !this.show;//错误的写法,会重新定义一个收未变量
               console.log(show,this.show);
               
               this.show = !this.show;
               console.log(this.show);
           }
       }
    });

    var app6 = new Vue({
       el:"#app6",
       data:{
           books:[
               {name:book1,author:1},
               {name:book2,author:2},
               {name:book3,author:3},
               {name:book4,author:4},
               {name:book5,author:5}
           ],
           author:{
               name:Harold,
               gender:,
               age:20
           }
       } 
    });

    var app7 = new Vue({
        
    });

    var app8 = new Vue({
       el:"#app8",
       data:{
           counter:0
       },
       methods:{
           add:function(count){
               count = count || 1;
               this.counter += count;
               console.log(count);
               //(不带括号打印count)MouseEvent {isTrusted: true, screenX: 211, screenY: 612, clientX: 152, clientY: 456, …}
            //    10
            //如果以不带()的形式供@click调用,且后该方法有参数,则会默认将原生时间对象event传入 即第二个按钮不会+1
           }
       }
    });

    var app9 = new Vue({
      el:"#app9",
      data:{

      },
      methods: {
          handleClick:function(message,event){
            alert(message);
            event.preventDefault();
          }
      },
    });

    
</script>
</html>

 

以上是关于Vue.js提供了哪些内置指令,至少写出五个。的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js的常用指令

Vuevue.js常用指令

Vue.js学习 Item13 – 指令系统与自定义指令

jsp有哪些内置对象?作用分别是什么?(至少三个)

Vue CLI内网安装(禁止运行vue指令解决方案)

Vue指令实现列表无限下拉刷新