Vue.js初次尝试，简单指令（三）
2017-03-14 本文已影响128人
葉糖糖
到目前为止，我们已经会写Angularjs的双向数据绑定，那么今天也将一起来整理一下Vue.js的双向数据绑定。简直和Angularjs如出一辙，所以很简单。
一、双向数据绑定
使用指令v-model，即可轻松的完成DOM元素与数据的正反向绑定：真向可以理解为，由应用的model向页面渲染数据；反之，修改页面数据，利用事件驱动去修改应用model中的数据，可理解为反向。其实无所谓正向，反向只要能理解应用中model的数据会随着页面数据的修改而变化，反之model中的数据遭遇修改，页面要展示的数据也会与应用中的model同步。直接上代码：
<!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"/>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
}
})
</script>
</body>
</html>
二、页面元素事件监听
上面的例子只是做了一个简单的演示，实际情况中还会出现更为复杂的情况。根据上面的代码，我们尝试做一些修改，在页面中添加一个按钮，当点击按钮的时候，显示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可以用来进行事件绑定，是不是感觉和jquery的写法类似，只是这边更加简便了些-->
<button v-on:click="showMsg">点我alert消息</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
},
//这里告诉Vue.js以下都是自定义的函数
methods: {
showMsg: function () {
alert(this.message)
}
}
})
</script>
</body>
</html>
ps:早安各位小伙伴，愿大家都能有所收获。
