Vue中的指令總結

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>title
title
>67
head
>
8<
body
>
9<
div 
id>
10<
ul>
11<

li v-once
>}
li>
12
ul>
13div
>

12

vue(8})
9

v-once:作用：當加上v-once之後dom中的message的值就是data中得message的初始值；也就說dom中的message不會隨著data中message的值變化而發生變化

2.v-html的使用：

作用：將伺服器傳回來的標籤展示到介面；而不是標籤本身

用法：請看下面例子

doctype html
>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
head
>
<
body
>
<
div 
id>
<
ul><

li v-html 
= "url"
>
li>

ul>
div>

vue(

})

3.v-text的使用:

v-text作用和mustache比較相似；都是用於將資料顯示在頁面當中

v-text通常情況在，接受乙個string型別

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>title
title
>67
head
>
8<
body
>
9<
div 
id>
10<
ul>
11<

li 
v-text 
= "message"
>
li>
12
ul>
13div
>

vue(

})

4.v-pre用法：

作用：v-pre用於跳過這個元素和他子元素的編譯過程，不做任何改變，標籤中間是什麼就顯示什麼

doctype html
>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
head
>
<
body
>
<
div 
id><

h2>}
h2> //將data中的資料顯示出來
<
h2 v-pre
>}
h2> //將標籤之間的東西原封不動的顯示出來；不做任何改變，標籤中間是什麼就顯示什麼

div>

vue(

})

vue 指令總結

vue的指令 v for,in,key,v bind,v model,v on，v once，v cloak,v html,v text v show,v on，v if,v else if,v else,v pre 1.vue模板語法 使用雙花括號 這裡為文字插值 雙花括號裡面的資料解析為普通文字...

vue指令總結

v pre跳過這個元素和它的子元素的編譯過程 這裡的內容不會被編譯 v html輸出html v bind語法糖 動態更新html元素屬性 v on語法糖 繫結事件 v model用於表單類元素上雙向繫結資料 v cloak和display none配合使用解決網速較慢螢幕閃動問題 v cloak ...

vue 指令總結

templet templet中只能有乙個根節點 v text 只能用於雙標籤中，就是給元素的innertext賦值 v html 就是給元素的innerhtml賦值 v if 如果值為false，在html中顯示，為true就插入元素，v else if v else v show 是顯示與否的問...