vue 从入门到精通(二)
vue 从入门到精通(二)
上一篇总结了一些vue的理论知识,如果你没看懂的话……那返回去继续去看啊!反正我要开始第二篇了。
vue提供了大量的指令,比如:v-if,v-bind,v-on……太多,多写项目,多看API,这里就不多说。
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) ] }