精华内容
下载资源
问答
  • 事件修饰符
    2021-04-15 20:34:07

    事件修饰符
    顾名思义,“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符,修饰符是由点开头的指令后缀来表示的。

    事件修饰符有:

    .stop阻止冒泡
    .prevent阻止默认事件
    .capture添加事件侦听器时使用事件捕获模式
    .self只当事件在该元素本身(不是子元素)触发时回调
    .once事件只触发一次

    1.阻止冒泡

    <div id="app" @click=clickDiv()>
       <button @click="clickButton()">点击</button>
    </div>
    <script>
       var vm=new Vue({
          el:"app",
          data:{},
          methods:{
             clickDiv(){
                console.log("点击了div")
             },
             clickButton(){
             console.log("点击了button")
             }
          }
       })
    </script>
    

    当点击按钮的时候,浏览器控制台除了会输出“点击了button”还会输出“点击了div”,这是因为button按钮是div里的元素节点,当你点击button的时候,事件会向上冒泡,触发包含它的父元素所定义的事件,这就是冒泡事件。
    如果想阻止冒泡事件就需用到“.stop”修饰符。

    <button @click.stop="clickButton"></button>
    

    2.阻止默认事件
    什么是默认事件?如:点击a链接自动进行跳转、点击submit按钮自动提交表单等。
    这里以a链接为例:

    <body>
       <div id="app">
          <a href="https://www.baidu.com" @click.prevent="linkclick()">有问题,问百度</a>
       </div>
       <script>
          new Vue({
             el:"app",
             data:{},
             methods:{
                linkclick(){
                   console.log("点击了a链接")
                }
             }
          })
       </script>
    </body>
    

    加上.prevent修饰符后,a链接不能进行跳转,但是仍然可以触发click事件。

    3.事件捕获
    还记得冒泡事件中触发的顺序吗?即:先触发button按钮的点击事件,然后再触发button父元素div的点击事件;如果我想点击button之后先触发父元素div的点击事件,然后再触发子元素button的点击事件呢?

    <div id="app" @click.capture="clickDiv">
       <button @click="clickButton"点击></button>
    </div>
    

    即:在事件触发中进行捕获,优先执行含有".caputre"修饰符的事件。

    4.只当事件在该元素本身触发时触发回调

    <div id="app" @click.self="clickDiv">
       <button @click="clickButton">点击</button>
    </div>
    

    我们在父元素div里加了".self",这样父元素的点击事件只有在点击自身元素的情况下才可以触发,点击其他任何元素(如子元素button)都不会触发包含修饰符".self"的元素事件。

    5.事件只触发一次

    <body>
       <div id="app">
          <a href="https://www.baidu.com" @click.prevent.once="clicklink">有问题,问百度</a>
       </div>
       <script>
          el:"#app",
          data:{},
          methods:{
             clicklink(){
             console.log("点击了a链接")
             }
          }
       </script>
    </body>
    
    • 这里a链接点击事件使用了两个事件修饰符,说明事件修饰符可以并列使用。
    • 这里的修饰符".once"的作用是让默认阻止行为(.prevent)只生效一次,所以当我们第一次点击a链接的时候,浏览器控制台会输出"点击了a链接",但是页面不会跳转,当我们再次点击a链接的时候页面会跳转到百度页面,这就是".once"修饰符的作用。
    • “.prevent"和”.once"的位置调换后,即:@click.once.prevent=“clicklink()”,执行的结果是不一样的。
    更多相关内容
  • 之前关于vue事件修饰符和按键修饰符的一点分析,最近需要回顾,就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现...
  • 不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这一利器,使我们可以便捷的处理 DOM 事件,本章,一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作。 仓储地址: ...
  • 已弃用JSX的事件修饰符:改为查看https://github.com/vuejs/jsx。此babel插件在JSX中添加了一些语法糖。...[” jsx-event-modifiers“,” transform-vue-jsx“]}事件修饰符示例:export default {render(){return
  • 主要给大家介绍了关于Vue事件修饰符native、self的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • .capture事件修饰符的作用添加事件侦听器时使用事件捕获模式 即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。 就是谁有该事件修饰符,就先触发谁。 ...
  • 事件修饰符 在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。 .stop 阻止单击事件传播 即阻止了事件冒泡,相当于调用了event.stopPropagation方法(通俗讲就是阻止事件...

    事件修饰符

    在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

    .stop

    阻止单击事件传播 即阻止了事件冒泡,相当于调用了event.stopPropagation方法(通俗讲就是阻止事件向上级DOM元素传递)

    <div @click="show(1)">
      <div @click="show(2)">测试</div>
    </div>

    点击“测试”输出 

    <div @click="show(1)">
      <div @click.stop="show(2)">测试</div>
    </div>

    点击“测试”输出


    .prevent

    阻止了事件默认行为,相当于调用了event.preventDefault方法

    默认事件指对DOM的操作会引起自动执行的动作,比如点击超链接的时候会进行页面的跳转,点击表单提交按钮时会重新加载页面等,使用".prevent"修饰符可以阻止这些事件的发生。

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>

     .capture

    捕获冒泡,即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行,然后再按自然顺序执行触发的事件。(让事件触发从包含这个元素的顶层开发往下依次触发)

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>

     .once

    2.1.4新增

    设置事件只能触发一次,比如按钮的点击等。

    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>

      .self

    注意:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div @click.self="doThat">...</div>

     .passive

    2.3.0新增

    该修饰符大概意思用于对DOM的默认事件进行性能优化,根据官网的例子比如超出最大范围的滚动条滚动的。

    以移动端监听元素滚动事件说明,在监听元素滚动事件的时候,会一直触发onscroll事件让页面变的越来越卡,因此在我们使用这个修饰符后,相当于给onscroll事件增加了.lazy修饰符

    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成  -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <div v-on:scroll.passive="onScroll">...</div>

    不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你想阻止事件的默认行为。 


     .native

    在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触 发的。

    让组件变成像html内置标签那样监听根元素的原生事件,否则组件上使用v-on只会监听自定义事件

    按键修饰符

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

    键盘修饰符用来修饰键盘的事件(如:onkeyup、onkeydown等),键盘的事件触发需要相对应的keyCode。然而keyCode存在很多,因此为了使用方便Vue给我们提供了别名的修饰符,分为以下两种:

    普通按键(enter、delete、space、tab、esc…)

    系统修饰键(ctrl、shift、alt…)

    也可以直接用按键的代码来做修饰符(如:enter为13)

    <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
    <!-- 键修饰符,键别名 -->
    <input @keyup.enter="submit">
    <!-- 键修饰符,键代码 -->
    <input @keyup.13="onEnter">

    为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

    • .enter
    • .tab
    • .delete (捕获“删除”和“退格”键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right

    同样vue监听按键事件也可以添加其他的按键:只要加上相应的按键的名称就行了

    例如:@keyup.tab="";@keyup.delet = "";

    里面写按键触发执行的事件就可以了。

    参考来源:Vue常用的修饰符及使用的场景_Arvin-wm的博客-CSDN博客_vue常用的修饰符及作用

    展开全文
  • vue 事件修饰符

    2022-03-21 13:46:34
    事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 表单修饰符: lazy trim number lazy 在我们填完信息,光标离开标签的时候,才会将值赋予给value,也就是在change事件之后再进行信息同步 <input type="text...

    在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理

    vue中修饰符分为以下五种:

    表单修饰符
    事件修饰符
    鼠标按键修饰符
    键值修饰符
    v-bind修饰符

    表单修饰符:
    lazy
    trim
    number

    lazy
    在我们填完信息,光标离开标签的时候,才会将值赋予给value,也就是在change事件之后再进行信息同步

    <input type="text" v-model.lazy="value">
    <p>{{value}}</p>
    

    trim
    自动过滤用户输入的首空格字符,而中间的空格不会过滤

    <input type="text" v-model.trim="value">
    

    number
    自动将用户的输入值转为数值类型,但如果这个值无法被parseFloat解析,则会返回原来的值

    <input v-model.number="age" type="number">
    

    事件修饰符
    事件修饰符是对事件捕获以及目标进行了处理,有如下修饰符:

    stop
    prevent
    self
    once
    capture
    passive
    native

    stop
    阻止了事件冒泡,相当于调用了event.stopPropagation方法

    <div @click="shout(2)">
      <button @click.stop="shout(1)">ok</button>
    </div>
    

    //点击shout只输出1,不会触发shout(2)

    prevent
    阻止了事件的默认行为,相当于调用了event.preventDefault方法

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

    self
    只当在 event.target 是当前元素自身时触发处理函数

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

    使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击

    once
    绑定了事件以后只能触发一次,第二次就不会触发

    <button @click.once="shout(1)">ok</button>
    

    capture
    使事件触发从包含这个元素的顶层开始往下触发

    <div @click.capture="shout(1)">
        obj1
    <div @click.capture="shout(2)">
        obj2
    <div @click="shout(3)">
        obj3
    <div @click="shout(4)">
        obj4
    </div>
    </div>
    </div>
    </div>
    

    // 输出结构: 1 2 4 3

    passive
    在移动端,当我们在监听元素滚动事件的时候,会一直触发onscroll事件会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给onscroll事件整了一个.lazy修饰符

    <div v-on:scroll.passive="onScroll">...</div>
    

    不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。

    passive 会告诉浏览器你不想阻止事件的默认行为

    native
    让组件变成像html内置标签那样监听根元素的原生事件,否则组件上使用 v-on 只会监听自定义事件

    <my-component v-on:click.native="doSomething"></my-component>
    

    使用.native修饰符来操作普通HTML标签是会令事件失效的

    鼠标按钮修饰符

    鼠标按钮修饰符针对的就是左键、右键、中键点击,有如下:

    left 左键点击
    right 右键点击
    middle 中键点击
    <button @click.left=“shout(1)”>ok
    <button @click.right=“shout(1)”>ok
    <button @click.middle=“shout(1)”>ok

    键盘修饰符

    键盘修饰符是用来修饰键盘事件(onkeyup,onkeydown)的,有如下:

    keyCode存在很多,但vue为我们提供了别名,分为以下两种:

    普通键(enter、tab、delete、space、esc、up…)
    系统修饰键(ctrl、alt、meta、shift…)
    // 只有按键为keyCode的时候才触发

    <input type="text" @keyup.keyCode="shout()">
    

    还可以通过以下方式自定义一些全局的键盘码别名

    Vue.config.keyCodes.f2 = 113
    

    v-bind修饰符

    v-bind修饰符主要是为属性进行操作,用来分别有如下:

    async
    prop
    camel

    async
    能对props进行一个双向绑定

    //父组件

    <comp :myMessage.sync="bar"></comp> 
    

    //子组件

    this.$emit('update:myMessage',params);
    

    以上这种方法相当于以下的简写

    //父亲组件

    <comp :myMessage="bar" @update:myMessage="func"></comp>
    func(e){
     this.bar = e;
    }
    

    //子组件js

    func2(){
      this.$emit('update:myMessage',params);
    }
    

    使用async需要注意以下两点:

    使用sync的时候,子组件传递的事件名格式必须为update:value,其中value必须与子组件中props中声明的名称完全一致

    注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用

    将 v-bind.sync 用在一个字面量的对象上,例如 v-bind.sync=”{ title: doc.title }”,是无法正常工作的

    props
    设置自定义标签属性,避免暴露数据,防止污染HTML结构

    <input id="uid" title="title1" value="1" :index.prop="index">
    

    camel
    将命名变为驼峰命名法,如将 view-Box属性名转换为 viewBox

    <svg :viewBox="viewBox"></svg>
    
    展开全文
  • 事件修饰符2.按键修饰符 修饰符 1.事件修饰符 vue中提供的事件修饰符一共有4种 .stop:用来阻止事件冒泡(防止事件向父标签传递) .prevent:用来阻止标签的默认行为 .self:只监听自身标签触发的事件 .once:该...

    修饰符

    1.事件修饰符

    vue中提供的事件修饰符一共有4种

    • .stop:用来阻止事件冒泡(防止事件向父标签传递)
    • .prevent:用来阻止标签的默认行为
    • .self:只监听自身标签触发的事件
    • .once:该事件只触发一次

    语法:

    @事件名.事件修饰符=“事件处理函数”

    例:@click.stop=“test”,给click加了一个stop修饰的事件

    具体代码内容

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>事件修饰符</title>
    	</head>
    	<body>
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<div id="app">
    			<h1>{{message}}</h1>
    			<input type="button" value="弹出test" @click="test" />
    			<br><br>
    			<h3>stop修饰符</h3>
    			<!-- 演示.stop事件修饰符 -->
    			<div id="p" style="width: 100px;height: 100px; background-color: #FF0000;" @click="parent">
    				<div id="c" style="width: 50px; height: 50px; background-color: aquamarine;" @click.stop="child">
    					
    				</div>
    			</div>
    			<h3>prevent修饰符</h3>
    			<!-- 
    				演示.prevent事件修饰符
    				使其不触发默认行为,只触发一个方法
    			-->
    			<a href="http://www.baidu.com" @click.prevent="testa">点我</a>
    			
    			<h3>self修饰符</h3>
    			<!-- .self修饰符,只触发自身的修饰符 -->
    			<!-- 给parent加修饰符,使其只监听parent,不监听传上来的事件 -->
    			<div id="p" style="width: 100px;height: 100px; background-color: #FF0000;" @click.self="parent">
    				<div id="c" style="width: 50px; height: 50px; background-color: aquamarine;" @click="child">
    					
    				</div>
    			</div>
    			<h3>once修饰符</h3>
    			<input type="button" value="事件只触发一次" @click.once="test" />
    		</div>
    		<script type="text/javascript">
    			var vue = new Vue({
    				el:"#app",
    				data:{
    					message:"事件修饰符"
    				},
    				methods:
    				{
    					test(){
    						alert("test")
    					},
    					parent(){
    						alert("parent")
    					},
    					child(){
    						alert("child")
    					},
    					testa(){
    						alert("testa")
    					}
    				},
    				
    			})
    		</script>
    	</body>
    	
    </html>
    

    2.按键修饰符

    事件修饰符可以对所有事件进行修饰

    按键修饰符用于对键盘事件进行修饰

    键盘事件:比如keyup,keydown等等

    vue中的键盘修饰符

    • .enter:对回车键修饰
    • .tab:对tab键修饰
    • .delete(捕获删除和退格键)
    • .esc:对esc修饰
    • .space:对空格修饰
    • .up:对 上
    • .down:对 下
    • .left:对 左
    • .right:对 右

    只有在按下某些键时才触发事件

    代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>按键修饰符</title>
    	</head>
    	<body>
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<div id="app">
    			<h3>{{message}}</h3>
    			<!-- 在删除和回车的时候触发 -->
    			<input type="text" v-model="name" @keyup.enter.delete="keyup" />
    		</div>
    		<script type="text/javascript">
    			var vue = new Vue({
    				el:"#app",
    				data:{
    					message:"按键修饰符",
    					name:""
    				},
    				methods:
    				{
    					keyup(){
    						alert(this.name)
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    
    展开全文
  • 14.Vue的事件修饰符

    2022-03-30 13:48:14
    今天这一节,我们来讲讲Vue中的事件修饰符。下面我们用一个小例子来引入它。 1.Vue事件修饰符小例子 我们都知道一个a标签既有跳转链接,又有点击事件的时候,它会先执行点击事件,然后再跳转链接。就像下面这样 ...
  • 今天总结了vue常见的事件修饰符,学习面试都是常遇到的,快来看看吧~????   先引用vue官网的话说----在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在...
  • 下面小编就为大家分享一篇基于vue.js中事件修饰符.self的用法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • - 方法可以传自定义参数 - 事件对象:调用方法时传参数 $event,在方法里就可以获取到事件对象 event。 - 使用 this 在一个方法里调用另一个方法 - 多事件处理程序:事件可以一次触发多个方法
  • vue事件修饰符

    2022-02-15 21:33:38
    给事件名称添加.stop事件修饰符后可以阻止事件冒泡,即仅会触发当前元素的事件,不会触发其父元素的相同事件 prevent 阻止默认事件 <!-- 阻止默认事件 --> <a href=...
  • 常见事件修饰符

    2021-08-02 12:54:41
    1: 常见事件修饰符: 1.1: .stop 等同于javaScript 中的event.stopPropagation(); 防止事件冒泡; 1.2: .prevent: 等同于javaScript 中event.preventDefault(); 防止执行预设的行为。 1.3: .capture: 与事件冒泡...
  • vue中有哪些修饰符事件装饰符 1、常见修饰符有.sync,.lazy,.passive (1).sync 因为vue是单向数据流,从父组件传到子组件的数据,子组件如果修改数据会报错,加上.sync后子组件内部改变props属性值并更新到父组件...
  • Vue事件修饰符

    2021-07-26 14:46:44
    Vue中的事件修饰符: 1.prevent:阻止默认事件(常用); 2.stop:阻止事件冒泡(常用); 3.once:事件只触发一次(常用); 4.capture:使用事件的捕获模式; 5.self:只有event.target是当前操作的元素时才...
  • Vue中的事件修饰符

    2022-02-02 12:19:40
    lazy修饰符作用是,改变输入框的值时value不会改变,当光标离开输入框时,v-model绑定的值value才会改变 <input type="text" v-model.lazy="value"> <div>{{value}}</div> data() { return { ...
  • .native事件修饰符

    2022-03-10 09:19:23
    事件修饰符使用层次升级,写的高大上就显得更牛皮一些
  • Vue(七)事件修饰符

    2022-03-12 20:13:54
    总结 1、prevent:阻止默认事件 2、stop:阻止事件冒泡(由内往外) 3、once:事件只触发一次 4、capture:事件捕获(由外往内) 5、self:只用event.target是当前操作的元素时才...其中1-3事件修饰符常用 ...
  • 事件处理(监听+事件修饰符+按键修饰符) <!-- 1.绑定监听 v-on:xxx="fun" #xxx="fun" @xxx="fun(参数)" 默认事件形参: event 隐含属性对象:$event 2.事件修饰符 .prevent:阻止事件的默认行为 event....
  • 1. 事件修饰符 阻止冒泡:event.preventDefault()和 event.stopPropagation(),在 方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。 1.stop(阻止冒泡继续传播 ), 2. prevent(**拦截默认事件**), 3. capture(先...
  • 今天给大家介绍Vue的事件修饰符、按键修饰符 、 鼠标修饰符! 事件修饰符 stop 阻止事件继续传播 <div @click.stop="handleClick">hello word</div> prevent 阻止标签默认行为 <div @click....
  • 事件修饰符处理了许多DOM事件的细节,帮助我们快速的完成一些事件动作。 例如v-on的修饰符有以下: .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .capture - 添加事件侦听器时...
  • VUE3.0,DAY9事件符举例事件修饰符展示 事件符举例 Vue中的事件修饰符: prevent:阻止默认事件(常用) ; stop:阻止事件冒泡(常用); once: 事件只触发一 次(常用) capture:使用事件的捕获模式; self:只有event. target...
  • .capture-------添加事件侦听器时使用事件捕获模式(从外到内) .self---------只当事件在该元素本身触发时触发回调。(比如不是子元素) .once--------事件只触发一次 .stop和.self的区别: 1,.stop是真正...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 87,281
精华内容 34,912
相关推荐
关键字:

事件修饰符