1、v-on：用於綁定HTML事件
- v-on，用於事件（如click）的監聽綁定，比如下圖，意思是，為當前button綁定監聽器，點擊則調用sendBack1方法；v-on也可簡寫為@
示例：例如我們在HTML的body中加入一個綁定了事件的button
<div id="app">
<button v-on:click="onClick">點擊這里</button>
</div>
在js的methods中加入一個onClick事件：
<script>
var app = new Vue({
el : '#app',
methods : {
onClick : function(){
console.log("clicked");
}
}
})
</script>
2、v-bind：用於設置HTML屬性
<div id="app">
<!-- 全稱-->
<a v-bind:href="url">百度</a>
<!-- 簡寫-->
<a :href="url">百度</a>
</div>
在js的data中賦值url：
<script>
var app = new Vue({
el : '#app',
data: {
url:"www.baidu.com"
}
})
</script>
3、v-model：在表單控件元素上創建雙向數據綁定
<div class="app">
<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" id="John" value="John" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
<label for="jack">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>
在js的data中賦值checkedNames：
<script>
new Vue({
el:'.app',
data:{
checkedNames:[]
}
})
</script>
4、v-text會覆蓋元素中原本的內容，但是 插值表達式 只會替換自己的這個占位符，不會把 整個元素的內容清空，只顯示文本不顯示標簽
<body>
<div id="app">
<p>{{msg1}}</p>
<p v-text="msg1"></p>
<p v-text="msg2"></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg1: "這是對應的值",
msg2: "<h1>這是對應的值</h1>"
},
methods: {}
});
</script>
</body>
5、v-html同樣是用來顯示data中屬性的屬性值的（數據綁定），此指令不僅可以顯示文本內容，還可以顯示帶標簽的內容
<body>
<div id="app">
<p>{{msg1}}</p>
<p v-html="msg1"></p>
<p v-html="msg2"></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg1: "這是對應的值",
msg2: "<h1>這是對應的值</h1>"
},
methods: {}
});
</script>
</body>