1、v-text：设置标签的文本值
<div id='root'>
<span v-text = 'message'> </span>
</div>
<script>
const x = new Vue({
el:'#root',
data:{
message:'你好！'
}
})
</script>
2、v-html：设置标签的innerHtml
<div id="root">
<span v-html="message"></span >
</div>
<script>
const x=new Vue({
el:"#root",
data:{
message:'<span>你好</span>'
}
})
</script>
3、v-on：为元素绑定事件；同时可以传递自定义参数
（1）为元素绑定事件
<div id="root">
<button v-on:click='btn'>点击</button>
<button @click='btn'>点击</button>
<button @dblclick='btn'>双击事件</button>
</div>
<script>
const x=new Vue({
el:"#root",
methods:{
btn:function(){
console.log("你好")
}
}
})
</script>
（2）传递自定义参数
<div id="root">
<input type="text" @keyup.enter="enter"> //键盘enter
</div>
<script>
const x=new Vue({
el:"#root",
methods:{
enter:function () {
console.log('你好')
}
}
})
</script>
4、v-show：根据表达值的要求（规则），切换元素的显示隐藏
5、v-if：根据表达值的要求，切换元素的显示隐藏，主要用于操作DOM元素
6、v-show和v-if的区别：
（1）v-show：主要控制得css
（2）v-if：动态得添加或者删除dom元素，适合频繁切换
7、v-bind：设置元素得属性
8、v-for：循环列表渲染
<div id="root">
<ul>
<li v-for="(item,index) in arr">
{{item}}
</li>
</ul>
</div>
<script>
const x=new Vue({
el:"#root",
data:{
arr:[1,2,3,4]
}
})
</script>
9、v-model：获取和设置元素的值，双向数据绑定
<div id="root">
<input type="text" v-model="message" @click="get">
<h2>{{message}}</h2>
</div>
<script>
const x=new Vue({
el:"#root",
data:{
message:""
},
methods:{
get:function (){
alert(this.message)
}
}
})
</script>
10、v-cloak：当你的网速过慢时，将没有解析得模块显示在页面上
11、v-once：所在节点在初次动态渲染后，就视为静态内容了，数据改变不会引起v-once所在结构的更新，可以用于优化性能
12、v-pre：跳过其所在节点的编译过程，可利用它跳过没有使用指令语法，没有使用插值语法的节点，会加快编译
