vue的指令

ThinkSNS 發(fā)布于2019-08-26 13:25 / 3019人閱讀

摘要：所有的指令都是以開頭。將模板中的數(shù)據(jù)以字符串的形式輸出。等價(jià)于防止刷新時(shí)出現(xiàn)在頁面上通過控制的來控制元素的實(shí)現(xiàn)和隱藏。減緩首次加在壓力，提高性能。單向數(shù)據(jù)綁定完整寫法簡寫一般用于的獲取學(xué)習(xí)學(xué)習(xí)學(xué)習(xí)綁定事件。

vue所有的指令都是以 " v-" 開頭。

v-html：類似于 js中的innerHTML 。可以解析模板中的標(biāo)簽。

v-text：類似于 js中的innerText。將模板中的數(shù)據(jù)以字符串的形式輸出。不會(huì)解析模板中的標(biāo)簽。等價(jià)于 {{ }} :防止刷新時(shí){{ }}出現(xiàn)在頁面上

v-show：通過控制css的display來控制元素的實(shí)現(xiàn)和隱藏。如果是頻繁切換則推薦用此方法。節(jié)約性能。

v-if：當(dāng)屬性值為true時(shí)，則顯示當(dāng)前的元素，為false，那么顯示v-false的元素。如果是偶爾切換，甚至不切換，則建議使用這個(gè)。減緩首次加在壓力，提高性能。

v-else-if：配合著 v-if 使用，當(dāng)條件不成立時(shí)，執(zhí)行這步。

v-else ：當(dāng)以上條件都不成立時(shí)，執(zhí)行這一步。

 1 
 2     
 3 
 4     
 5     Title
 6 
 7 
 8 
 9     小于0
10     0-9
11     大于10
12 
13 
14 
15 
23

v-once:只綁定一次，當(dāng)數(shù)據(jù)再次發(fā)生變化，也不會(huì)導(dǎo)致頁面刷新，寫在不想刷新的標(biāo)簽上。
v-bind：單向數(shù)據(jù)綁定

一般用于class的獲取

1 
2     學(xué)習(xí)Vue
3     學(xué)習(xí)Node
4     學(xué)習(xí)React
5

1 var vm= new Vue({ 2 el:‘.box‘, 3 data:{ 4 isColor:true, 5 isSize:true 6 } 7 })

v-on: 綁定事件。

監(jiān)聽DOM事件，函數(shù)需要定義在methods中，不能和data中的內(nèi)容重名，不能使用箭頭函數(shù)

如果在綁定時(shí)，fn不帶（），那么函數(shù)會(huì)默認(rèn)接收一個(gè)事件對(duì)象e，mouseEvent ，如果綁定時(shí)帶有小括號(hào)，那么默認(rèn)接收事件對(duì)象，
既需要事件對(duì)象，又需要參數(shù)，需要在綁定的小括號(hào)中加一個(gè)$event,后面才是真正的實(shí)參
v=for:循環(huán)

循環(huán)數(shù)組

1
2 {{item}}

1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 arr:[1,2,4,574,45,448] 5 }, 6 })

效果如下：item 代表每一項(xiàng)

循環(huán)字符串

1 {{item}}

1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 str:"fdhsde" 5 }, 6 })

效果如下： item 代表著每一個(gè)字符

循環(huán)對(duì)象

{{item}}--{{key}}--{{index}}

 1     var vm=new Vue({ 
2         el:"#app",
 3         data:{
 4             obj:{
 5                 name:"qi",
 6                 age:"22",
 7             }
 8 
 9 }, 
10     })

效果如下：第一個(gè)參數(shù)是屬性值，第二個(gè)參數(shù)是屬性名，第三個(gè)參數(shù)是索引。

循環(huán)數(shù)字

效果如下：

v-cloak ：用于元素加載數(shù)據(jù)比較多時(shí)，vue解析時(shí)間比較長，為了防止{{}}出現(xiàn)，給該元素加上v-cloak屬性，直到vue中把DOM數(shù)據(jù)插入到真實(shí)DOM中時(shí)，讓當(dāng)前的元素顯示；

1 
2     {{value.name}}
3

1 [v-cloak] { 2 display: none; 3 }

但是有的時(shí)候會(huì)不起作用，可能的原因有二：

1、v-cloak的display屬性被層級(jí)更高的給覆蓋掉了，所以要提高層級(jí)

1 [v-cloak] {
2     display: none !important;
3 }

2、樣式放在了@import引入的css文件中

v-cloak的這個(gè)樣式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者內(nèi)聯(lián)樣式中

v-model：只用于表單元素忽略了value。checkbox selected，將數(shù)據(jù)綁定的視圖上，視圖修改會(huì)影響數(shù)據(jù)的變化（雙向數(shù)據(jù)綁定）

單選框中使用v-model ：會(huì)將都綁定val的劃分成一組，只能選擇其中一個(gè)
在復(fù)選框中，如果只有一個(gè)，v-model 會(huì)將值默認(rèn)轉(zhuǎn)換成布爾類型的值
如果v-model 在復(fù)選框中同時(shí)綁定一個(gè)值，那么會(huì)把這幾個(gè)進(jìn)行分組，把選中的值，同一放進(jìn)數(shù)組中
如果多個(gè)input框同時(shí)綁定一個(gè)相同的v-model，通過是否在數(shù)組中進(jìn)行選中或者不選擇，各自來控制自己的狀態(tài)
用于下拉框那么select上v-model綁定的值：跟option中的value屬性有關(guān) ，那么如果沒有value屬性，那么會(huì)取option標(biāo)簽中的內(nèi)容