因为现在学的还比较基础,总结的也都是一些基础的东西,主要还是把学过的东西回顾一下,整理到一起,方便以后回头看,所以仅适合初学者哈
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>