Vue事件处理

一定要注意，事件处理分两类：1. 原生事件绑定 2.组件事件监听，两种方式传参不同，特别是第二种，是获取不到event的（触发事件对象）

在template中，直接通过attribute键值对方式就可绑定事件，不需要再去获取DOM，
当然着其中真正绑定还是VM在做，最关键的在于，如果一个VM销毁，它会自动的解绑事件。
如果你做过登入注册的登入和退出登入的切换，你一定能感受的vue的强大。

监听事件

v-on 事件监听围绕这一指令展开：

1. 可直接在绑定内容是个JS代码执行，该内容和模板语法一致，注意是一个沙箱，扫描到的变量都会去vm实例上找，或者内置函数（Date等）

export default {
     
  data() {
     
    return {
     counter: 0}
  },
  // template: `

  //   buttonClickTimes: {
     {counter}}
  //   Add 1
  // 
`,
  template: `

    
      click {
      {counter}} times
    
  
`
}

2. 绑定的是一个方法，其实这个方法仍然是vm实例的一个属性，你可以通过
   vm.increaseCounter访问到

export default {
     
  data() {
     
    return {
     counter: 0}
  },
  template: `

    
      click {
      {counter}} times
    
  
`,
  methods: {
     
    increaseCounter() {
     
      this.counter++
    }
  }
}

3. 绑定传参函数

export default {
     
  data() {
     
    return {
     counter: 0}
  },
  //注意这里不会在渲染的时候就调用
  template: `

    
      click {
      {counter}} times
    
  
`,
  methods: {
     
    increaseCounter(name, event) {
     
    	//如果 v-on:click="increaseCounter" 正常绑定，那么increaseCounter方法第一个参数是event
      // name 是参数， event是事件对象（做过处理的）
      this.counter++
    }
  }
}

4. 组件怎么监听事件？
   在着之前我们应该先了解关于attribute的绑定机制。

• 为什么要template 一定要一个根元素呢

const component1 = {
     
  template: `

    component1
  
`
}

const vm = new Vue({
     
  el: '#app',
  components: {
     component1},
  template: `

    
  
`
})

//当渲染出来的DOM
/*
  

    

      component1
    
  
*/
/*
  可以注意到 class 虽然是在组件上绑定的，但是最后作用在组件的根元素上，可以想象如果没有组件根元素，那么attribute很多值是无效的（或者说DOM节点值）。
*/

/* 
  如果你有过react的学习经验，你就肯定能理解，react的props相当于参数传值，但是有趣的是react可以使用空标签或者Fragment，它相当于一个虚拟的DOM，只存在于内存（DOM树上绑定VM实例），但是不展示而已，但是作用在组件标签上的属性不会传递给组件根元素，永远只是参数的传递
*/

• props有过滤功能，其实props也可以接受所有值，但是这样会非常的麻烦。
• 事件监听是监听整个子VM的事件，然而VM实例本身没有事件抛出，所以需要处理事务，并向上抛出冒泡事件。

const vModelInput = {
     
  props: ['value', 'name'],
  template: `

    
  
`,
  methods:{
     
    input(event) {
     
      //event.target 就是获取的表单框元素
      //注意第一个参数的名字就是抛出自定义组件事件的名称，组件标签要绑定事件是，必须v-on:proname监听
      this.$emit('input', event.target.value)
    }
  }
}

const vm = new Vue({
     
  el: '#app',
  data: ()=>({
     
    value: ''
  }),
  components: {
     vModelInput},
  // 第一种
  template: `

    name: {
      {value}}
    
  
`,
  //第二种
  template: `

    
  
`
})

• 其实上面的例子已经带大家手动写了一个v-model指令该如何做了，但是你又了解v-model怎么运作的吗，或者说怎么改变绑定

const myModelComponent = {
     
  //v-model 绑定的属性值为传入给props名字叫做checked的属性并赋值，当事件change发生时，通知父组件改变v-model绑定的属性，实现数据双向绑定
  model: {
     prop: 'value', event: 'input'},
  props: {
     
    checked: String,
    name: String
  },
  template: `

    
    {
      {name}}
  
`
}

附录

要学习计算属性和侦听器的小可爱点击这里 vue之计算属性和侦听器
要学习动态事件绑定点击这里 Vue之动态事件绑定