vue2.0学习笔记（事件处理）

bovenson 发布于2019-08-23 18:35 / 2861人阅读

摘要：请记住，会告诉浏览器你不想阻止事件的默认行为。而单单释放也不会触发事件。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。当一个被销毁时，所有的事件处理器都会自动被删除。

1、监听事件

用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。


  
  The button above has been clicked {{ counter }} times.

2、事件处理方法

许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。


  
  


var example2 = new Vue({
  el: "#example-2",
  data: {
    name: "Vue.js"
  },

  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert("Hello " + this.name + "!")
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

3、内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：


  
  


new Vue({
  el: "#example-3",
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

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



methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

4、事件修饰符

事件修饰符是由点开头的指令后缀来表示的。

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式【实现捕获触发事件机制】

.self 只有当事件在该元素本身触发时触发回调【只有点击当前元素，才会触发事件处理函数】

.once 事件只触发一次 .passive

.stop和.self的区别：.self只会组织自己身上冒泡行为的触发，并不会真正组织冒泡行为。

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on：click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

5、按键修饰符

监听键盘事件时，在监听键盘事件时添加按键修饰符：

5.1 按键码

.enter

.tab

.delect

.esc

.space

.up

.down

.left

.right

自定义全局按键修饰符 Vue.config.keyCodes.f2 = 113
通过 Vue.config.keyCodes.名称 = 按键值来自定义按键修饰符别名

6、系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

.ctrl

.alt

.shift

.meta




Do something

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

6.1 .exact修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

6.2 鼠标按键修饰符

.left

.right

.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

7、为什么在HTML中监听事件

因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。因为你无须在 JavaScript 里手动绑定事件，

你的ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

当一个 ViewModel被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105484.html

vue2.0学习笔记（表单输入绑定）

摘要：复选框当选中时当没有选中时这里的和特性并不会影响输入控件的特性，因为浏览器在提交表单时并不会包含未被选中的复选框。 1、基础用法 v-model指令可以实现表单元素和Model中数据的双向数据绑定。只能运用在表单元素中（input、radio、text、address、email、select、checkbox、textarea）可以用 v-model 指令在表单、及元素上...

Seay 2019-08-23 18:35 评论0 收藏0
vue2.0学习笔记（组件基础）

摘要：组件的复用你可以将组件进行任意次数的复用注意当点击按钮时，每个组件都会各自独立维护它的。 1、基本示例 // 定义一个名为 button-counter 的新组件 Vue.component(button-counter, { data: function () { return { count: 0 } }, template: You cli...

mingzhong 2019-08-23 18:36 评论0 收藏0
Vue2.0 学习笔记

摘要：父子组件通信父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。是一个对象而不是字符串数组时，它包含验证要求。状态管理由于多个状态分散的跨越在许多组件和交互间，大型应用的复杂度也随之增长。提供了，可以通过文档学习。什么是vue vue是一个前端框架，主要两个特点：数据绑定、组件化。安装环境根据教程安装环境：node.js、npm、webpack、vue-cli主要的命...

cgh1999520 2019-08-21 11:25 评论0 收藏0
Vue2.0实用笔记

摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

draveness 2019-08-23 16:09 评论0 收藏0
Vue2.0实用笔记

摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

maochunguang 2019-08-02 16:08 评论0 收藏0