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