-
HTML模板
1.可以使用javascript的简单表达式<body> <div id="app"> {{ ture? "yes":"no" }} {{ message }} </div> <script src="../vue.js"></script> <script> // 数据 let data = 'hello,miao'; var vm = new Vue({ el:'#app', data:{ message:data } }) </script> </body> -
字符串模板
1.template对象属性
2.模板会替代挂载的元素
3.根节点只能有一个
4.将html结构写在一对script表现中，type="x-template"<body> <div id="app"> {{ message }} </div> <script src="../vue.js"></script> <!-- <script type="x-template" id="temp"> <div>hello,张三<span>,李四</span></div> </script> --> <script> // 数据 let data = 'hello,miao'; // 第一种写法 let str = `<div>hello,张三<span>,李四</span></div>` var vm = new Vue({ el:'#app', data:{ message:data }, template:str }) // 第二种写法 // var vm = new Vue({ // el:'#app', // data:{ // message:data // }, // template:‘#temp’ // }) </script> </body> render函数模板
image.png
<body>
<div id="app">
</div>
<script src="../vue.js"></script>
<script>
let data = true;
var vm = new Vue({
el:'#app',
data:{
message:data
},
render(createElement){
return createElement(
"ul",
{
class:{
red:data
},
style:{
backgroundColor:'yellow'
},
attrs:{
miaowei:"123"
},
domProps:{ //操作DOM属性，使用这个属性就不再使用createElement创建子元素
innerHTML:"<li>我是HTML</li>"
}
},
[
createElement("li",1),
createElement("li",2),
createElement("li",3),
]
);
}
})
</script>
</body>