事件

点击按钮, 鼠标移入移除,按下键盘等都属于JavaScript的DOM事件
在Vue中,可以使用一个特殊的指令来绑定这些事件

v-on指令

• 作用类似于JS的addEventListener()
• 用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码

v-on语法

v-on:事件名称='函数名称()'

• 简写语法：@事件名称='函数名称()'
  • 注: @和事件名称之间不要有空格
• 事件名称: 例如 click, mouseover等DOM事件
• 函数名称: 调用在methods里定义的函数

补充说明

• v-on也可以直接写入JS代码,例如:

  <div id="app">
    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了  次。</p>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      counter: 0
    }
  })
  </script>
  

结论:

• 许多事件处理的逻辑都很复杂，应避免直接把 JavaScript 代码写在 v-on 指令中.

• v-on 可以接收一个定义的方法来调用

Vue实例中methods对象

• 定义方法:

注: 不能使用ES6的箭头函数来定义 method 函数(this)

var vm = new Vue({
  el: '#box',
  data: {},
  methods: {
      fn: function() {} 
  }
});

基本用法

调用函数

• 函数中访问data中的变量和函数
  • vue实例中的this 关键字代表该vue实例
  • 可通过this.变量名的方式来访问变量（原因：vue实例代理data的所有属性）
  • 可通过this.函数名()的方式来调用实例中的方法

<div id="app">
   <!-- `sayHi` 是在methods里定义的方法名 -->
  <button v-on:click="sayHi">Hi</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    name: '小星',
    age: 22
  },

<!--在 `methods` 对象中定义方法-->
  methods: {     
    sayHi: function (event) {
      <!--`this` 在方法里指当前Vue 实例app-->
      console.log(this.name + '的年龄是' + this.age)
    }
  }
})
<!--在控制台直接调用方法-->
app.sayHi()  // 小星的年龄是22
</script>

案例：删除任务