Vue.js中内置指令

232 阅读1分钟

v-cloak 作用:解决初始化慢导致页面,闪动的最佳实践

v-cloak一般和display结合使用

<div v-cloak></div>

<style>
    [v-cloak]{
        display: none;
    }
</style>

v-once: 定义它的元素和组件只渲染一次

 <p v-once>{{name}}</p>
 
 app1.name = 'hi' // 只渲染一次 
 
 const app1 = new Vue({
     el:'#app',
     data:{
         name: 'hello'
     }
 })

v-if v-else-if v-else

v-if的弊端 :vue在渲染时候,元素呢,出于考虑会尽可能的复用已有的元素而非重新渲染,因此会出现乌龙,

解决办法:加 key 表示唯一的,提供k值,可以来否定是否复用该元素

<input type="text" v-if="type===name" key="name">

v-show:显示与否取决于布尔值

<div v-show="a >1"> a 为true则显示 a <1 为 false 则不显示</div>

v-if和v-show的比较

v-if:实时渲染页面显示就渲染,不显示则就移除

v-show: v-show的元素永远存在页面中,只是改变了css的display 的属性

v-for的用法:

v-for一定要写在需要便利的元素上, v-for 后接 v-for="新的,原有的属性"

<div v-for="item in items">
{{item.name}}
</div>

new Vue({
    el:"#app",
    data:{
        items:{
            name:'lei',
            age:18
        }
    }
}}

// item 对应的是Items复制过来的新值
// items 对应的是data上原有的items的值

v-for带有索引下标的用法

<div v-for="(item,index) in items>
    item对应的是 items的值
    index 是 items的值的下标
</div>


new Vue({
    el:'#app',
    data:{
        items:[
            {name:'a'},
            {name:'b'}
        ]
    }
})

v-for 拿到 value,key,index 写法

<div v-for="(value,key,index) in items">
    value 对应的是值
    key 对应的是健
    index 对应的是下标
</div>