Vue:事件v-on / 表单校验

更多
2021年04月06日 17点54分 作者:叶飞 修改

v-on

指令v-on:后面直接跟事件名,比如:click/change/focus/blur/mouseover/keyup……

引号("")中指令的值可以是:

JavaScript表达式

比如:
<h1 v-on:click="counter++" id="yz-hello">{{counter}}</h1>
但counter只能是vue data中的值:
data: {
    counter: 1
},
演示:声明一个全局变量n,click中n++仍然报错。

方法名

当handler的逻辑变得复杂,就需要将其封装到一个方法中:

methods: {
    plus: function () {
        this.counter++;
    }
}

模板中调用:(一样不能是vue外部的function)

<h1 v-on:click="plus" id="yz-hello">{{counter}}</h1>
注意:v-on:click的值只是方法名,没有圆括号。

内联(inline)方法

但是,v-on:click的值中,方法名后面加上圆括号也没问题:
<h1 v-on:click="plus()" id="yz-hello">{{counter}}</h1>

这实际上就是一个方法调用表达式,和只写方法名一样一样的!^_^


this和event

在传统的JavaScript事件处理函数中,this指的是触发事件的HTML元素。

但在vue的methods中,this显然指代的是vue的当前实例。这虽然符合JavaScript语法,但要获取事件触发的HTML元素,怎么办呢?

从event中获得,根据内容不同:

方法名

如果模板中v-on:后跟的只是一个方法名,那么methods中方法(回调函数)可以带一个event参数:
plus: function (event) {
    event.preventDefault();
    console.log(event.target);
    this.counter++;
}
这里的event和传统的JavaScript事件回调函数中的event一致,都是指的原生DOM事件。

内联方法

当模板中v-on:后跟的是一个方法调用时,可以将 $event(Vue实例属性)作为参数传入:
<h1 v-on:click="plus($event)" id="yz-hello">{{counter}}</h1>

这样,methods中plus也中也能拿到event。

演示:v-on:click="plus()"时,methods中event为undefined


事件修饰符

表单绑定时类似,都是在事件名之后添加以点(.)开头的指令后缀:

  • .prevent:阻止默认事件
    <a href="http://17bang.ren" v-on:click.prevent="plus($event)" id="yz-hello">{{counter}}</a>
  • .stop:阻止单击事件继续传播
  • .self:只当在 event.target 是当前元素自身时触发处理函数
  • .capture:使用捕获机制(默认冒泡)
    演示用代码:
    div {
        border: 1px solid;
    }
    <div v-on:click="outer" style="padding:40px;" id="yz-hello">
        <div v-on:click="inner">inner</div>
    </div>
    outer: function (event) {
        console.log('outer:');
    },
    inner: function (event) {
        console.log('inner');
    }
  • .once:只会触发一次
  • .passive:提升滚动事件移动端的性能

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.inner()` -->
<input v-on:keyup.enter="inner">

新增系统修饰键

<!-- Alt + C -->
<input v-on:keyup.alt.67="inner">


纯粹 vs 包容

习惯于原生JavaScript或者JQuery事件绑定机制的同学可能还在等……

下面呢?下面没了,^_^Vue没有提供在JavaScript中找到某个DOM节点,然后对其绑定事件的机制。

在 HTML 中监听事件不是违背了关注点分离 (separation of concern)原则么?

PS:提这个问题的同学一定不是从头跟着飞哥学的……

软件工程哲学:

  • 要不要纯粹?纯CSS,纯面向对象,纯……
  • 什么是工程:利用一切现有技术,解决当前面临的具体问题
  • 利弊权衡,因地制宜
  • ……

具体到Vue的事件机制(官方解释),飞哥的补充:

  • 关注分离的最终目的是什么?分工明确
  • Vue的写法有没有影响到这个目的?
  • 区分模板和最终生成的HTML:v-on:是加在模板上的

大赞!实际上,有很多问题,100%严格执行并无必要




其他


vue会把html中的attribute值自动更换成小写的:Vue.js模板中使用$emit没反应


找到了:oninput事件


data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}
Vue.js 事件
赞: 0 踩: 0

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 0

Web前端


HTML和CSS

HTML最常用的标签和属性,含HTML5的语义标签和新属性,但不包含需要JavaScript操作的HTML5 API,以及CSS基础(简述CSS 3动画相关),以及bootstrap.js以外的Bootstrap的内容。

Javascript入门

Javascript的基本语法:为能使用JQuery和Bootstrap.js的使用打下基础

ES进阶

借助于ES6,讲解JavaScript中一些更复杂的语法特性,如作用域、闭包、面向对象、原型链、this变化、module等

JQuery和Bootstrap

JQuery类库(含Ajax),以及Bootstrap的JavaScript组件部分

Vue.js

全部
关键字



帮助

反馈