vue的指令

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

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

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

v-html：類似于 js中的innerHTML ?？梢越馕瞿０逯械臉撕灐?/p>

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

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

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

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

v-else ：當(dāng)以上條件都不成立時，執(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ā)生變化，也不會導(dǎ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ù)

如果在綁定時，fn不帶（），那么函數(shù)會默認接收一個事件對象e，mouseEvent ，如果綁定時帶有小括號，那么默認接收事件對象，
既需要事件對象，又需要參數(shù)，需要在綁定的小括號中加一個$event,后面才是真正的實參
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 代表每一項

循環(huán)字符串

1 {{item}}

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

效果如下： item 代表著每一個字符

循環(huán)對象

{{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     })

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

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

效果如下：

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

1 
2     {{value.name}}
3

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

但是有的時候會不起作用，可能的原因有二：

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

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

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

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

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

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