認識vue指令
vue的指令directive只是dom的行間屬性,vue給這類屬性賦予了一定的意義, 來實現(xiàn)特殊的功能,所有的指令都以v-開頭
指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM甥郑。
那么接下來我們好好看看Vue給我們提供了那些指令
1. v-text 指令
1.1 v-text指令的基本用法
- v-text 能展示對應data中數(shù)據(jù)內容脱拼，也能在數(shù)據(jù)基礎上做運算
- v-text 會把標簽中的內容替換,類似于innerText
<div id="app">
<!-- 將data 中的數(shù)據(jù)渲染在頁面上-->
<div v-text='msg'></div>
<!-- v-text可以對data數(shù)據(jù)內容做簡單的運算-->
<div v-text='msg + "world"'></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:"hello"
}
})
</script>
注意指令(屬性)的值雖然加了引號, 但是引號內不是字符串,而是表達式, msg是表達式中的變量,如果需要在表達式中使用字符串,需要再次添加引號, 但是要注意引號的沖突
所以第二個div的v-text指令是變量msg和字符串world做了一個簡單的字符串拼接
顯示結果:
1.2 v-text指令覆蓋標簽嵌套內容
我們有講到v-text指令有點類似于innerText,所以在使用v-text指令的標簽內不要添加任何內容, 因為會被覆蓋,
示例如下:
<div id="app">
<!-- 使用v-text標簽中不能添加內容,會被覆蓋 -->
<!-- 使用v-text指令標簽中添加普通字符 -->
<div v-text='msg'>
你好! 中國
</div>
<!-- 使用v-text指令標簽中添加標簽 -->
<div v-text='msg +" " + "world"'>
<h2>我就是一個標題</h2>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:"hello"
}
})
</script>
顯示結果
通過示例,發(fā)現(xiàn)使用v-text標簽內的數(shù)據(jù)全被覆蓋了
v-text可以取代{{}} 它也有不好的地方就是會替換標簽內的所有的內容,無論普通字符還是標簽
Mustache語法只會在指定的地方編譯內容
2. v-cloak 指令
{{}}這種插值符號在頁面刷新的時候,會出現(xiàn)在頁面上, {{}}插值表達式會閃爍,
v-cloak 解決閃爍(塊)問題
2.1 v-cloak 指令的使用
第一步要給元素添加v-cloak
<div v-cloak></div>
第二步: 手動的給這個元素添加display:none;
[v-cloak]{
display:none;
}
了解一下,后期用不到
3.v-html 指令
雙大括號會將數(shù)據(jù)解釋為普通文本，而非 HTML 代碼双戳。為了輸出真正的 HTML抛人，你需要使用 v-html 指令：
3.1 v-html指令的基本使用
把html字符串當成html渲染.類似于innerHTML
<div id="app">
<!-- v-text無法解析數(shù)據(jù)中的標簽 -->
<div v-text="msg"></div>
<!-- v-html可以解析數(shù)據(jù)中的標簽 -->
<div v-html="msg"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:"<h2>hello wrold</h2>"
}
})
</script>
顯示結果
通過示例結果, 我們發(fā)現(xiàn)紅色使用v-text指令的div并沒有解析出數(shù)據(jù)中的h2標簽
藍色使用v-html指令的div,將數(shù)據(jù)中的h2解析成了標簽
但是一定要注意,v-html指令一定要慎用, 可能會攻擊,如果在數(shù)據(jù)里添加一個script標簽也能識別,那么script里面就可能會添加攻擊你的腳本.
所以如果要使用v-html指令,一定要是可信任的.不信任的會有問題
3.2 總結三種將數(shù)據(jù)渲染的頁面的方法
- 雖然上面三種方法都可以將數(shù)據(jù)渲染到頁面上弛姜，但是工作中我最常用的是
{{}} -
{{}}最被常用但是在加載的時候會出現(xiàn)閃爍問題(指令篇章v-cloak會講解解決方法)，無法將html格式數(shù)據(jù)渲染妖枚，只能當字符串展示 -
v-text雖然沒有數(shù)據(jù)加載閃爍問題廷臼，但是會將標簽中間的數(shù)據(jù)覆蓋，也不能渲染html格式數(shù)據(jù)。 -
v-html謹慎使用會出現(xiàn)xss攻擊的風險
4.v-once指令,
平時我們使用Mustache語法,包括v-text,v-html指令渲染的頁面都是具有響應式的, 當數(shù)據(jù)發(fā)生變化, 視圖也會跟著改變
v-once屬性不用設置值,使用{{}}插值符號插值,v-once值得是只會初始化插值一次;當數(shù)據(jù)發(fā)生變化是,頁面視圖不會發(fā)生改變
<div id="app">
<!-- 使用v-once指令 -->
<div v-once>{{msg}}</div>
<!-- 未使用v-once指令 -->
<div>{{msg}}</div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: 'hello wrold'
}
})
// 就是3秒以后 數(shù)據(jù)發(fā)生了變化,頁面視圖也不會有任何改變,
setTimeout(() => {
vm.msg = "你好 "
}, 3000)
</script>
示例在開始時,兩個div顯示的都是hello wrold,
但是3秒鐘以后顯示的結果如下
我們會發(fā)現(xiàn)未使用v-once指令的div在數(shù)據(jù)發(fā)生變化以后, 頁面顯示的結果也跟隨數(shù)據(jù)發(fā)生了變化,但是使用了v-once指令的div只會在初始化的時候顯示,顯示之后就不會再隨著頁面的變化而變化了
5. v-pre指令
不編譯指令,這個指令不需要表達式
用法：
跳過這個元素和它的子元素的編譯過程荠商〖盘瘢可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節(jié)點會加快編譯结啼。
示例:
正常編譯示例
<div id="app">
<span>{{ msg }}</span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:"hello world"
}
})
</script>
顯示結果:
使用v-pre指令
<div id="app">
<!-- v-pre指令不需要值 -->
<span v-pre>{{ msg }}</span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:"hello world"
}
})
</script>
顯示結果:
