vue.js实战学习——内置指令

Posted 2020-10-19 sxdct

注：此内容摘抄自：梁灏的《Vue.js实战》

注：记得要引入vue.js才能运行哦，文章中贴出的代码直接复制是不行的，html css js 都放在了一起，而且也没有引用vue.js。

 

1.v-cloak

v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display：none； 配合使用。

<div class="app1" v-cloak>
    {{message}}
</div>
var app1=new Vue({
    el:‘.app1‘,
    data:{
              message:‘这是一段文本‘
    }
});

这时虽然加了v-cloak，但其实并没有起到任何作用，当网速较慢，Vue.js文件还没有加载完时，在页面上会显示{{message}}的字样，直到Vue创建实例、编译模版时，DOM才会被替换，所以这个过程屏幕是有闪动的。只要加一句CSS就可以解决这个问题了：

[v-cloak]{
    display: none;
}        

一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但在具有工程化的项目里，项目的HTML结构只有一个空的div元素，生于的内容都是由路由去挂在不同的组件完成的，所以不需要v-cloak。

2.v-once

v-once也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。再次渲染后，不再随数据的变化重新渲染，将被视为静态内容。

<div class="app2">
    <span v-once>{{message}}</span>
    <div v-once>
        <span>{{message}}</span>
    </div>
</div>

var app2=new Vue({
    el:‘.app2‘,
    data:{
        message:‘这是一段文本‘
    }
});

v-once在业务中也很少用，当你需要进一步优化性能时，可能会用到。

3.v-if 、v-else-if 、v-else

与javascript的条件语句if、else、else if 类似，Vue.js 的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件

<div class="app3">
    <p v-if="status===1">当status为1时显示该行</p>
    <p v-else-if="status===2">当status为2时显示该行</p>
    <p v-else>否则显示该行</p>
</div>

var app3=new Vue({
    el:‘.app3‘,
    data:{
        status:1
    }
});

 

如果一次判断的是多个元素，可以在Vue.js内置的<template>元素上使用条件指令，最终渲染的结果不会包含该元素。

<div class="app4">
    <template v-if="status===1">
        <p>这是一段文本哦</p>
        <p>这是一段文本哦</p>
        <p>这是一段文本哦</p>
    </template>
</div>

var app4=new Vue({
    el:‘.app4‘,
    data:{
        status:1
    }
});

 

Vue在渲染元素时，处于效率考虑，会尽可能的复用已有的元素而非重新渲染：

<div class="app5">
    <template v-if="type===‘name‘">
        <label for="">用户名：</label>
        <input type="" name="" id="" value="" placeholder="输入用户名" />
    </template>
    <template v-else>
        <label for="">邮箱：</label>
        <input type="" name="" id="" value="" placeholder="输入邮箱"  />
    </template>
    <button @click="handleToggleClick">切换输入类型</button>
</div>

var app5=new Vue({
    el:‘.app5‘,
    data:{
        type:‘name‘
    },
    methods:{
        handleToggleClick:function(){
            this.type=this.type===‘name‘?‘mail‘:‘name‘;
        }
    }
});

键入内容，点击切换，虽然DOM变了，但是之前在输入框键入的内容并没有改变，只是替换了placeholder的内容，说明<input> 元素被复用了。

如果你不想这样，可以使用Vue.js提供的key属性，它可以让你自己决定是否要复用元素，key的值必须是唯一的。

<input type="" name="" id="" value="" placeholder="输入用户名" key="name-input" />
<input type="" name="" id="" value="" placeholder="输入邮箱" key="mail-input" />

给两个<input>元素都增加key后，就不会复用了，切换类型时键入的内容也会被删除，不过<label>元素仍然是被复用的，因为没有添加key属性。

 

4.v-show

v-show的用法与v-if基本一致，是不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式display：none；

<div class="app6">
    <p v-show="status===1">当status为1时显示该行</p>
</div>

var app6=new Vue({
    el:‘.app6‘,
    data:{
        status:1
    }
});

注意：v-show不能在<template>上使用。

v-if和v-show具有类似的功能，不过v-if才是真正的条件渲染，它会根据表达式适当的销毁或重建元素及绑定的事件或子组件。若表达式初始值为false，则一开始元素/组件并不会渲染，只有当条件第一次变为真时才开始编译。

而v-show只是简单的CSS属性切换，无论条件真与否，都会被编译。相比之下，v-if更适合条件不经常改变的场景，因为他切换开销相对较大，而v-show适用于频繁切换条件。