为了让用户和你的应用程序进行交互
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 来处理,你所编写的代码只需要关注于底层逻辑。