vue.js基础-处理用户输入与双向数据绑定

处理用户输入

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

html代码：

<div id="app-5">
<p>{{ message }}</p>
<!--v-on 指令 来增加一个点击事件监听器-->
<button v-on:click="reverseMessage">翻转 message</button>
</div>

JavaScript代码：

//Vue实例
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
//methods 下定义方法
methods: {
reverseMessage: function () {
//在这里this指的是Vue这个根实例，
//split() 方法用于把一个字符串分割成字符串数组。
//reverse() 方法用于颠倒数组中元素的顺序。
//join() 方法用于把数组中的所有元素放入一个字符串。
this.message = this.message.split('').reverse().join('')
}
}
})

运行结果：点击按钮之后，字符串的顺序会颠倒。Hello Vue.js!变为！sj.euV olleH。

总结：为了让用户和你的应用程序进行交互，我们可以使用 v-on 指令 来增加事件监听器，触发事件后会调用 Vue 实例中 methods 下定义的方法。

双向数据绑定

v-model 指令，使得表单输入和元素数据之间的双向绑定。

html代码：

<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>

JavaScript代码：

var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})

运行结果：输入框中的内容与元素中的文本内容一样，当输入框的内容改变时，元素中的文本内容实时更新

总结：v-model 指令，使得表单输入和应用程序状态之间的双向绑定变得轻而易举