Vue常用的指令：
v-text不可解析HTML标签
v-html可解析HTML标签
v-if做元素的插入(append)和移除(remove)操作
v-else-if
v-else
v-show display:none和display:block的切换
v-for数组item，index对象value, key, index

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"></div><script type="text/javascript"> new Vue({ el: '#app', template: ` <div> <div v-text='mytext'></div> <div v-html='myhtml'></div> <!-- if、elseif、else表达式 !--> <button v-if='num==1'>测试vif</button> <button v-else-if='num==2'>测试velseif</button> <button v-else>测试velse</button> <!-- v-show是否显示，true显示 false不显示--> <div v-show='myshow'>我是show</div> <div> <ul> <!-- 这里数组索引和值是相反的 !--> <li v-for='item, index in arrayfor'>{{index}}, {{item}}</li> </ul> <ol> <!-- 这里对象的key和value也是相反的 !--> <li v-for='value,key in person'>{{key}},{{value}}</li> </ol> </div> </div> `, data: function () { return { mytext: '我是个纯文本v-text', myhtml: '<h2>我是可以解析html标签</h2>', num: 3, myshow: true, arrayfor: ['咖啡', '茶', '牛奶'], person: {name: 'zhangsan', age: 12, hobby: 'playgames'} } } })</script></body></html>