vue.js 处理用户输入
为了让用户与您的应用进行交互,我们可以使用v-on指令附加事件侦听器,以在实例上调用方法:
<div id="event-handling">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
const EventHandling = {
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(EventHandling).mount('#event-handling')
请注意,在此方法中,我们无需触摸DOM就可以更新应用程序的状态-所有DOM操作均由Vue处理,并且您编写的代码集中在基础逻辑上。
Vue还提供了一个v-model指令,使表单输入和应用程序状态之间的双向绑定变得轻而易举:
<div id="two-way-binding">
<p>{{ message }}</p>
<input v-model="message" />
</div>
const TwoWayBinding = {
data() {
return {
message: 'Hello Vue!'
}
}
}
Vue.createApp(TwoWayBinding).mount('#two-way-binding')
免费源码下载地址:http://github.crmeb.net/u/defu