为了让用户和你的应用进行互动,可以用 v-on
指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法:
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div>
var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
![image image](https://i-blog.csdnimg.cn/blog_migrate/8b8f75ebfd1d00922dfddb356f080891.png)
点击按钮:
在 reverseMessage
方法中,在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理,写的代码只需要关注基本逻辑。
Vue 也提供了 v-model
指令,它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div>
var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } })