vue内部指令03

1.v-cloak 指令

• 作用： 在Vue还没有解析完毕之前 把一些标签隐藏起来

css:
	[v-cloak]{
        display: none;
    }
html:
	<div id="app">
        <img v-cloak src="../imgs/诸葛亮.jpg" alt="">
        <h2 v-cloak>{{info}}</h2>
    </div>
js:
   var app = new Vue({
        el:'#app',
        data:{
            info:'我是一个好孩子'
        },
    })

2.v-once 指令

• 作用：只解析一次 后续即便数据发生改变 页面也不会更新

html:
	<div id="app">
        <h2 @click="changeInfo" v-once>{{info}}</h2>
        <p>{{info}}</p>
    </div>
js:
	var app = new Vue({
        el:'#app',
        data:{
            info:'今天天气好晴朗，处处好风光'
        },
        methods:{
            changeInfo(){
                this.info="青青河边草"
            }
        }
    })

3.v-pre 指令

• 作用：让加了v-pre的元素 被vue忽略 不进行解析 当前标签以及他的后代子元素（使用频率极低）

html:
	<div id="app">
        <div v-pre>
            <h2>使用v-pre包裹的</h2>
            <h2>{{info}}</h2>
            <p>{{info}}</p>
        </div>

        <div>
            <h2>没有使用v-pre包裹的</h2>
            <h2 @click="changeInfo">{{info}}</h2>
            <p>{{info}}</p>
        </div>
       
        <!-- <div class="note">
            <p v-pre>v-text的简写形式用法 : {{data里面的数据}}</p>
        </div> -->
    </div>
js:
	 const app = new Vue({
        el : "#app",
        data : {
            info : "今天天气好晴朗, 处处好风光"
        },

        methods: {
            changeInfo() {
                this.info="青青河边草"
            }
        },
    })