Because what you have learned is still relatively basic and what you have summarized is also some basic things, it is mainly to review what you have learned and put them together so that you can look back later, so it is only suitable for beginners.
1. html template:
HTML templates: DOM-based templates, templates are valid and resolvable HTMLInterpolation:
- Text: Use the {{}} syntax to replace the attribute values on the instance, and the interpolation will be updated automatically when the values change
- Native html: Double braces output text and do not parse HTML (to parse html, use the directive v-html)
- Attribute: Use v-bind to bind in response to changes
- Using JavaScript expressions: Write simple expressions
<div id="wrap">
<p>Your name is{{list.name}}</p>
</div>
<script>
var list = {
name:"donna",
age:20
}
var vm = new Vue({
el:"#wrap",
data:{list}
});
</script>2. String Template
Properties of template option object
The template will replace the mounted element.The contents of mounted elements will be ignored
Root node can only have one
Write the html structure in a pair of script tags and set type="x-template"
<div id="wrap">
</div>
<script type="x-template" id="app">
<div>
<p>Your name is{{list.name}}</p>
</div>
</script>
<script>
var list = {
name:"donna",
age:20
}
var vm = new Vue({
el:"#wrap",
data:{list},
template:"#app"
});
</script>render function
Properties of render option object
CreateElement (label name, [data object], child element)//child element is an array or object
Data Object Properties
- Class:{}, //bind class
- Style:{};//bind style,
- attrs:{};//Add an interline attribute
- domProps:{}//DOM Element Properties
- on:{}//Bind event
<!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>Your name is{{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>