指令—— 数据绑定指令||数据响应式||双向数据绑定指令
生活随笔
收集整理的這篇文章主要介紹了
指令—— 数据绑定指令||数据响应式||双向数据绑定指令
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
??指令
v-cloak指令的用法
1、提供樣式
? [v-cloak]{
??? display: none;
? }
2、在插值表達(dá)式所在的標(biāo)簽中添加v-cloak指令
背后的原理：先通過樣式隱藏內(nèi)容，然后在內(nèi)存中進(jìn)行值的替換，替換好之后再顯示最終的結(jié)果
數(shù)據(jù)綁定指令
1、v-text指令用于將數(shù)據(jù)填充到標(biāo)簽中，作用于插值表達(dá)式類似，但是沒有閃動(dòng)問題 2、v-html指令用于將HTML片段填充到標(biāo)簽中，但是可能有安全問題 3、v-pre用于顯示原始信息 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div>{{msg}}</div><div v-text='msg'></div><div v-html='msg1'></div><div v-pre>{{msg}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {msg: 'Hello Vue',msg1: '<h1>HTML</h1>'}});</script> </body> </html>?數(shù)據(jù)響應(yīng)式
v-once的應(yīng)用場(chǎng)景：如果顯示的信息后續(xù)不需要再修改，可以使用v-once，這樣可以提高性能。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div>{{msg}}</div><div v-once>{{info}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {msg: 'Hello Vue',info: 'nihao'}});</script> </body> </html>雙向數(shù)據(jù)綁定指令
雙向數(shù)據(jù)綁定 1、從頁面到數(shù)據(jù) 2、從數(shù)據(jù)到頁面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><div>{{msg}}</div><div><input type="text" v-model='msg'></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {msg: 'Hello Vue'}});</script></body></html>總結(jié)
以上是生活随笔為你收集整理的指令—— 数据绑定指令||数据响应式||双向数据绑定指令的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue模板语法概述
- 下一篇： 事件——事件绑定||事件函数传参||事件