Vue框架整理：vue.js内置指令

这里写图片描述

vue 基本指令：

v-cloak : 一般被用在网速较慢，Vue还没有加载完成时，不过当Vue创建实例后内容就会被替换掉，并且屏幕会有一点闪动，
使用时最好配合的加一句CSS : [v-cloak]{ display:none;}
这个指令在小项目里有时会用，复杂的大项目会用其他的方法

v-once :主要用于它的元素或组件只能被渲染一次，包括他所有的后代元素，渲染成功后，不会再变化

示例代码：

<body>

<div id="v1">
    <p v-clock>{{ txt1 }}</p>

    <p v-once>{{ txt2 }}</p>

</div>

<script src="vue.min.js"></script>
<script>
    var app=new Vue({
        el:"#v1",
        data:{
            txt1:"基本指令1",
            txt2:"基本指令2"
        }
    })
</script>

这里写图片描述

条件渲染指令：

v-if v-else-if v-else
类似于JS的if 判断，不过写在JS中的代码会直接判断后在渲染，这里会根据我们的需求渲染引号”“中值为true的内容，销毁其他的元素

<div id="v1">

    <p v-if="!a"> a 为 false 显示</p>

    <p v-else-if="a==2"> a 为2 显示</p>

    <p v-else="a">a 为 true 显示</p>

</div>

<script>
    var app=new Vue({
        el:"#v1",
        data:{
            a:true
        }
    })
</script>

v-show :
与v-if 比较类似的用法，不过v-if判断是通过判断决定渲染哪一条，v-show不论条件判断都会渲染元素，只是判断结果为false的通过CSS的display:none 来隐藏


<div id="v1">
    <p v-show="a"> a 为 true 显示</p>
    <p v-show="!a"> a 为 false 显示</p>
</div>

<script>
    var app=new Vue({
        el:"#v1",
        data:{
            a:true
        }
    })
</script>

循环指令：

v-for：
显示的数据需要循环显示时需要用到这个

这里写图片描述

或者也可以用of代替in作为分隔符，另外，v-for也可以放在内置标签 template 上，例如：


<div id="v1">
    <template v-for=" v of val">
        <p>{{v.id}} 、 {{v.name}}</p>
    </template>
</div>

除了数组外，可以遍历对象的属性：



<div id="v1">
    <p v-for="v in val">{{ v }}</p>
</div>

<script src="vue.min.js"></script>

<script>

    var app=new Vue({
        el:"#v1",
        data:{
            val:{
                name:"张三",
                age:"30"
            }
        }
    })
</script>

输出效果：

这里写图片描述

遍历对象的时候可以选填两个参数： key 与 index
(js 部分跟上面一样，这里就不多打一遍了)


<div id="v1">
    <p v-for="( v,key,index) in val">{{index}} - {{ key }} - {{ v }}</p>
</div>

输出效果：
这里写图片描述

这里写图片描述