到目前為止，我們已經(jīng)會(huì)寫(xiě)Angularjs的雙向數(shù)據(jù)綁定，那么今天也將一起來(lái)整理一下Vue.js的雙向數(shù)據(jù)綁定。簡(jiǎn)直和Angularjs如出一轍，所以很簡(jiǎn)單。
一、雙向數(shù)據(jù)綁定
使用指令v-model，即可輕松的完成DOM元素與數(shù)據(jù)的正反向綁定：真向可以理解為，由應(yīng)用的model向頁(yè)面渲染數(shù)據(jù)；反之，修改頁(yè)面數(shù)據(jù)，利用事件驅(qū)動(dòng)去修改應(yīng)用model中的數(shù)據(jù)，可理解為反向。其實(shí)無(wú)所謂正向，反向只要能理解應(yīng)用中model的數(shù)據(jù)會(huì)隨著頁(yè)面數(shù)據(jù)的修改而變化，反之model中的數(shù)據(jù)遭遇修改，頁(yè)面要展示的數(shù)據(jù)也會(huì)與應(yīng)用中的model同步。直接上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雙向數(shù)據(jù)綁定</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input v-model="message"/>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
}
})
</script>
</body>
</html>
二、頁(yè)面元素事件監(jiān)聽(tīng)
上面的例子只是做了一個(gè)簡(jiǎn)單的演示，實(shí)際情況中還會(huì)出現(xiàn)更為復(fù)雜的情況。根據(jù)上面的代碼，我們嘗試做一些修改，在頁(yè)面中添加一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕的時(shí)候，顯示message的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件綁定</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input v-model="message"/>
<!--v-on可以用來(lái)進(jìn)行事件綁定，是不是感覺(jué)和jquery的寫(xiě)法類(lèi)似，只是這邊更加簡(jiǎn)便了些-->
<button v-on:click="showMsg">點(diǎn)我alert消息</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
},
//這里告訴Vue.js以下都是自定義的函數(shù)
methods: {
showMsg: function () {
alert(this.message)
}
}
})
</script>
</body>
</html>
ps:早安各位小伙伴，愿大家都能有所收獲。
