Javascript - Vue - 指令

時間 2019-11-18

原文原文鏈接

指令

v-cloak 無閃爍javascript

解決閃爍，閃爍是指在網速較慢的狀況下可能會出現插值表達式{{}}尚未填充數據時會把該表達式直接顯示在頁面上，若是不但願看到插值表達式則可使用v-cloak指令，具體作法以下html

v-text 插值vue

無閃爍問題，也即不須要使用插值表達式，它會在加載完成後自動插入純文本的數據，與v-cloak的區別在於v-text無閃爍且會替換元素內包含的全部內容，而v-cloak只替換插值表達式內額內容，插值表達式先後若是有內容，這些內容不會被替換。若是你不須要在插入的數據先後放其它靜態的內容，那麼使用v-text比較方便，不然使用v-cloak。java

v-html 插值node

無閃爍問題，也即不須要使用插值表達式，它會在加載完成後自動插入html數據，v-text只能插入文本，若是放入html則會當成文本插入，v-html能夠渲染htmlchrome

v-bind 屬性值綁定express

專門向html元素的屬性插入數據。
數組

<div id="app" v-cloak>
    <button v-bind:title="msg">你好</button> //鼠標放上去會顯示hello，該指令也能夠簡寫爲一個冒號便可，如:title="msg"
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        }
    });
</script>

v-bind：篩選屬性值瀏覽器

能夠在[]括號裏寫三元運算符來篩選屬性值，也能夠在[]括號裏直接使用{}括號，在{}裏寫屬性名:屬性值來篩選屬性值app

div {
    height: 10px;
}

.bg1 {
    background: black;
}

.bg2 {
    background: red;
}
<div id="box">
    <div :class="['bg1',flag?'bg2':'' ]"></div>//用三元運算符篩選類名
    <div :class="['bg1',{bg2:flag} ]"></div> //用三元三元運算符篩選類名簡寫
    <div :class="{bg1:false,bg2:flag}"></div>//用匿名對象篩選類名
    <div :class="classArray"></div>//用匿名對象篩選類名
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#box",
        data: {
            flag: true,
            classArray: { bg1: true, bg2: false }
        }
    });
</script>

設置內聯樣式

<body>
<div id="box">
    <div :style="{'font-size':'80px',color:'red','font-style':'italic'}">hello</div>
    <div :style="[style1,style2]">world</div>
</div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#box",
        data: {
            style1: { 'font-size': '80px', color: 'red' },
            style2:{'font-style':'italic'}
        }
    });
</script>

v-if、v-else 條件判斷

根據布爾值來選擇是否執行使用了v-if的html元素，好比能夠利用v-if實現根據布爾值切換顯示或隱藏html元素，隱藏時是直接移除該元素，顯示時會從新渲染該元素。能夠利用v-if來實現tab項，根據按鈕的主題來切換顯示某個區域，但只能切換兩個tab項，沒法實現兩個以上tab項的切換。

<div id="box">
<div v-if="flag">寒</div> flag爲false，則執行v-else
<div v-else="flag">食</div>
</div>

v-for 循環

循環,使用v-for的html元素會根據計數器或對象的屬性個數、數組的元素個數自動輸出N個html元素

<div id="box">
   <p v-for="i in 10">循環第{{i}}次</p> //循環數字輸出10個p標籤
   <p v-for="(item,index) in list">循環索引：{{index}}，元素：{{item}}</p> //遍歷數組輸出數組元素總個數的p標籤
    <p v-for="(obj,index) in objList">循環索引：{{index}}，編號：{{obj.id}}，名字:{{obj.name}}</p>//遍歷數組裏的對象輸出數組裏的對象總個數的p標籤
    <p v-for="(keyVal,key,index) in obj">循環索引：{{index}}，鍵：{{key}}，值：{{keyVal}}</p>//遍歷對象屬性輸出對象的屬性總個數的p標籤
</div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#box",
        data: {
            list: [1, 2, 3, 4, 5],
            objList: [
                { id: 1, name: "sam" },
                { id: 2, name: "leo" },
                { id: 3, name: "korn" },
            ],
            obj:{
                id:1,
                name:"tim",
                age:20
            }
        }
    });
</script>

循環時的注意

當你向一個複選組添加新項時會遇到下面的狀況，假設你選中的項是索引0，此時你再往復選組添加新項後，選中的項雖然仍是索引0，但由於添加的新項顯示在複選組元素的最前面，這直接致使添加後多出一個複選框，因此索引爲0的位置的選中項變成了新添加的項。

<div id="box">
    <input type="text" v-model="name" />
    <button v-on:click="add">add</button>
    <p v-for="item in objList">
        <input type="checkbox" :id="item.id" />{{item.name}}
    </p>
</div>
    var vm = new Vue({
        el: "#box",
        data: {
            name:"",
            objList: [
                { id: 1, name: "sam" },
                { id: 2, name: "leo" },
                { id: 3, name: "korn" },
            ]
        },
        methods: {
            add: function () {
                this.objList.unshift({ id: this.objList.length + 1, name: this.name });
            }
        }
    });

解決辦法是指定須要循環的html元素的key，由於html只記錄你選中項的索引，使用key能夠改變記錄目標爲對象的id，以下：

v-show 顯示或隱藏

根據布爾值切換顯示或隱藏，隱藏時是設置該元素的diaplay:none，顯示時切換該元素的diaplay。性能消耗<v-if。

<div id="box">
<button @click="flag=!flag">hideOrVisible</button>
<p v-show="flag">hello world</p>
</div>

var vm = new Vue({
     el: "#box",
     data: {
         flag:true
     }
});

v-model 數據雙向綁定

這個指令能夠將數據綁定到輸入類的html元素上，它能夠將用戶輸入的數據存入v-model指定的變量中，這個指令會一直監視輸入框值的變化，一旦變化發生，就會當即在vue對象內部進行數據同步

<div class="box">
   <h4>{{msg}}</h4>
    <input type="text" v-model="msg" />
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: ".box",
        data: {
            msg:"天下之大無奇不有"
        }
    });
</script>

v-on 事件

在vue中註冊事件用v-on指令，v-on:可簡化爲@，dom元素的事件均可以使用這種格式，好比v-on:change或@change

click事件

<div id="app" v-on:click="show">
    {{msg}}
</div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        methods: {
            show: function () {
                alert("hello");
            }
        }
    });
</script>

change事件

var vm = new Vue({
    el: ".box",
    data: {
      v:0
    }
    methods: {
        select: function () {
            alert(this.v); //選中的值
        }
    }
});

一個跑馬燈的效果

<div id="app">
    <p>{{msg}}</p>
    <button v-on:click="start">start</button>
    <button v-on:click="end">end</button>
</div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "天下之大無奇不有"
        },
        methods: {
            start: function () {
               var self = this;
               this.interval= setInterval(function () {
                    var s = self.msg.substring(0, 1);
                    var e = self.msg.substring(1);
                    self.msg = e + s;
                }, 400);
            },
            end: function () {
                clearInterval(this.interval);
            }
        }
    });

以上代碼在連續點擊屢次start後，點end就不能中止這個延時調用，由於內存中有了N個setInterval函數的執行。解決辦法是判斷setInterval的變量是否爲null，只有爲null時才執行，不然不執行。

事件修飾符（詞綴）

事件修飾符的做用是對事件進行限制、修改事件的執行機制等

阻止當前事件向上冒泡 stop（vue事件的觸發方式默認是事件冒泡）

阻止默認動做prevent（超連接、表單提交）

<a id="link" href="#" @:click.prevent="show1">click</a>

開啓事件圍捕capture（須要將指令寫在祖先元素上）

阻止冒泡與捕獲self

self表示不接受捕獲或冒泡

<div class="grandfather">
    <div class="father" v-on:click.self="show2"> //只有點擊我時纔會觸發事件，其它由冒泡或捕獲的觸發機制都不會觸發個人事件
        <button v-on:click="show1">OK</button>
    </div>
</div>

事件只觸發一次once

鍵盤事件keydown | keyup

<input type="text" class="form-control" v-model="obj.name" @keyup.enter="add"/> enter鍵擡起時觸發

vue支持的按鍵別名只有如下幾個，若是沒有須要的按鍵，能夠參考下面的鍵盤按鍵碼

enter

tab

delete

esc

space

down

left

right

//js 裏面的鍵盤事件常常用到，因此收集了鍵盤事件對應的鍵碼來分享下：
keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
keyCode 32 = space
keyCode 33 = Prior
keyCode 34 = Next
keyCode 35 = End
keyCode 36 = Home
keyCode 37 = Left
keyCode 38 = Up
keyCode 39 = Right
keyCode 40 = Down
keyCode 41 = Select
keyCode 42 = Print
keyCode 43 = Execute
keyCode 45 = Insert
keyCode 46 = Delete
keyCode 47 = Help
keyCode 48 = 0 equal braceright
keyCode 49 = 1 exclam onesuperior
keyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3 section threesuperior
keyCode 52 = 4 dollar
keyCode 53 = 5 percent
keyCode 54 = 6 ampersand
keyCode 55 = 7 slash braceleft
keyCode 56 = 8 parenleft bracketleft
keyCode 57 = 9 parenright bracketright
keyCode 65 = a A
keyCode 66 = b B
keyCode 67 = c C
keyCode 68 = d D
keyCode 69 = e E EuroSign
keyCode 70 = f F
keyCode 71 = g G
keyCode 72 = h H
keyCode 73 = i I
keyCode 74 = j J
keyCode 75 = k K
keyCode 76 = l L
keyCode 77 = m M mu
keyCode 78 = n N
keyCode 79 = o O
keyCode 80 = p P
keyCode 81 = q Q at
keyCode 82 = r R
keyCode 83 = s S
keyCode 84 = t T
keyCode 85 = u U
keyCode 86 = v V
keyCode 87 = w W
keyCode 88 = x X
keyCode 89 = y Y
keyCode 90 = z Z
keyCode 96 = KP_0 KP_0
keyCode 97 = KP_1 KP_1
keyCode 98 = KP_2 KP_2
keyCode 99 = KP_3 KP_3
keyCode 100 = KP_4 KP_4
keyCode 101 = KP_5 KP_5
keyCode 102 = KP_6 KP_6
keyCode 103 = KP_7 KP_7
keyCode 104 = KP_8 KP_8
keyCode 105 = KP_9 KP_9
keyCode 106 = KP_Multiply KP_Multiply
keyCode 107 = KP_Add KP_Add
keyCode 108 = KP_Separator KP_Separator
keyCode 109 = KP_Subtract KP_Subtract
keyCode 110 = KP_Decimal KP_Decimal
keyCode 111 = KP_Divide KP_Divide
keyCode 112 = F1
keyCode 113 = F2
keyCode 114 = F3
keyCode 115 = F4
keyCode 116 = F5
keyCode 117 = F6
keyCode 118 = F7
keyCode 119 = F8
keyCode 120 = F9
keyCode 121 = F10
keyCode 122 = F11
keyCode 123 = F12
keyCode 124 = F13
keyCode 125 = F14
keyCode 126 = F15
keyCode 127 = F16
keyCode 128 = F17
keyCode 129 = F18
keyCode 130 = F19
keyCode 131 = F20
keyCode 132 = F21
keyCode 133 = F22
keyCode 134 = F23
keyCode 135 = F24
keyCode 136 = Num_Lock
keyCode 137 = Scroll_Lock
keyCode 187 = acute grave
keyCode 188 = comma semicolon
keyCode 189 = minus underscore
keyCode 190 = period colon
keyCode 192 = numbersign apostrophe
keyCode 210 = plusminus hyphen macron
keyCode 211 =
keyCode 212 = copyright registered
keyCode 213 = guillemotleft guillemotright
keyCode 214 = masculine ordfeminine
keyCode 215 = ae AE
keyCode 216 = cent yen
keyCode 217 = questiondown exclamdown
keyCode 218 = onequarter onehalf threequarters
keyCode 220 = less greater bar
keyCode 221 = plus asterisk asciitilde
keyCode 227 = multiply division
keyCode 228 = acircumflex Acircumflex
keyCode 229 = ecircumflex Ecircumflex
keyCode 230 = icircumflex Icircumflex
keyCode 231 = ocircumflex Ocircumflex
keyCode 232 = ucircumflex Ucircumflex
keyCode 233 = ntilde Ntilde
keyCode 234 = yacute Yacute
keyCode 235 = oslash Ooblique
keyCode 236 = aring Aring
keyCode 237 = ccedilla Ccedilla
keyCode 238 = thorn THORN
keyCode 239 = eth ETH
keyCode 240 = diaeresis cedilla currency
keyCode 241 = agrave Agrave atilde Atilde
keyCode 242 = egrave Egrave
keyCode 243 = igrave Igrave
keyCode 244 = ograve Ograve otilde Otilde
keyCode 245 = ugrave Ugrave
keyCode 246 = adiaeresis Adiaeresis
keyCode 247 = ediaeresis Ediaeresis
keyCode 248 = idiaeresis Idiaeresis
keyCode 249 = odiaeresis Odiaeresis
keyCode 250 = udiaeresis Udiaeresis
keyCode 251 = ssharp question backslash
keyCode 252 = asciicircum degree
keyCode 253 = 3 sterling
keyCode 254 = Mode_switch
//使用event對象的keyCode屬性判斷輸入的鍵值
eg：if(event.keyCode==13)alert(「enter!」);
鍵值對應表
A　　0X65 　U 　　0X85
B　　0X66　 V　　 0X86
C　　0X67　 W　　 0X87
D　　0X68　 X 　　0X88
E　　0X69　 Y　　 0X89
F　　0X70　 Z　　 0X90
G　　0X71　 0　　 0X48
H　　0X72　 1　　 0X49
I　　0X73　 2　　 0X50
J　　0X74　 3 　　0X51
K　　0X75　 4 　　0X52
L　　0X76　 5 　　0X53
M　　0X77　 6　　 0X54
N　　0X78 　7 　　0X55
O　　0X79 　8 　　0X56
P　　0X80 　9 　　0X57
Q　　0X81　ESC　　0X1B
R　　0X82　CTRL 　0X11
S　　0X83　SHIFT　0X10
T　　0X84　ENTER　0XD
//若是要使用組合鍵，則能夠判斷是否同時按下了這幾個鍵，好比ctrl鍵、shift鍵以及alt鍵的組合使用就能夠判斷是否多按下了ctrl鍵、shift鍵以及alt鍵

document.onkeydown=function(event){
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode==27){ // 按 Esc
        //要作的事情
    }
    if(e && e.keyCode==113){ // 按 F2
        //要作的事情
    }
    if(e && e.keyCode==13){ // enter 鍵
        //要作的事情
    }
};
//只要你定義了這些鍵的動做，你在瀏覽器裏按下這些鍵就會響應，兼容目前全部瀏覽器

鍵盤按鍵碼

使用按鍵碼

<input type="text" class="form-control" v-model="obj.name" @keyup.70="add"/> //按F鍵觸發

還能夠將按鍵碼賦給vue

<input type="text" class="form-control" v-model="obj.name" @keyup.f="add"/>
Vue.config.keyCodes.f = 70;

總結：除了v-bind和v-on後面是跟：冒號之外，其它指令都是跟=符號。而事件修飾符是在事件名稱後面跟.號。

指令中的變量與字符串

指令中的雙引號裏能夠寫vue中的數據變量、對象、函數，若是要拼接字符，字符必須使用單引號

自定義指令

vue的指令都是以v開頭。你也能夠自定義一些能簡化dom操做的指令。

<input type="text" class="form-control" v-model="keyWords" v-focus/>
<input type="text" class="form-control" v-model="keyWords" v-color=" 'blue' "/>
Vue.directive("focus", {
    //當指令綁定到元素上的時候觸發，只執行一次，這個事件發生在元素插入dom以前
    bind: function (el) {
    },
    //當元素插入到dom時觸發
    inserted: function (el) {
        el.focus();
    },
    //當vue組件（vnode）發生更新時觸發
    updated: function (el) {
    },
    componentUpdated: function () {
    },
    unbind: function (el) {
    }
});

//事件參數
//el：html元素對象
//binding：指令對象，
//binding的屬性
//binding.value：指令=的值，如v-color=" 'blue' ", value返回‘blue’，如v-sum="1+1"，則value返回2
//binding.name：指令的名字，如v-color指令的名字是color（不包含v前綴）
//binding.expression：指令的原始表達式，如v-color=" 'blue' "，expression返回 " 'blue' "，如v-sum="1+1"，則expression返回"1+1"而不是2
//binding.arg：指令的額外參數，如v-color:alpha，arg返回"alpha"
Vue.directive("color", {
    bind: function (el,binding) {
        el.style.color = binding.value;
    }
});

私有自定義指令

在vue實例內部編寫