4.16加薪(Vue)笔记

来源:互联网 发布:热情高涨读音 知乎 编辑:程序博客网 时间:2024/06/07 01:07
指令:
是一种特殊的自定义行间属性
指令的职责就是当其表达式的值改变时响应地将某些行为应用到DOM上
在vue中,指令****以v-开头。

内置指令(可以去看API)
v-bind:动态绑定数据,简写为:   v-on:绑定事件监听器 简写为@
。。。。。

模板:
html模板:
    基于DOM的模板,浏览器可解析的有效的html都可以作为模板。

插值:文本插值:{{}}
   作用:替换实例上的属性值,当值改变时,插值内容处会自动更新

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

属性:使用v-bind进行绑定
使用js表达式  但是不要写语句。(最好不用。。)

*****把模板里边的逻辑抽出来放到另外一个地方去写(专门计算属性的),不要在模板里边做过多的逻辑处理。你只需要单纯的在模板里边渲染某一个属性!!!






字符串模板:
 template字符串:(会替换Html模板 权重比较高)
     template选项对象的属性
     模板将会替换**挂载的元素   挂载元素的内容将会被忽略
     根节点只有一个
     将html结构写在一对script标签中,设置type="x-template"
var vm = new Vue({
  el:
  data:
  template:
});

字符串拼接 正常的方式是不能换行的, es6提供了超级字符串就可以了。







模板-render函数:(很接近编译器了) (key,vlaue)形式
   自己创造一些函数。。

var vm = new Vue({
   el:
   data:
   render(createElement){
    return createElement(  
     "ul",
{(添加属性)
    class(没懂27:30秒)
    class:{

     bg:true
},(对象的形式)
      
    attr:{
        abc:"miaov"(添加属性)
}  ,

   domProps:{

    innerHTML:"<li>ssss</li>"
}










 
}
     [
      createElement("li",1),
      createElement("li",2),
    ]   
   );
}

});

















0 0
原创粉丝点击