vue提供了大量的指令,比如:v-if,v-bind,v-on……太多,多写项目,多看API,这里就不多说。
1、vue 的三种模块
html模板:就是基于DOM的一些有效的html标签,如:
<div id="app">
<input type="text" v-model="content">
<span>{{content}}</span>
</div>
字符串模板:
如下,先定义字符串模板,然后在vue 的选项对象里面利用template绑定。字符串模板的优先级会比html模板高,如果html和字符串模板中都有内容,会用字符串模板里的内容替换html模板。
需要注意的是定义的字符串模板中根节点只能有一个。还有字符串用 ` 引起来是可以换行的(功能键1旁边的那个键)。
let data = {
content: 'world',
dataId: '145'
}
var str = `<div> 你好!{{content}}</div>`
var vm = new Vue({
el: '#app',
data: data,
template: str
})
除了用变量定义模板字符串,还可以用script标签,给script 标签定义Id,如下:
<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)
]
}