Vue指令和模板
博客专区 > aeato 的博客 > 博客详情
Vue指令和模板
aeato 发表于6个月前
Vue指令和模板
  • 发表于 6个月前
  • 阅读 18
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

指令

  • 是一种特殊的自定义行间属性

  • 指令的职责就是当其表达式的值改变时相应的将某些行为应用到DOM上

  • 在vue中,指令以V-开头

内置指令

    v-bind:动态绑定属性     v-text:更新数据,会覆盖已有结构     v-show:根据值的真假,切换元素的display属性     v-else-if:多条件判断,为真则渲染     v-for:基于源数据多次渲染元素或模板块     v-pre:跳过元素和子元素的编译过程     v-cloak:隐藏未编译的Mustache语法,css中设置[v-cloak]{display:none}     v-on:绑定事件监听器     v-html:可以解析数据中的html结构     v-if:根据值的真假,切换元素会被销毁、重建     v-else:条件都不符合时渲染     v-model:在表单控件元素上创建双向数据绑定     v-once:只渲染一次,随后数据更新不重新渲染

模板

html模版

    基于DOM模板,模板都是可解析的有效的html

  • 插值     文本:使用Mustache语法{{}}(该语法不能写语句)     作用:替换实例上的属性值,当值改变时,插值内容处会自动更新

原生的html:双大括号输出的是文本,不会解析html

属性:使用v-bind进行绑定,可以响应变化

使用js表达式:写简单的表达式

原则:span里面不能包含div

字符串模板

    template 字符串     template选项对象的属性     模板将会替换挂载的元素,挂载元素的内容都将被忽略     根节点只能有一个     将html结构写在一对javascript标签中,设置type="x-template"     

    

render函数

    render选项对象的属性     createElement(标签名,[数据对象],子元素)       ```     new Vue({             el:"#demo",             data:obj,             render(createElement){                 return createElement(                     "ul",                     [                         createElement("li",1),                         createElement("li",2),                         createElement("li",3)                     ]                 )             }         })

    
##  数据对象属性
    classs:{}//绑定class和v-bind:class一样的api
    style:{}//绑定样式,和v-bind:style一样的api
    attrs:{}//添加行间属性
    domProps:{}//DOM元素属性
    on:{}//绑定事件
    
    nativeOn:{}//监听原生事件
    directives:{}//自定义指令
    scopedSlots:{}//slot作用域
    slot:{}//定义slot名称
    key:"key"//给元素添加唯一标识
    ref:"ref"//引用信息
    

    new Vue({             el:"#demo",             data:obj,             render(createElement){                 return createElement(                     "ul",                     {                         class:{                             bg:true                         },//使用对象的方式,true显示,false则不显示                         style:{                             fontSize:"50px",                             color:"yellow"                         },                         attrs:{                             abc:"midue",                             value:"21"                         },                         domProps:{                             innerHTML:"

  • 我是html
  • "                         }//元素对象的一个属性,可以改变ul中的结构,下面创建的li就无效了                     },                     [                         createElement("li",1),                         createElement("li",2),                         createElement("li",3)                     ]                 )             }         })

        
    ## 指令class
    
        v-bind:class指令可以简写成:class
    
        使用方式:
        首先在css中定义一个类为red
        .red{
            color:red;
        }
        js部分:
        定义对象:
        let obj={addClass:true}
        定义vue实例:
        new Vue({
            el:"#demo",
            data:obj
        })
        最后在元素中使用:class指令绑定到对应到元素中:
        <span :class="{red:addClass}">hello vue</span>
        
        注意,绑定class和原生class可以共存
    
    标签: Vue.js
    共有 人打赏支持
    粉丝 0
    博文 7
    码字总数 11062
    ×
    aeato
    如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
    * 金额(元)
    ¥1 ¥5 ¥10 ¥20 其他金额
    打赏人
    留言
    * 支付类型
    微信扫码支付
    打赏金额:
    已支付成功
    打赏金额: