Vue介绍 --- 处理用户输入

处理用户输入

与用户交互进行是通过监听事件，在传统js中，我们获取DOM，通过addEventListener(),来监听用户的点击，文字输出，鼠标移动等等动作，从而触发不同的程序来响应用户的操作。

var input  = document.getElementById("input");
input.oncick = function(){
    console.log("点击了这个input")
}

Vue中同样是通过这方式，但是在Vue中，并不推荐我们直接通过获取DOM绑定事件，而是通过v-on:eventName简写@eventName方式绑定函数进行处理用户的操作。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

而Vue在渲染页面生成DOM的时候，就会对这个DOM绑定对应的绑定的事件。

在上面官方例子中，v-on:click="reverseMessage",其中click是监听的是动作名称，reverseMessage是对应的回调处理函数。

但是，Vue扩展了事件监听，这里不仅可以监听click,change,mouseover这些原生的事件，还更简单的自定义事件，例如@dlyclick，通过this.$emit("dlyclick")来触发这些事件。

在处理这些交互的时候，需要注意的是，我们不操作直接操作DOM ，在Vue中，我们只关注状态改变的，通过逻辑改变状态，所有的 DOM 操作都由 Vue 来处理，我需要做的只是用过指令绑定这些操作。