VUE的指令
vue所有的指令都是以 " v-" 開頭。
v-html：類似于 js中的innerHTML 。可以解析模板中的標簽。
v-text：類似于 js中的innerText。將模板中的數(shù)據(jù)以字符串的形式輸出。不會解析模板中的標簽。等價于?{{ }}?:防止刷新時{{ }}出現(xiàn)在頁面上
v-show：通過控制css的display來控制元素的實現(xiàn)和隱藏。如果是頻繁切換則推薦用此方法。節(jié)約性能。
v-if：當屬性值為true時，則顯示當前的元素，為false，那么顯示v-false的元素。如果是偶爾切換，甚至不切換，則建議使用這個。減緩首次加在壓力，提高性能。
v-else-if：配合著 v-if 使用，當條件不成立時，執(zhí)行這步。
v-else?：當以上條件都不成立時，執(zhí)行這一步。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 <div v-if="mag<0">小于0</div> 10 <div v-else-if="mag<10">0-9</div> 11 <div v-else>大于10</div> 12 </div> 13 </body> 14 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 15 <script> 16 var vm=new Vue({ 17 el:"#app", 18 data:{ 19 mag:15 20 }, 21 }) 22 </script> 23 </html>v-once:只綁定一次，當數(shù)據(jù)再次發(fā)生變化，也不會導(dǎo)致頁面刷新，寫在不想刷新的標簽上。
v-bind：單向數(shù)據(jù)綁定
1 <!--完整寫法--> 2 <a v-bind:href="url">1111</a> 3 <!--簡寫--> 4 <a :href="url">2222</a>一般用于class的獲取
1 <ul?class="box"?v-bind:class="{‘textColor‘:isColor,?‘textSize‘:isSize}"> 2 ????<li>學(xué)習(xí)Vue</li> 3 ????<li>學(xué)習(xí)Node</li> 4 ????<li>學(xué)習(xí)React</li> 5 </ul> 1 var vm= new Vue({ 2 el:‘.box‘, 3 data:{ 4 isColor:true, 5 isSize:true 6 } 7 })v-on: 綁定事件。
1 <!--完整寫法--> 2 <button v-on:click="doThis"></button> 3 <!--簡寫--> 4 <button @click="doThis"></button>監(jiān)聽DOM事件，函數(shù)需要定義在methods中，不能和data中的內(nèi)容重名，不能使用箭頭函數(shù)?
- 如果在綁定時，fn不帶（），那么函數(shù)會默認接收一個事件對象e，mouseEvent?，如果綁定時帶有小括號，那么默認接收事件對象，
- 既需要事件對象，又需要參數(shù)，需要在綁定的小括號中加一個$event,后面才是真正的實參
v=for:循環(huán)
循環(huán)數(shù)組?
1 <!--html--> 2 <div v-for="item in arr">{{item}}</div> 1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 arr:[1,2,4,574,45,448] 5 }, 6 })效果如下：item 代表每一項
循環(huán)字符串
1 <div v-for="item in str">{{item}}</div> 1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 str:"fdhsde" 5 }, 6 })效果如下 ： item 代表著每一個字符
循環(huán)對象
<div v-for="(item,key,index) in obj">{{item}}--{{key}}--{{index}}</div> 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ù)字
1 <div v-for="item in 6">{{item}}</div>效果如下 ：
v-cloak?：用于元素加載數(shù)據(jù)比較多時，vue解析時間比較長，為了防止{{}}出現(xiàn)，給該元素加上v-cloak屬性，直到vue中把DOM數(shù)據(jù)插入到真實DOM中時，讓當前的元素顯示；
1 <div class="#app" v-cloak> 2 <p>{{value.name}}</p> 3 </div> 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)容
?
轉(zhuǎn)載于:https://www.cnblogs.com/xiaoqi520/p/9994121.html
總結(jié)
- 上一篇： 素数筛选-hdu2710
- 下一篇： gem ransack(4000✨) 简