vue事件绑定处理,vue的组件详解

佚名 6年前 (2019-04-09) 随笔 977人围观抢沙发百度已收录

事件监听指令

v-on 指令监听 DOM 事件来触发一些 JavaScript 代码，通常是触发一个函数，简写@

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

<template>
  <div id="app">
    <button @click="count += 1">点击加1</button>
    <p>这个按钮被点击了{{count}}次</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      count: 0
    }
  }
}
</script>

方法事件处理器

许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。

<template>
  <div id="app">
    <button @click="counter">点击加1</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: 'vue'
    }
  },
  methods: {
    counter () {
      console.log('hello' + name)
      console.log(event.target)
    }
  }
}
</script>

内联处理器方法

除了直接绑定到一个方法，也可以用内联 JavaScript 语句, 当不传参数时默认会有一个evnet（当前点击的事件）。如果传入了参数，那么默认的原生DOM就不存在了，

<template>
  <div id="app">
    <button @click="counter('say')">点击加1</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: 'vue'
    }
  },
  methods: {
    counter (event) {
      console.log(event) // 方法里传了参数默认的event对象就不见了
    }
  }
}
</script>

特殊变量 $event

当方法中传入其他参数，那么如果还需要原生DOM事件的话需要手动传入一个特殊的变量$event，才能获取到事件对象

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法

<template>
  <div id="app">
    <button @click="counter('say', $event)">点击加1</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: 'vue'
    }
  },
  methods: {
    counter (message, event) {
      console.log(message)
      if (event) {
        console.log(event)
      }
    }
  }
}
</script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题， Vue.js 为 v-on 提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()

once修饰符：不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上，点击事件将只会触发一次也就是说第一次触发事件后，之后再点击都不会触发

<template>
  <div id="app">
    <!--prevent阻止了a标签默认跳转的事件-->
    <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
    <div style="width: 200px;height: 200px;background: red" @click="test5">
      <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
    </div>
    <button @click.once="test7">点击只触发一次</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: 'vue'
    }
  },
  methods: {
    test4 () {
      alert('点击了链接')
    },
    test5 () {
      alert('out')
    },
    test6 () {
      alert('inner')
    },
    test7 () {
      alert('点击只触发一次')
    }
  }
}
</script>

点击百度一下不会跳转，点击蓝色部分触发test6方法，点击红色部分触发test5方法，点击只触发一次按钮一次之后不会在触发

按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<template>
  <div id="app">
    <input type="text" @keyup.13="test7">
    <input type="text" @keyup.enter="test7">
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: 'vue'
    }
  },
  methods: {
    test7 () {
      alert('按回车键了')
    }
  }
}
</script>

按键修饰符和事件修饰符一起使用，下面案例第一次在输入框输入数据之后，回车会触发一次，之后再也不会触发

<input type="text" @keyup.enter.once="test7">

vue还提供了其他按键别名——记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名

.enter 、.tab 、.delete (捕获 “删除” 和 “退格” 键) 、.esc 、.space 、.up 、.down 、.left 、.right

新版本新增按键修饰符（多种按键和点击和修饰符组合）

可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。

.ctrl 、.alt 、.shift 、.meta

注意：在Mac系统键盘上，meta对应命令键 (⌘)。在Windows系统键盘meta对应windows徽标键(⊞)。在Sun操作系统键盘上，meta对应实心宝石键 (◆)。在其他特定键盘上，尤其在MIT和Lisp键盘及其后续，比如Knight键盘，space-cadet键盘，meta被标记为“META”。在Symbolics键盘上，meta被标记为“META” 或者 “Meta”。