Vue中常用的五種指令

vue代碼

下面是我學習這五個指令過程中使用的vue代碼僅供參考

 var vm=new Vue({
        el:'#app',//此屬性是vue綁定的標籤id
        data:{//此屬性中定義當前vue中的參數和值
            mess:'123',
            msg:'<h1>我是最大的</h1>',
            mytitle:'這是自己定義的title'

        },
        methods:{//此屬性中定義了當前Vue實例所有可用的方法
            show:function(){
                alert('hello')
            }
        }
    })    

v-cloak

該指令的主要作用是當我們使用插入值的時候，js代碼運行過程中會先讀取插值表達式，然後根據插值表達式的內容查找該值，將查找結果替換掉插值表達式。在這個過程中，如果網速過慢就會先顯示插值表達式，然後顯示我們想要顯示的東西，這就是我們常說的閃爍問題。
v-cloak指令就是用來解決閃爍問題的。
如下圖兩行代碼所示，在p標籤中有一個插值表達式，爲p標籤設置一個v-cloak屬性，然後爲該屬性添加一個display：none樣式讓改p標籤隱藏。然後當插值表達式被替換的時候再顯示替換內容，這樣就解決了閃爍問題。

 <!--v-cloak,解決，插值表達式閃爍問題-->
        [v-cloak]{
            display: none;
        }

  <p v-cloak>{{mess}}</p>

v-text

此指令的主要功能是將vue中的值替換掉標籤中的內容，注意此指令默認是沒有閃爍問題的。此指令和插值表達式不同的地方在於：v-text會覆蓋元素種原本的內容，但是插值表達式只會替換自己的這個佔位符，不會把整個元素的內容清空。

 <p v-cloak>+++++++++{{mess}}-----------</p>
     
 <p v-text="mess">++++++++++++++++++++</p>

v-html

此指令是專門用來讀取html語言的，當我們的字符串爲“

我是最大的

”時，該指令讀取的結果如下所示，而不是一個單純的字符串。

v-bind

v-bind指令的主要功能是綁定屬性，讓屬性的值變爲參數，這樣就可以在vue中定義屬性的值。v-bind:指·令可以簡寫爲：要綁定的屬性，v-bind中，可以寫合法的js表達式。

<input type="button" value="按鈕"  v-bind:title="mytitle">
<input type="button" value="按鈕"  :title="mytitle +'123'" >

v-on

此指令是爲標籤提供事件綁定機制的，可以爲標籤綁定事件；下面的代碼就爲改按鈕綁定了click事件。

<input type="button" value="按鈕"  :title="mytitle +'123'" v-on:click="show ">