初識VUE以及vue的常用指令

2021-10-08 04:15:22 字數 2226 閱讀 1588

在html中需要有乙個盒子來定義內容的範圍：



<


/div>


newvue(},


methods(),})




>


}<


!-- 用


}包裹的變數名，可以將資料渲染到頁面中 --


>


}<


/div>1、v-on


'reverser'


>reverse<


/button>


<


!-- 只認識純文字 --


>


<


!-- click為事件，也可以是其他的滑鼠鍵盤事件 --


>


'test'


>add<


/button>


<


!-- test為方法名, v-on:click可以簡寫為@click,函式後面的(


),可寫可不寫--


>
2、 v-html



'nickname'


>


<


/div>


<


!-- 可以識別html標籤 --


>3、 v-for為迴圈， item是每乙個元素，i為下標,in後的為陣列（陣列中的物件有多少就執行幾次）或者是數字（數字即為執行多少次）


for=


'(item ,i) in 3'


>hello}}


<


/h2>


for=


'(item ,i) in list'


>}、}


'del(i)'


>刪除<


/button>


<


/h3>


for=


'(item ,i) in list2'


>}、}


'del2(i)'


>刪除<


/button>


<


/h4>
4、 v-show。v-show 的引數為true就顯示，若isshow為false===display：『none』 ，若項頻繁切換是否顯示的用v-show

'isshow'


>標籤一直都在<


/h1>


"isshow=!isshow"


>切換<


/button>
6、v-if和v-else 。 v-if為true標籤存在並顯示，為false則刪除此標籤且顯示v-else中的內容;;只顯示一次的時候使用，例如登入，登入了顯示使用者名稱

'islogin'


>simba<


/h1>


else


>請登入<


/h1>


'islogin=!islogin'


>


}<


/button>


//}中可以寫js表示式
6、v-model(雙向繫結，當其中的內容發生變化時，其他位置的相關變數也會發生變化)。例如在輸入框中將haha改變為ace，下面的}也會變成ace

暱稱:


'login' type=


"text" v-model.trim=


'name'


>


}
7、v-bind（當屬性值為變數時，需要使用v-bind）例如下面的的src為變數



"i==activeindex" v-


for=


'(item,i) in list3'


:class=


"">


"item"


:id=


'i':title=


'item'


:style=


"" alt=


"">


<


/li>


<


/ul>
8、v-cloak

在預設情況下，如果vue載入有延遲或者資料比較多，會使使用者看到字串模板，觀感不好。

vue例項在渲染完成後，會將el對應的dom元素上的v-cloak屬性去掉，我們可以利用此特性，寫乙個屬性選擇器。

形如

[v-cloak]


 
vue常用指令
1 v model id box type text v model br div var a new vue script 就和 ng model 乙個意思了 v html html v html html渲染過程中被解析 v text text 同上 意思就是資料渲染過程中被解析 v for v...


vue常用指令
常用內建指令 v text 更新元素的 textcontent v html 更新元素的 innerhtml v if 如果為true,當前標籤才會輸出到頁面 v else 如果為false,當前標籤才會輸出到頁面 v show 通過控制display樣式來控制顯示 隱藏 v for 遍歷陣列 物件...


vue常用指令
vue常用指令 1.v text v text主要用來更新textcontent，可以等同於js的text屬性 2.v html 雙大括號的方式會將資料解釋為純文字，而非html。為了輸出真正的html，可以用v html指令。它等同於js的innerhtml屬性。3.v pre v pre主要用來...