vue v-on指令 处理用户输入

为了让用户和你的应用程序进行交互

v-on 指令 来增加事件监听器，触发事件后会调用 Vue 实例中 methods 下定义的方法

<div id="app5">
<p>{{messa_ge}}</p>
<button v-on:click="reverseMessage()">翻转文字hello Vue!</button>
</div>

<script type="text/javascript">
new Vue({
el: '#app5',
data: {
messa_ge: 'Hello Vue.js!'
},
methods: {
reverseMessage: function() {
this.messa_ge = this.messa_ge.split('').reverse().join('')
}
}
})
</script>

reverseMessage 方法中，更新了应用程序的状态，而无需触及 DOM ,所有的 DOM 操作都由 Vue 来处理，你所编写的代码只需要关注于底层逻辑。