- v-bind：是Vue中，提供的用於綁定屬性的指令
- 注意：v-bind: 指令可以簡寫爲 :要綁定的屬性，如：v-bind:title=:title，v-bind 中，可以寫合法的JS表達式
- v-on: 事件綁定機制，也可以簡寫爲 @要綁定的屬性,如：v-on:click=@:click，在methods定義方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak] {
/* display: none; */
}
</style>
</head>
<body>
<div class="app">
<!-- 使用 v-cloak 能夠解決 插值表達式閃爍的問題 -->
<p v-cloak>+++++{{ msg }}-----</p>
<h4 v-text="msg">=====</h4>
<!-- 默認 v-text 是沒有閃爍問題的 -->
<!-- v-text會覆蓋元素中原來的內容，但是 插值表達式 只會替換自己的這個佔位符，不會把 整個元素 的內容給清空 -->
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
<!-- v-bind：是Vue中，提供的用於綁定屬性的指令 -->
<!-- 注意：v-bind: 指令可以簡寫爲 :要綁定的屬性 -->
<!-- v-bind 中，可以寫合法的JS表達式 -->
<!-- Vue中提供了 v-on: 事件綁定機制 -->
<!-- <input type="button" value="按鈕" v-bind:title="mytitle + '123'" > -->
<input type="button" value="按鈕" v-on:click="show">
</div>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: '.app',
data: {
msg: '123',
msg2: '<h1>我是h1</h1>',
mytitle: '這是一個自定義的title'
},
methods: { //這個methods屬性中定義了當前Vue實例所以可用的方法
show: function(){
alert('Hello')
}
}
})
</script>
</body>
</html>
- 把上面的v-on:click改爲v-on:mouseover事件：
![在這裏插入圖片描述]()
- 也可以改爲其他事件來處理，Vue這樣做是減少了對DOM的依賴。
- 如果是DOM操作事件就是如下
<input type="button" value="按鈕" v-bind:title="mytitle + '123'" id="btn">
<script>
document.getElementById('btn').onclick = function(){
alert('Hello')
}
</script>
結果跟上面的操作事件是一樣的結果