因为现在学的还比较基础，总结的也都是一些基础的东西，主要还是把学过的东西回顾一下，整理到一起，方便以后回头看，所以仅适合初学者哈
1、html模板：
html模板：基于DOM的模板，模板都是可解析的有效的HTML
插值：
- 文本：使用{{}}语法，作用：替换实例上的属性值，当值改变时，插值内容处会自动更新
- 原生的html：双大括号输出的是文本，不会解析html（想要解析html，可以使用指令v-html）
- 属性:使用v-bind进行绑定，可以响应变化
- 使用JavaScript表达式：写简单的表达式
<div id="wrap">
<p>你的名字是{{list.name}}</p>
</div>
<script>
var list = {
name:"donna",
age:20
}
var vm = new Vue({
el:"#wrap",
data:{list}
});
</script>
2、字符串模板
template选项对象的属性
模板将会替换挂载的元素。挂载元素的内容都将被忽略
根节点只能有一个
将html结构写在一对script标签中，设置type="x-template"
<div id="wrap">
</div>
<script type="x-template" id="app">
<div>
<p>你的名字是{{list.name}}</p>
</div>
</script>
<script>
var list = {
name:"donna",
age:20
}
var vm = new Vue({
el:"#wrap",
data:{list},
template:"#app"
});
</script>
3、模板-render函数
render函数
render 选项对象的属性
createElement(标签名,[数据对象],子元素)//子元素为数组或对象
数据对象属性
- class:{},//绑定class
- style:{};//绑定样式，
- attrs:{};//添加行间属性
- domProps:{}//DOM元素属性
- on:{}//绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./src/vue.js"></script>
<style>
.bg{background:yellowgreen;}
</style>
</head>
<body>
<div id="wrap">
<p>你的名字是{{list.name}}</p>
</div>
<script>
var list = {
name:"donna",
age:20
}
var vm = new Vue({
el:"#wrap",
data:{list},
render(createElement){
return createElement(
"ul",
{
class:{bg:true},
style:{listStyle:"none"},
attrs:{
name:"donna"
}
},
[
createElement("li","aaaaaa"),
createElement("li","bbbbbb"),
createElement("li","cccccc")
]
)
}
});
</script>
</body>
</html>
