002_Vue指令
1. Vue指令
1.1. Vue指令时间就是一些自定义属性。
1.2. Vue指令的格式: 以v-开始(比如: v-cloak)。
2. v-cloak指令
2.1. 插值表达式存在"闪动"问题。
2.2. 使用v-cloak指令, 可以解决"闪动"问题。解决问题的原理: 先通过样式隐藏内容, 然后进行值的替换, 替换好之后再显示出来。
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. 在插值所在的标签, 添加v-cloak指令。解决问题的原理: 先通过样式隐藏内容, 然后进行值的替换, 替换好之后再显示出来。*/var vm = new Vue({el: "#app",data: {msg: "Hello World"}});</script></body> </html>2.4. 效果图
3. 数据绑定指令
3.1. v-text填充纯文本, 相比插值表达式更加简洁。
3.2. v-html填充html片段, 存在安全问题, 容易导致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. 数据的响应式
4.1. 如何理解响应式
4.1.1. html5中的响应式(屏幕尺寸的变化导致样式的变化)。
4.1.2. 数据的响应式(数据的变化导致页面内容的变化)。
4.2. 什么是数据绑定?
4.2.1. 数据绑定: 将数据填充到标签中。
4.3. v-once只编译一次
4.3.1. 显示内容之后不再具有响应式功能。
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指令, 只编译一次, 数据不再具有响应式。"}});</script></body> </html>4.5. 效果图
5.5. 修改数据, 查看页面数据变化
5.6. v-once的应用场景: 如果显示的信息后续不需要再修改, 你们可以使用v-once, 这样可以提高性能。
6. 双向数据绑定
6.1. 什么是双向数据绑定?
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设计思想: M(model)、V(view)和VM(View-Model)。
总结
- 上一篇： 007_Vue style样式绑定
- 下一篇： 003_Vue事件