VUE基本指令v-html、v-text、v-cloak、v-once、v-pro、v-on

阿新 • • 發佈：2020-12-12

技術標籤：VUE vue

1、v-html、v-text、{{}}

上面三種都是渲染文字的方法，使用場景的區別

v-text和{{}}渲染結果類似，都是以文字型別進行渲染

區別：

1、{{}}在渲染結果之前，會有編譯之前的文字顯示，v-text沒有這種現象

2、{{}}更加靈活，中間是可以新增內容的，v-text只能渲染data中的資料，中間不允許插入內容

 <h1 v-text = "a">數值不顯示</h1>
        <h1 >數值是{{a}}---</h1>

3、{{}}和v-text的渲染方式和v-html有本質的不同，v-html會識別模板

<div id="app">
        <p v-text = "a">數值不顯示</p>
        <p >數值是{{a}}---</p>
        <div v-html="b"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                a : 100,
                b : "<h1>v-html</h1>"
            }
        })
    </script>

2、v-cloak

v-cloak指令的作用是Vue示例渲染後關聯結束

{{}}插值語法在遇到網路延遲的時候會顯示編譯之前的文字

可以使用v-cloak結合css解決{{}}渲染難題

<style>
    [v-cloak]{
        display: none;
    }
</style>
<body>
    <div id="app">
        <p v-cloak>{{a}}</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                a : 100
            }
        })
    </script>
</body>

[v-cloak]css選擇器是html結構中有v-cloak的屬性，有這個屬性設定display：none；，又因為v-cloak指令在Vue的例項載入完之後關聯結束，所以就需要這個元素的隱藏狀態，元素就會顯示，這樣造成的結果要麼顯示空白，要麼顯示編譯後的文字

3、v-once

v-once的作用是隻會渲染對應文字一次，資料跟新不會引起檢視更新，目的是為了優化頁面效能

<div id="app">
        <p v-once>{{a}}</p>
        <button @click="add">++</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                a : 100
            },
            methods:{
                add(){
                    this.a++;
                    console.log(this.a)
                }
            }
        })
    </script>

v-once使用場景：沒有動態的元素內容，比如一些文章，固定標題

4、v-pre 跳過編譯的過程直接顯示元素內部的文字，特點是跳過大量的沒有指令的節點

 <p v-pre>{{a}}</p>

瀏覽器顯示的就是沒有編譯之前的文字內容，v-pre屬性的優點，優化頁面的載入效能

5、v-on

v-on的作用是給元素新增監聽事件，可簡寫為@

JavaScript元素的事件監聽都可以在Vue中使用

JavaScript事件監聽和Vue事件監聽
JavaScript	onclick	ondblclick	onmouseenter	onmouseleave	onmousemove	onmouseout	onblur	onfocus	onkeydown
Vue	v-on:click \|\| @click	v-on:dblclick \|\| @dblclick	v-on:mouseenter \|\| @mouseenter	v-on:mouseleave \|\| @mouseleave	v-on:mousemove \|\| @mousemove	v-on:mouseout \|\| @mouseout	v-on:blur \|\| @blur	v-on:focus \|\| @focus	v-on:keydown \|\| @keydown

<div id="app">
        <p >{{a}}</p>
        <button @click="add">++</button>
        <button v-on:click="minus">--</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                a : 100
            },
            methods:{
                add(){
                    this.a++;
                    console.log(this.a)
                },
                minus(){
                    this.a--
                }
            }
        })
    </script>

Vue 方法必須寫在 methods 裡

原生的JavaScript事件方法不能和vue混用

同名方法後面的會覆蓋前面的

methods:{
                add(){
                    this.a++;
                    console.log(this.a)
                },
                add(){
                    this.a +=10
                },
                minus(){
                    this.a--
                }
            }

a每次會加10

方法中是可以傳入引數的

<div id="app">
        <p >{{a}}</p>
        <button @click="add(5)">++</button>
        <button v-on:click="minus(5)">--</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                a : 100
            },
            methods:{
                add(num){
                    this.a += num;
                    console.log(this.a)
                },
               
                minus(num){
                    this.a -= num;
                }
            }
        })
    </script>