vue学习--模板语法(二、指令&数据绑定)
指令
1.什么是指令?
- 指令的本质就是自定义属性
- 指令的格式:以v-开始(如:v-cloak)
2.v-cloak指令用法
- 插值表达式存在的问题:“闪动”
- 如何解决该问题:使用v-cloack指令
- 解决该问题的原理:先隐藏,替换好值之后在显示最终值
1.提供样式
2.在插值表达式所在标签中添加v-cloak指令
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
背后的原理:先通过样式隐藏内容,然后在内存中进行值得替换,替换好之后在显示最终结果。
3.数据绑定指令
-
v-text 填充纯文本
① 相比插值表达式更加简洁
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
-
v-html 填充HTML片段
① 存在安全问题
② 本网站内部数据可用,来自第三方数据不可用
<div v-html="html"></div>
-
v-pre 填充原始信息
① 显示原始信息,跳过编译过程(分析编译过程)
<span v-pre>{{ this will not be compiled }}</span>
4.数据响应式
-
如何理解
① html5中的响应式(屏幕尺寸的变化导致样式的变化)
② 数据响应式(数据的变化导致页面内容的变化)
-
什么是数据绑定
① 数据绑定:将数据填充到标签中
-
v-once 只编译一次
① 显示内容之后不再具有响应式功能
如果显示的信息后续不需要在修改,可以使用,提高性能。
双向数据绑定
1.什么是双向数据绑定?
2.双向数据绑定分析
- v-model指令用法
<input type = 'text' v-model = 'uname' />
3.MVVM设计思想
①M(model)
②V(view)
③VM(view-model)
本文来自博客园,作者:一纸年华,转载请注明原文链接:https://www.cnblogs.com/nullcodeworld/p/16696512.html