vue 第五天（事件监听基础）

一般事件监听写的是 v-on：简化@

1、单击事件 v-on:click 简化 @click

<!--单击+1事件-->
<div id="vue_one"><h2>{{result}}</h2><button @click="increment">+1</button>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {result : 0},methods: {increment(){this.result++}}})
</script>

2、v-on 传参问题

如果传了多个参数的话没有event 我们需要将event加上个美元符号 $event

<!--单击+1-->
<div id="vue_one"><h2>{{result}}</h2><button @click="increment('qwe',$event)">+2</button>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {result : 0},methods: {increment(ev,event){console.log(ev+"/"+event)this.result++}}})
</script>

3、常用修饰符问题

3.1、阻止冒泡（.stop）

当嵌套多个div 里面有很多个点击事件的话点击一个div会调用多个数据

正常出现冒泡代码

<!--单击按钮会出现两个点击事件-->
<div id="vue_one"><div @click="div1"><button @click="button1">点我</button></div>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {result: 0},methods: {div1(){console.log("div1");},button1(){console.log("button1");}}})
</script>

添加 .stop防止出现冒泡

<body>
<!--添加冒泡.stop 已经不会出现其他点击事件-->
<div id="vue_one"><div @click="div1"><button @click.stop="button1">点我</button></div>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {result: 0},methods: {div1(){console.log("div1");},button1(){console.log("button1");}}})
</script>

3.2、阻止默认方法的执行（.prevent）

比如form表单，默认的就是会自动的进行跳转

<!--显示跳转到form表单-->
<div id="vue_one"><form><input type="submit" value="提交" @click="button1"></form>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',data: {result: 0},methods: {button1(){console.log("button1");}}})
</script>

添加属性 .prevent防止默认的方法

<!--.prevent阻止跳转了-->
<div id="vue_one"><form><input type="submit" value="提交" @click.prevent="button1"></form>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',methods: {button1(){console.log("button1");}}})
</script>

3.3、只执行一次（.once）

<!--只点击一次有效果，多次就无效果-->
<div id="vue_one"><button @click.once="button1">点我</button>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',methods: {button1(){console.log("button1");}}})
</script>

3.4、某个键盘敲击事件的监听修饰符(@keyup.键盘按钮名称) 松开按键进行监听

<!--监听某一个键盘的按键，松手监听-->
<div id="vue_one"><input type="text" @keyup.esc="keyUp">
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',methods: {keyUp(){console.log("button1");}}})
</script>

3.5、修饰符可以串联

<!--修饰符可以串联-->
<div id="vue_one"><div @click="div1"><a href="www.baidu.com" @click.stop.prevent="doThat">12345</a></div>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',methods: {div1(){console.log("div1");},doThat(){console.log("a");}}})
</script>

3.6、只能通过鼠标左右键调用函数 .left .right

<body>
<!--.left只能点击鼠标左键调用函数，.right只能点击鼠标右键调用函数-->
<div id="vue_one"><button @click.right="right">点我</button><button @click.left="left">点我</button>
</div>
<script type="text/javascript">const vm = new Vue({el: '#vue_one',methods: {right(){console.log("right");},left(){console.log("left");}}})
</script>

花开一千年,花落一千年,花叶永不见

vue 第五天（事件监听基础）相关推荐

vue学习记录-05 事件监听
vue学习记录-05 事件监听这篇文章是根据codewhy老师在b站的视频进行的学习记录文章目录 vue学习记录-05 事件监听一.v-on的基本使用二.v-on的参数问题 1.方法不需要参数 ...
vue中的v-on事件监听机制
监听dom事件使用v-on指令: v-on:事件类型="一个函数" 这个事件类型可以自定义简写: @事件类型="一个函数"⭐ 1.作用:绑定事件监听,表达式可 ...
html中事件监听的使用,Vue.JS入门篇--事件监听
你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数 ...
事件监听watch框架vue2.x与3.x都适用
前言: 目前正在学习vue或者对vue部分使用不太熟悉的可以跟着的我文章,打开编辑器,安装vue-cli一步步的练习,不会安装vue-cli脚手架的小伙伴可以先看这篇文章https://blog.cs ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
Vue学习（二）动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...
Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例
1 插值操作 1.1 Mustache语法也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...
vue用户行为收集_vue 实现移动端键盘搜索事件监听
1.首先注意,input的type="serch" 2.监听keypress事件 (1)KeyDown.KeyUp 事件这些事件是当一个对象具有焦点时按下 ( KeyDown ) ...
发布订阅模式仿写Vue事件监听手写js实现
Vue组件中,可以使用 $emit,$on,$off 分别来分发.监听.取消监听事件实现组件通信,比较方便: 最近空闲时间手撸代码实现了发布订阅模式,可以进行组件通信. 话不多说,直接上代码 /*** ...
JAVA JFrame画图基础和事件监听
JFrame画图基础和事件监听消息框 JOptionPane.showMessageDialog(mine.this, "删除不成功!"); 画图 class MyJPanel ...

vue 第五天（事件监听基础）

vue 第五天（事件监听基础）

1、单击事件 v-on:click 简化 @click

2、v-on 传参问题

3、常用修饰符问题

3.1、阻止冒泡（.stop）

3.2、阻止默认方法的执行（.prevent）

3.3、只执行一次（.once）

3.4、某个键盘敲击事件的监听修饰符(@keyup.键盘按钮名称) 松开按键进行监听

3.5、修饰符可以串联

3.6、只能通过鼠标左右键调用函数 .left .right

vue 第五天（事件监听基础）相关推荐

最新文章

热门文章

vue 第五天 （事件监听基础）

vue 第五天 （事件监听基础）

1、单击事件 v-on:click 简化 @click

2、v-on 传参问题

3、常用修饰符问题

3.1、阻止冒泡 （.stop）

3.2、阻止默认方法的执行（.prevent）

3.3、只执行一次（.once）

3.4、某个键盘敲击事件的监听修饰符(@keyup.键盘按钮名称) 松开按键进行监听

3.5、修饰符可以串联

3.6、只能通过鼠标左右键调用函数 .left .right

vue 第五天 （事件监听基础）相关推荐

最新文章

热门文章

vue 第五天（事件监听基础）

vue 第五天（事件监听基础）

3.1、阻止冒泡（.stop）

vue 第五天（事件监听基础）相关推荐