指令+模板
指令：
v-bind：class = “className”
v-test ：更新数据
v-show : 根据值得真假
v-else-if :多条件判断
v-for :基于源数据 进行多次渲染
v-pre ：跳过元素和子元素的编译过程
v-cloak :隐藏未编译的mustache语法， class中设置 v-cloak { display:none }
v-on :绑定事件监听
v-html ：可以解析数据中html结构
v-modle :在表单控件元素上创建双向数据绑定
v-once ：只能渲染一次
v-if :
v-else ：
模板：
render函数
eg:1
var vm = new Vue({
el:"#demo",
data:obj,
//template:str,
render(createElement){ //render函数
return createElement(
"ul",
[
createElement("li","内容111"),
createElement("li","内容222"),
createElement("li","内容333"),
createElement("li","内容444"),
]
)
},
eg:2
<style>
.bg { background-color: bisque; width:300px; }
</style>
</head>
<body>
<div id="demo"></div>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:"#demo",
//createElement(标签名，[数据对象]，子元素)
//数据对象的属性
/*
* class:{}, stayle:{}, attrs:{}添加行间属性 ， domProps:{} dom元素属性
* 下面的跟组件有关系的操作
* nativeOn:{}监听原生事件， scopedSlots:{} slot作用域, on:{} 绑定事件，
* key:"key" 给元素加唯一标示， slot:{} 定义slot名称 ， ref:"ref" 引用信息
* */
render(createElement){
return createElement(
"ul",
{
class:{
bg:true
},
style:{
fontSize:"22px"
},
attrs:{ //自定义属性
a:"miao"
},
domProps:{ //dom ,改变ul里面的结构，下面创建的标签就都无用了
//innerHTML:"<li>我是html</li>"
},
},
[
createElement("li",1),
createElement("li",1),
createElement("li",1),
]
)
}
})
</script>
html模板
字符串模板 ： template
eg:
<div id="demo">
<!--<div v-bind:class="id"> {{ msg }} </div>-->
<!--<p v-html="html"></p>-->
<span>miaov</span>
</div>
<script src="vue.min.js"></script>
<script>
//数据
let obj = {
msg : "hello",
id:"123",
//html:"<p>标签不解析出来，标签上加 v-html="html"就好</p>",
dd:"xianghui"
}
var str = "<div>hello:{{ dd }}</div>"
var vm = new Vue({
el:"#demo",
data:obj,
template:str, //template:"#id", scriot形式渲染
})
</script>
