當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

VUE指令篇_不常用指令

發(fā)布時(shí)間：2024/2/28 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 VUE指令篇_不常用指令小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

標(biāo)題沒(méi)錯(cuò)，就是幾個(gè)不常用指令，T_T，先來(lái)說(shuō)一下什么是指令，vue的指令是指以 v- 為前綴，具有特殊含義、擁有特殊功能的特性，可以直接使用data中的數(shù)據(jù)

1.v-pre

v-pre的作用是跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程。可以用來(lái)顯示原始的Mustache(插值表達(dá)式)標(biāo)簽，跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯

<div id="app"><div>{{ name }}</div><div v-pre>{{ age }}</div> </div> const vm = new Vue({el: '#app',data:{name: 'jwh',age: 18} });

?【結(jié)果】

2.v-cloak

v-cloak 指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯，與 css 的 display 屬性結(jié)合使用可以解決閃爍問(wèn)題，即隱藏未編譯的 mustache 標(biāo)簽，直到實(shí)例準(zhǔn)備完畢。

閃爍問(wèn)題：對(duì)于這個(gè)問(wèn)題由于JavaScript去操作DOM，都會(huì)等待DOM加載完成（DOM ready）。對(duì)于vuejs、angularjs這些會(huì)在DOM ready完會(huì)才回去解析html view Template，所以對(duì)于Chrome這類快速的瀏覽器你會(huì)看見(jiàn)有閃爍的情況出現(xiàn)。（這里引用了馬優(yōu)晨的博文，原文點(diǎn)擊這里），下圖就是頁(yè)面閃爍的過(guò)程

v-cloak解決的代碼如下

[v-cloak] {display: none; } <div id="app"><div v-cloak>{{ name }}</div> </div> const vm = new Vue({el: '#app',data: {name: 'jwh',} });

【結(jié)果】

3.v-once

v-once可以使元素只渲染一次，隨后的重新渲染，元素及其所以子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。這可以用于優(yōu)化性能。

<div id="app"><div v-once><div>{{ name }}</div><div>{{ age }}</div></div> </div> const vm = new Vue({el: '#app',data: {name: 'jwh',age: 18} });

?【結(jié)果】可以看到修改name值后，該元素并沒(méi)有重新渲染

4.v-text

v-text 的作用是更新textContent，與 {{ }} 不同的是，v-text 替換元素中所有的文本，而 mustache 只替換自己，不清空元素內(nèi)容，舉個(gè)栗子

<div id="app"><div>my name is {{ name }}</div><div v-text='name'>my name is </div> </div> const vm = new Vue({el: '#app',data:{name: 'jwh',} });

?【結(jié)果】

【注】v-text的優(yōu)先級(jí)高于 {{ }}

textContent 與innerText 比較

設(shè)置文本替換時(shí)，兩者都會(huì)把指定節(jié)點(diǎn)下的所有子節(jié)點(diǎn)也一并替換掉

textContent 會(huì)獲取所有元素的內(nèi)容，包括 <script> 和 <style> 元素，而 innerText 不會(huì)

innerText 受 css 樣式的影響，并且不會(huì)返回隱藏元素的文本，而 textContent 會(huì)

由于 innerText 受 css 樣式影響，它會(huì)觸發(fā)重排（reflow），但 textContent 不會(huì)

innerText 不是標(biāo)準(zhǔn)制定出來(lái)的 API，而是 IE 引入的，所以對(duì) IE 支持更友好；textContent 雖然作為標(biāo)準(zhǔn)方法但是只支持 IE8+ 以上的瀏覽器，在最新的瀏覽器中，兩個(gè)都可以使用

綜上，Vue 這里使用 textContent 是從性能的角度考慮的

5.v-html

v-html 的作用是更新元素的 innerHTML

【注】?jī)?nèi)容按普通 HTML 插入，不會(huì)作為 Vue 模板進(jìn)入編譯，在網(wǎng)站上動(dòng)態(tài)渲染任意 HTML 是非常威脅的，因?yàn)槿菀讓?dǎo)致XSS攻擊。只在可信內(nèi)容上使用 v-html，永不用在用戶提交的內(nèi)容上，舉個(gè)栗子

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body><input type="text" /><button>點(diǎn)擊</button><div id="app"><div v-html="msg"></div></div> </body> <script>const vm = new Vue({el: '#app',data: {msg: 'hellow beauty'}});const oInput = document.getElementsByTagName('input')[0];const oButton = document.getElementsByTagName('button')[0];let msg = null;oButton.onclick = function () {vm.msg = oInput.value} </script> </html>

【結(jié)果】當(dāng)我們?cè)谳斎肟蜉斎胍粋€(gè)input標(biāo)簽時(shí)，div中會(huì)出現(xiàn)一個(gè)輸入框，我們是不希望發(fā)生這種情況的

總結(jié)

以上是生活随笔為你收集整理的VUE指令篇_不常用指令的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。