[A] mustach语法
mustache语法,也称为插值语法
使用方法
1. 在{{变量名}}中加入变量,即可在界面中直接替换成变量对应的值
2. 在{{表达式}}中加入表达式,如:
{{name + " " + age}}, {{counter * 2}}
[B] v-once
行内属性,表示该标签内的变量生产一次后, 就不会再被改变
该指令后面不需要跟任何表达式(如之前的v-for后面是有表达式的)
该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。
如:<div v-once>我的名字是:{{msg}}</div>
[C] v-html
有时候,我们的数据是后端返回的数据,可能是一段HTML代码,这是我们可以通过v-html直接渲染出来,这是{{}}无法实现的
<div v-html="url"></div> // 返回:百度一下
<div>{{url}}</div> // 返回<a href="www.baidu.com">百度一下</a>
[D] v-text
行内属性,效果和mustache很相似,也是用于将数据展示在界面上
<h2 v-text="text"></h2> // 改标签被替换成变量text的内容
不够灵活,很少用
[E] v-pre
行内属性,表示该标签内的内容不被解析,就讲标签内的内容原封不动的展示在界面上
<h2 v-pre>{{msg}}</h2> // 返回{{msg}}
应用很少
[F] v-cloak
cloak 斗篷
示例:
<div id="app">
{{msg}}
</div>
new Vue({
el: "#app",
data: {
msg: "哈哈",
},
})
根据从上往下的执行顺序,页面上首先会显示{{msg}},然后vue被解析之后,页面显示为"哈哈".实际上这个过程很快,我们看不到{{msg}}
v-cloak添加到行内之后,在vue渲染之前,会存在,vue渲染之后这个行内属性会被清除掉
利用这个属性,我们可以设置渲染时前的样式,渲染之后自动消失