VUE 入坑系列 一 事件

html代码

<div id="app">
  <button v-on:click="counter += 1">加1</button>
  <button @click="counter += 1">加2</button>
  <button v-on:click="minusOne">减1</button>
  <button @click="minus(2,$event)">减2</button>
    <p>当前值: {{ counter }} </p>
  </div>

javascript代码

var vm = new Vue({
  el: "#app",
  data: {
    counter: 0
  },
  methods: {
    minusOne() {
      this.counter--;
    },
    minus(number,event) {
      this.counter = this.counter - number;
    }
  }
});

说明

1) v-是指令

2) v-on是绑定事件,可以简写成@click

3 )  传参数的事件方法

事件修饰器

<!-- 阻止点击事件的冒泡行为 -->

<a v-on:click.stop="doThis"></a>

<!-- 阻止默认的表单提交 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 事件修饰器可以连用 -->

<a v-on:click.stop.prevent="doThat">

<!-- 只需要修饰器,而无需处理方法 -->

<form v-on:submit.prevent></form>

<!-- 使用 capture 模式-->

<div v-on:click.capture="doThis">...</div>

<!-- 仅当event.target是自身的时候才执行 -->

<!-- 比如,这样写了之后点击子元素就不会执行后续逻辑 -->

<div v-on:click.self="doThat">...</div>

按键修饰符

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

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->

<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

<!-- 同上 -->

<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->

<input @keyup.enter="submit">

全部的按键别名:

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

// 可以使用 `v-on:keyup.f1`

Vue.config.keyCodes.f1 = 112

原文地址:https://www.cnblogs.com/dahuo/p/9641953.html

时间: 2024-11-08 21:34:07

VUE 入坑系列 一 事件的相关文章

VUE 入坑系列 一 双向绑定

html代码 <div id="app"> <p>{{message}}</p> <span>message1</span> <input v-model="message"> <span>message2</span> <input v-model="message"> </div> javascript代码 var vm =

gulp入坑系列(2)——初试JS代码合并与压缩

在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/6159809.html 在之前建立的项目中写入,在根目录新建js文件夹,并在文件夹中新建两个js文件,代码如下: index.js: var index={}; index={ test:function(argument){ console.log('test'); } } index.test()

vue入坑总结

1.Do not mount Vue to <html> or <body> - mount to normal elements instead. Vue2.x之后不推荐挂载vue实例到<html>和<body>上: 2.Vue2.x在loader上不支持直接书写!style!css!style.css:应该为都为每个loader添加一个-loader: 3.vue2.x在webpack打包上,直接将main指向vue.common.js:(有待补充);在

gulp入坑系列(3)——创建多个gulp.task

继续gulp的爬坑路,在准备get更多gulp的具体操作之前,先来明确一下在gulp中创建和使用多个task任务的情况. gulp所要做的操作都写在gulp.task()中,系统有一个默认的default任务,如下: var gulp = require('gulp');//gulp自身 gulp.task('default',['task1','task2'], function() { // 将你的默认的任务代码放在这 console.log("default"); }); 在命令

vue 入坑02 解析webpack的编译打包

上一章介绍了vue项目的搭建,里面自动集成了webpack 的部署和打包. webpack 其实就是一个javascript 程序的模块打包器.主要包括四部分:01 入口(entry) 02 输出(output) 03 loader 04 插件 plugins

1-STM32带你入坑系列(STM32介绍)

由于自己的物联网开发板上的单片机是用的STM32,但是有些朋友没有用过,所以我将用这块开发板,带着大家入门STM32 先介绍一下STM32,我是在大三下学期的时候开始接触STM32,当时是想做一个小车,要用摄像头,所以学习了STM32. 大家可以看我的这一系列的文章  https://www.cnblogs.com/yangfengwu/category/802676.html 说一下哈,如果学单片机的,最好要学习一下STM32,因为现在大部分公司都在用,或者这个系列的,或者都是Cortex-M

Swift入坑系列—集合类型

数组(Arrays) 字典(Dictionaries) 数组(Arrays) 在OC里面,NSArray和NSMutableArray这两个类可以存储任意类型的对象,并且不提供所返回对象的任何特别信息.在Swift中,数据值被存入某个数组之前类型必须明确.方法是通过显式的类型标注或者类型推断,而且不是必须是class类型. //定义了一个存储 字符串类型 的可变数组('var'字段修饰) var shoppingList: [String] = ["Eggs", "Milk&

web前端入坑第四篇:你还在用 jQuery?

web前端入坑第四篇:你还在用 jQuery? 大妈都这么努力,我们有几个人回家还看书的? 先来补齐[web前端入坑系列]前三篇的连接web前端入坑系列:点击标题进入第一篇: web 前端入坑第一篇:web前端到底是什么?有前途吗第二篇: web前端入坑第二篇:web前端到底怎么学?干货资料!第三篇:web前端入坑第三篇 | 一条"不归路" - 学习路线! 再说这个话题之前,我们先来扫盲普及一下 [jquery] 到底是什么以及它火爆将近十年的重要原因. [ 重新认识 - Jquery

web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知,不问自晓,古今行事,未之有也 」 我们都知道如今流行的框架:Vue.Js.AngularJs.ReactJs.已经逐渐应用到各个项目和实际应用中,它们都是MVVM数据驱动框架系列的一种. 在了解MVVM之前,我们先回想一下前端发展的历史阶段,做到心中有数,才会更好理解. 这段回想历史.由于网上就可查不少资料,