Vue的指令

1、v-cloak :他会在Vue实例借宿编译时从绑定的HTML元素上移除，经常和display：none结合使用

例子：

<style>
    [v-cloak]{
        display:none;
    }
</style>
<div id="app" v-cloak>
    {{message}}
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"这是一段文字"
        }
    })
</script>

作用：

当网速慢的时候，Vue.js 文件还没有加载完全,页面就会显示{{message}},直到加载完全才会替换，这个过程屏幕会闪动，加上v-cloak和display:none,就可以解决了。

2、v-once:所在的元素及内容只被渲染一次，首次渲染后，不会因为数据变化而渲染，被视为静态内容。

3、Vue出于效率考虑，会尽可能的复用已有的元素而非重新渲染。也就是切换内容，但是标签不变，如果要也替换标签，就需要使用key属性，key属性必须是唯一的。

4、v-if 和v-show 基本一致，区别：v-if是真正的根据条件重新渲染，而v-show只是变换display的属性none ，block,

v-if适用于不经常变化的，v-show适用于经常变换的条件的。注意：v-show不能在<template>上使用

5.v-for,循环遍历,对象和数组都可以循环遍历

<ul>
    <li v-for="book in books">{{book.name}}</li>
</ul>

<ul>
    <li v-for="book of books">{{book.name}}</li>
</ul>

<ul>
    <li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
</ul>

<ul>
    <li v-for="(book,key,index) in books">{{index}}-{{book.name}}</li>
</ul>

<ul> <template v-for="book in books"> <li>{{book.name}}</li> <li>{{book.author}}</li> </template> </ul>

5 v-bind 一般用于

<a :href="url">   
<img :src="imgSrc"/>
对象语法：true,false
1.<div :class="{'active':isActive}"></div>  //active
2.<div :class="{'active':isActive,'error':isError}"></div>  //active
3.<div class="static" :class="{'active':isActive,'error':isError}"></div>   //   static active
数组语法：
4.<div :class="[activeCls,errorCls]"></div>   //active error
5.<div :class="[{'active':isActive},errorCls]"></div>   //active error
6.<div :class="[isActive?activeCls:'',errorCls]"></div>   //active error
在组件上使用
<my-component :class="[activeCls,errorCls]"></my-component>

内联样式：
<div :style="{'color':color,"fontSize":fontSize+'px'}"></div>

猜你喜欢