Vue.js初次尝试，简单指令（三）

到目前为止，我们已经会写Angularjs的双向数据绑定，那么今天也将一起来整理一下Vue.js的双向数据绑定。简直和Angularjs如出一辙，所以很简单。

一、双向数据绑定

使用指令v-model，即可轻松的完成DOM元素与数据的正反向绑定：真向可以理解为，由应用的model向页面渲染数据；反之，修改页面数据，利用事件驱动去修改应用model中的数据，可理解为反向。其实无所谓正向，反向只要能理解应用中model的数据会随着页面数据的修改而变化，反之model中的数据遭遇修改，页面要展示的数据也会与应用中的model同步。直接上代码：

    
    
    



    
{{message}}
    

二、页面元素事件监听

上面的例子只是做了一个简单的演示，实际情况中还会出现更为复杂的情况。根据上面的代码，我们尝试做一些修改，在页面中添加一个按钮，当点击按钮的时候，显示message的值。

    
    
    



    
{{message}}
    
    
    点我alert消息

ps:早安各位小伙伴，愿大家都能有所收获。