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 指令，使得表单输入和应用程序状态之间的双向绑定变得轻而易举