002_Vue指令
1. Vue指令
1.1. Vue指令時間就是一些自定義屬性。
1.2. Vue指令的格式: 以v-開始(比如: v-cloak)。
2. v-cloak指令
2.1. 插值表達(dá)式存在"閃動"問題。
2.2. 使用v-cloak指令, 可以解決"閃動"問題。解決問題的原理: 先通過樣式隱藏內(nèi)容, 然后進(jìn)行值的替換, 替換好之后再顯示出來。
2.3. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>v-cloak指令</title><style type="text/css">[v-cloak] {display: none;}</style></head><body><div id="app"><div v-cloak>v-cloak指令解決閃動問題: {{msg}}</div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">/*** v-cloak指令用法:* 1. 提供樣式* [v-cloak] {* display: none;* }* 2. 在插值所在的標(biāo)簽, 添加v-cloak指令。解決問題的原理: 先通過樣式隱藏內(nèi)容, 然后進(jìn)行值的替換, 替換好之后再顯示出來。*/var vm = new Vue({el: "#app",data: {msg: "Hello World"}});</script></body> </html>2.4. 效果圖
3. 數(shù)據(jù)綁定指令
3.1. v-text填充純文本, 相比插值表達(dá)式更加簡潔。
3.2. v-html填充html片段, 存在安全問題, 容易導(dǎo)致XSS攻擊(跨站腳本攻擊)。
3.3. v-pre填充原始信息, 跳過編譯過程。
3.4. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>v-text v-html和v-pre指令</title></head><body><div id="app"><div v-text="msg"></div><div v-html="htmlMsg"></div><div v-pre>{{msg}}</div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {msg: "Hello World",htmlMsg: "<b>Hello World</b>"}});</script></body> </html>3.5. 效果圖
4. 數(shù)據(jù)的響應(yīng)式
4.1. 如何理解響應(yīng)式
4.1.1. html5中的響應(yīng)式(屏幕尺寸的變化導(dǎo)致樣式的變化)。
4.1.2. 數(shù)據(jù)的響應(yīng)式(數(shù)據(jù)的變化導(dǎo)致頁面內(nèi)容的變化)。
4.2. 什么是數(shù)據(jù)綁定?
4.2.1. 數(shù)據(jù)綁定: 將數(shù)據(jù)填充到標(biāo)簽中。
4.3. v-once只編譯一次
4.3.1. 顯示內(nèi)容之后不再具有響應(yīng)式功能。
4.4. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>v-once指令</title></head><body><div id="app"><div>{{msg}}</div><div v-once>{{info}}</div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {msg: "Hello World",info: "v-once指令, 只編譯一次, 數(shù)據(jù)不再具有響應(yīng)式。"}});</script></body> </html>4.5. 效果圖
5.5. 修改數(shù)據(jù), 查看頁面數(shù)據(jù)變化?
5.6. v-once的應(yīng)用場景: 如果顯示的信息后續(xù)不需要再修改, 你們可以使用v-once, 這樣可以提高性能。
6. 雙向數(shù)據(jù)綁定
6.1. 什么是雙向數(shù)據(jù)綁定?
6.2. 代碼?
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>v-model指令</title></head><body><div id="app"><div><span>您輸入的用戶名是: </span>{{uname}}</div><div><span>用戶名: </span><input type="text" v-model="uname" /></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var vm = new Vue({el: "#app",data: {uname: "zhang san"}});</script></body> </html>6.3. 效果圖
6.4. 修改輸入框用戶名為"li si"?
6.5. MVVM設(shè)計思想: M(model)、V(view)和VM(View-Model)。?
總結(jié)
- 上一篇： 007_Vue style样式绑定
- 下一篇： html5倒计时秒杀怎么做,vue 设