Vue-方法与事件
基本用法
监听点击事件
v-on
缩写：@ 预期：Function | Inline Statement | Object 参数：event 修饰符： .stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
用法： 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。 在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click="handle('ok', $event)"。 从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。 示例： <!-- 方法处理器 -->
<button v-on:click="doThis"></button> <!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button> <!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 -->
<button @click="doThis"></button> <!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button> <!-- 停止冒泡 -->
<button @click.stop="doThis"></button> <!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form> <!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)： <my-component @my-event="handleThis"></my-component> <!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component> <!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<template v-if="type === 'name'">
<label> nickname :</label>
<input placeholder="your username" key="name-input">
</template>
<template v-else>
<label>email:</label>
<input placeholder="your email" key="email-input">
</template>
<button @click="handleToggleClick">change type</button>
<br>
点击次数: {{ counter }} <button @click= "counter++" > +1</button>
<button @click= "counter--"> -1</button>
<button @click="rerest"> 重置</button>
<br>
<!-- <ul>
<li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
</ul> -->
<ul>
<template v-for="book in books">
<li>书名:{{book.name}}</li>
<li>作者:{{book.author}}</li>
</template>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data: {
counter: 0,
type: 'name',
books:[
{name: '富婆秘籍',
author: 'bx'
},
{name: '富婆通讯录',
author: 'bx'
},
{name: '如何让富婆爱上你',
author: 'bx'
}]
},
methods: {
handleToggleClick: function() {
this.type = this.type ==='name'? 'mail': 'name';
},
rerest: function () {
this.counter = 0;
}
}
})
app.books.push({
name: '如何让富婆迷恋你',
author: '净扯淡'
}),
// app.books.splice(3,1,{
// name: '如何PUA富婆',
// author: '[法] 奥利给'
// })
app.$set(app.books, 3, {
name: '如何PUA富婆',
author: '[法] 奥利给'
})
// app.books = app.books.filter(function (item) {
// console.log(item);
// return item.name.match(/爱/);
// })
</script>
</body>
</html>
如果不想在事件上带参数就在方法中规定事件的参数
这样设置 就可以在调用时不带括号
Before： <button @click= "handleAdd（10）"> + 10</button>
After： <button @click= "handleAdd"> + 10</button>
handleAdd: function(count) {
count = 10;
// this 指向前Vue实例app
this.counter += count;
},
修饰符
Vue-方法与事件的更多相关文章
- Vue方法与事件
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson10 一 vue方法实现 <!DOCTYPE html> ...
- 详解Vue 方法与事件处理器
本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...
- Vue 方法与事件处理器
按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 时调用 vm.submit() --> ...
- React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- Vue中的事件与常见的问题处理
Vue的事件:获取事件对象$event: 事件冒泡:事件会向上传播 原生js阻止事件冒泡,需要先获取事件对象,再调用stopPropagation()方法: vue事件修饰符stop,例@clik.s ...
- vue教程1-04 事件 v-on:click="函数"
vue教程1-04 事件 v-on:click="函数" v-on:click/mouseout/mouseover/dblclick/mousedown..... 实例:为d ...
- Vue 实例之事件 操作样式 （文本、事件、属性、表单、条件）指令
Vue 可以独立完成前后端分离式web项目的JavaScript框架 三大主流框架之一: Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲 ...
- 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue_(基础)Vue中的事件
Vue.js中文文档 传送门 Vue@事件绑定 v-show:通过切换元素的display CSS属性实现显示隐藏: v-if:根据表达式的真假实现显示隐藏,如果隐藏,它绑定的元素都会销毁,显示的时候 ...
- Kendo UI for jQuery使用教程：方法和事件
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
随机推荐
- 淘宝二面：千万级数据中如何用Redis维护热点数据"？
MySQL里有千万条数据,但是Redis中只存10万的数据,如何保证redis中的数据都是热点数据? 我是小宋, 一个只熬夜但不秃头的Java程序员.关注我,带你轻松过面试.提升简历亮点(14个dem ...
- Python优雅遍历字典删除元素的方法
在Python中,直接遍历字典并在遍历过程中删除元素可能会导致运行时错误,因为字典在迭代时并不支持修改其大小.但是,我们可以通过一些方法间接地达到这个目的. 1.方法一:字典推导式创建新字典(推荐) ...
- 算法金 | Transformer，一个神奇的算法模型！！
大侠幸会,在下全网同名「算法金」 0 基础转 AI 上岸,多个算法赛 Top 「日更万日,让更多人享受智能乐趣」 抱个拳,送个礼 在现代自然语言处理(NLP)领域,Transformer 模型的出现带 ...
- awk脚本结合shell使用
需求:判断hadoop用户是否存在**************************************************#!/bin/bashresult=`awk -F ": ...
- 【AppStore】一文让你学会IOS应用上架Appstore
前言 咱们国内现在手机分为两类,Android手机与苹果手机,现在用的各类APP,为了手机的使用安全,避免下载到病毒软件,官方都极力推荐使用手机自带的应用商城进行下载,但是国内Android手机品类众 ...
- Windows Android 子系统（WSA）安装
除了Linux子系统WSL,微软还提供了安卓子系统WSA.不过对国内好像不太友好,安装也不方便. 这里说一下我的安装方法,但是可能时效性很强,现在是2022-01-20,如果日期离得太远可能不好使. ...
- 灰色预测GM(1,1)模型的理论原理
灰色预测是对时间有关的灰色过程进行预测.通过建立相应的微分方程模型,从而预测事物未来发展趋势的状况. 由于笔者的水平不足,本章只是概括性地介绍GM(1,1)模型的理论原理,便于对初学者的初步理解 目录 ...
- win10打不出中文的修复方法！
说明 在Win10系统中,默认自带了中文输入法,使用起来非常的方便,但有时win10系统中自带的输入法会打不出中文的情况,该怎么办呢?遇到这样的问题,我们可以参考下本文中的方法来修复. 步骤: cmd ...
- Vue 数组和对象更新，但视图未更新，背后的故事
在实际开发中,遇到遍历数组和对象,当property 发生改变时,并没有触发视图的更新今天来浅显的聊聊这背后的故事,有说的不对地方,还望指出! 本人博文地址:https://www.cnblogs.c ...
- oeasy教您玩转vim - 42 - # 剪切进入
剪切进入 回忆上节课内容 上次我们了解到了各种寄存器 :reg 无名寄存器"" 数字寄存器"0-"9 行内删除专用寄存器"- 指定寄存器" ...