Vue?內(nèi)置指令梳理總結(jié)
指令總結(jié)
v-bind：單向綁定解析表達(dá)式，可簡寫為:xxxv-model：雙向數(shù)據(jù)綁定v-for：遍歷數(shù)組/對象/字符串v-on：綁定事件監(jiān)聽,可簡寫為@v-if：條件渲染（動態(tài)控制節(jié)點是否存在)v-else：條件渲染（動態(tài)控制節(jié)點是否存在)v-show：條件渲染(動態(tài)控制節(jié)點是否展示)
v-text
v-text 指令
- 1、作用：向其所在的節(jié)點中渲染文本內(nèi)容
- 2、與插值語法的區(qū)別:
v-text會替換掉節(jié)點中的內(nèi)容，{{xx}}則不會
<div id="root">
<h2>{{msg}}</h2>
<h2 v-text="msg"></h2>
</div><script type="text/javascript">
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
el: "#root",
data: {
msg:"Hello world"
}
})
</script>
v-html
先簡單演示下 v-html
<div id="root">
<div>{{msg}}</div>
<div v-text="msg"></div>
<div v-html="msg"></div>
</div><script type="text/javascript">
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
el: "#root",
data: {
msg:"<h3>Hello world</h3>"
}
})
</script>
cookie 簡略圖示
Chrome 查看 cookie
可以輸入兩個 cookie 值，然后在控制臺可以拿到這些值
另外 Firefox 查看 cookie 位置
<div id="root">
<div>{{msg}}</div>
<div v-text="msg"></div>
<div v-html="msg"></div>
<div v-html="msg2"></div>
<div v-html="msg3"></div>
</div><script type="text/javascript">
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
el: "#root",
data: {
msg:"<h3>Hello world</h3>",
msg2:"<a href=javascript:alert(1)>資源，速來</a>",
msg3:'<a href=javascript:location. rel="external nofollow" +document.cookie>資源，速來</a>'
}
})
</script>點擊跳轉(zhuǎn)后就會拿到 cookie，所以存在一定安全問題
當(dāng)然我們看百度的cookie，加上了 HttpOnly。HttpOnly 是包含在 http 返回頭Set-Cookie 里面的一個附加的 flag，所以它是后端服務(wù)器對 cookie設(shè)置的一個附加的屬性，在生成 cookie 時使用 HttpOnly 標(biāo)志有助于減輕客戶端腳本訪問受保護 cookie 的風(fēng)險（如果瀏覽器支持的話）
v-html 指令
1.作用：向指定節(jié)點中渲染包含html結(jié)構(gòu)的內(nèi)容
2.與插值語法的區(qū)別：
- (1).v-html 會替換掉節(jié)點中所有的內(nèi)容，{{xx}}則不會
- (2).v-html 可以識別 html 結(jié)構(gòu)
3.嚴(yán)重注意：v-html 有安全性問題!!!!
- (1).在網(wǎng)站上動態(tài)渲染任意HTML是非常危險的，容易導(dǎo)致XSS攻擊
- (2).一定要在可信的內(nèi)容上使用 v-html，永不要用在用戶提交的內(nèi)容上!
v-cloak
v-cloak指令（沒有值） 1.本質(zhì)是一個特殊屬性，Vue 實例創(chuàng)建完畢并接管容器后，會刪掉 v-cloak 屬性 2.使用 css 配合 v-cloak 可以解決網(wǎng)速慢時頁面展示出{{xxx}}的問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue初識</title>
<style>
/*選中標(biāo)簽中包含 v-cloak*/
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="root">
<div v-cloak>{{msg}}</div>
<!--如果引入了外部js，而且返回時間長，那么頁面會閃現(xiàn)-->
<script type="text/javascript" src="./js/vue.js"></script>
</div>
<!--這里標(biāo)簽內(nèi)容只有在上邊js加載完后才執(zhí)行-->
<script type="text/javascript">
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
el: "#root",
data: {
msg:"Hello world"
}
})
</script>
</body>
</html>v-once
v-once 指令 1.v-once所在節(jié)點在初次動態(tài)渲染后，就視為靜態(tài)內(nèi)容了 2.以后數(shù)據(jù)的改變不會引起v-once所在結(jié)構(gòu)的更新，可以用于優(yōu)化性能
<div id="root">
<h2 v-once>n的初始值：{{n}}</h2>
<h2>n的當(dāng)前值：{{n}}</h2>
<button @click="n++">點我n+1</button>
</div><script type="text/javascript">
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
el: "#root",
data: {
n:1
}
})
</script>
v-pre
v-pre指令 1.跳過其所在節(jié)點的編譯過程 2.可利用它跳過：沒有使用指令語法、沒有使用插值語法的節(jié)點，會加快編譯
<div id="root">
<h2 v-pre>Vue其實很簡單</h2>
<h2 v-pre>n的當(dāng)前值：{{n}}</h2>
<h2>n的當(dāng)前值：{{n}}</h2>
<button @click="n++">點我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
el: "#root",
data: {
n:1
}
})
</script>
到此這篇關(guān)于Vue 內(nèi)置指令梳理總結(jié)的文章就介紹到這了,更多相關(guān)Vue 內(nèi)置指令 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vue基于el-table拓展之table-plus組件，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue-cli工程webpack的基本用法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
本文主要介紹了vue實現(xiàn)登陸頁面開發(fā)實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
VUE跨域問題Access to XMLHttpRequest at
今天發(fā)現(xiàn)一個錯誤，VUE發(fā)送請求的時候不能請求到正確數(shù)據(jù)，VUE跨域問題Access to XMLHttpRequest at，本文就詳細(xì)的來介紹一下解決方法，感興趣的可以了解一下2022-05-05
vue3.0運行npm run dev報錯Cannot find module&
本文主要介紹了vue3.0運行npm run dev報錯Cannot find module node:url,因為使用的node版本是14.15.1低于15.0.0導(dǎo)致,具有一定的參考價值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了vue.js計算屬性computed用法,結(jié)合實例形式分析了vue.js使用computed方式進(jìn)行屬性計算的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
Vue子組件關(guān)閉后調(diào)用刷新父組件的實現(xiàn)
這篇文章主要介紹了Vue子組件關(guān)閉后調(diào)用刷新父組件的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了關(guān)于vue的路由模式及修改方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
在頁面中經(jīng)常會遇到自定義文本,如果文本過長就需要換行,在HTML中可以通過標(biāo)簽換行,也可以通過\n轉(zhuǎn)椅字符換行,下面這篇文章主要給大家介紹了關(guān)于vue文本識別“\n”換行問題的解決方式,需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了springboot?vue接口測試前端模塊樹和接口列表，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05