vue 从入门到精通(二),vue 从入门到精通(二)

佚名 6年前 (2019-05-14) 随笔 1764人围观抢沙发百度已收录

vue 从入门到精通(二)

上一篇总结了一些vue的理论知识，如果你没看懂的话……那返回去继续去看啊！反正我要开始第二篇了。

vue提供了大量的指令，比如：v-if,v-bind,v-on……太多，多写项目，多看API，这里就不多说。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

1、vue 的三种模块

html模板：就是基于DOM的一些有效的html标签，如：

1 2 3 4 <div id= "app" > <input type= "text" v-model= "content" > <span>{{content}}</span> </div>　　

字符串模板：

如下，先定义字符串模板，然后在vue 的选项对象里面利用template绑定。字符串模板的优先级会比html模板高，如果html和字符串模板中都有内容，会用字符串模板里的内容替换html模板。

需要注意的是定义的字符串模板中根节点只能有一个。还有字符串用 ` 引起来是可以换行的（功能键1旁边的那个键）。

1 2 3 4 5 6 7 8 9 10 let data = { content: 'world' , dataId: '145' } var str = `<div> 你好！{{content}}</div>` var vm = new Vue({ el: '#app' , data: data, template: str })　　

除了用变量定义模板字符串，还可以用script标签，给script 标签定义Id，如下：

1 2 3 4 5 6 7 8 9 10 11 12 <script type= "x-template" id= "temp" > <div>你好！{{content}}</div> </script> <script> let data = { content: 'world' } var vm = new Vue({ el: '#app' , data: data, template: "#temp" })　　

reder函数模板：更加接近编译器。

 render(createElement){   
　　"元素名称"，
    {
    属性：{
        属性值：true
    },
    class:{
        fontClass:true
    },
    style:{
    　　color:red
    },
    domProps:{
　　　　innerHTML:"<li>我是html<li>" //当domProps和createElement都要子元素时，以domProps为主。
　　　}
    }，
    [
     createElement("li",1),
     createElement("li",2),
     createElement("li",3)
    ] 
}