一、指令与模板
指令：当表达式的值改变是相应的将其某些行为应用到DOM上
- v-bind 动态指令，简写为 ：
- v-on 绑定事件监听器，简写为 @
- v-text 更新数据，覆盖已有结构
- v-html 可以解析数据中的HTML结构，更新innerHTML（内容按照普通HTML插入-不会作为vue模板进行编译)，配合v-html组合模板使用，很危险尽量不用
- v-show 根据值的真假，切换元素的display cssCSS属性
- v-if 根据值得真假切换元素会被销毁，重建
- v-else-if 多条件判断为真则渲染
- v-else 条件都不符合渲染
- v-for 基于源数据多次渲染元素或模板块
- v-modle 在表单控件元素上创建双向数据绑定
- v-pre 跳过元素和子元素的编译过程
- v-once 之渲染一次，随后数据更新不重复渲染
- v-cloak 隐藏为编译的Mustache语法，css中设置【v-closk]{display:none}
二、HTML模板（写死的）
插值：
1、文本：
数据绑定最常见的形式是就是使用"Mustadhe"语法（双大括号）的文本插值；（替换实例上的属性值，当值改变时，插值内容处会自动更新）
2、原生HTML：
双大括号将数据解释为纯文本，非HTML,需要使用v-html指令才可解析成Html文本（危险，尽量不要用）
3、属性：
使用v-bind指令进行绑定，可以响应变化
4、使用javascript表达式：
写简单表达式{{1+2}}、{{true?'yes':'no'}}、{{message.split('').reverse().join('')}}
参数：
在指令后用冒号指明
三、字符串模板（动态拼接的）
template字符串（替换挂载点的原本模板）
在选项对象中添加一个template属性
方法1、template：字符串**(ES6中字符串拼接"``"可换行)
方法2、<script type="x-template" id="temp">把html做成片段</script>
(template:"#temp")(方法二不能跨文件使用)
四、模板-render函数(手动创建模板)（接近DOM）
1、在选择对象中添加render函数，参数为createElement,即可写入要生成的标签
2、语法：
render 选项对象的属性
createElement（标签名，[数据对象]，子元素）;
3、数据对象属性：
class:{}, //绑定class，和v-bind:class一样的API
style:{}, //绑定样式，和v-bind:class一样的API
attrs:{}, //添加行间属性
domProps:{}, //DOM元素属性
on:{}, //绑定事件
nativeOn:{}, //监听原生事件
directives:{}, //自定义指令
scopedSlots:{}, //slot作用域
slot:{}, //定义slot名称
key:"key", //给元素添加唯一标志
ref:"ref", //引用信息
render(createElement){
return createElement(//返回生成的出结构，调用方法
"ul",//第一个参数为标签名，（对象）
//数据对象属性
{
class: {
bg:true
},
style:{
fontSize:"50px"
},
attrs:{
asd:"mimmi"
},
domProps:{
innerHTML:"<li>我是HTML</li>"
}
},
//ui的子元素
[
createElement("li",1),
createElement("li",2),
createElement("li",3)
]
);
}
});