第三章 VUE事件处理（1）

为什么在 HTML 中监听事件? 这里我引用了vue官方说描述的：

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
我们先看一个DEMO, 在VUE中，v-on:click 可简写为 @click; 下面的demo里，input 元素绑定setFunc方法

<template>
  <div class="hello">
      <input type="button" value="测试1" @click="setFunc(123)" />
      <hr />
      <input type="button" value="测试2" v-on:click="setFunc(123)" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      setFunc(data){
        alert(data);
      }
    }
  }
}
</script>

一般情况下，我们会将属性，对象等放到data() 中，将方法单独放到methods中，看下面的DEMO

<script>
export default {
  data () {

  },
  methods: {
    setFunc(data){
      alert(data);
    }
  }
}
</script>

在methods 中的方法里，我们可以通过this.访问data里的属性，对象等。

<template>
  <div class="hello">
      <input type="button" value="获取消息" v-on:click="getMsg()" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg:'测试消息'
    }
  },
  methods: {
    getMsg() {
      alert(this.msg);
    }
  }
}
</script>