精华内容
下载资源
问答
  • Vue事件修饰符

    2020-05-14 08:51:30
    Vue事件修饰符

    Vue事件修饰符
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue事件修饰符

    2021-01-18 19:24:15
    vue事件修饰符 .stop - 阻止冒泡 .prevent - 阻止默认事件 .capture - 阻止捕获 .self - 只监听触发该元素的事件 .once - 只触发一次 .left - 左键事件 .right - 右键事件 .middle - 中间滚轮事件 Vue.js 为 v-on ...

    vue事件修饰符

    .stop - 阻止冒泡
    .prevent - 阻止默认事件
    .capture - 阻止捕获
    .self - 只监听触发该元素的事件
    .once - 只触发一次
    .left - 左键事件
    .right - 右键事件
    .middle - 中间滚轮事件
    

    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。

    Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
    
    <!-- click 事件只能点击一次,2.1.4版本新增 -->
    <a v-on:click.once="doThis"></a>
    
    展开全文
  • vue 事件修饰符

    2020-09-17 22:04:29
    Vue事件修饰符:stop、once、selt、prevent、capture <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent=...

    Vue事件修饰符:stop、once、selt、prevent、capture


    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    
    <!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
    

    关于.stop和.self的区别,前者是防止事件冒泡,后者则是忽略了事件冒泡和事件捕获的影响,只有直接作用在该元素上的事件才会被调用。

    <div @click="handler1">
    	handler1
    	<div @click="handler2">handler2</div>
    </div>
    ...
    handler1() {
    	console.log('handler1')
    }
    handler2() {
    	console.log('handler2')
    }
    

    点击handler2发生事件冒泡,输出:

    handler2
    handler1
    

    stop

    <div @click="handler1">
    	handler1
    	<div @click.stop="handler2">handler2</div>
    </div>
    

    添加.stop事件修饰符阻止事件冒泡,输出:

    handler2
    

    self

    <div @click.self="handler1">
    	handler1
    	<div @click="handler2">handler2</div>
    </div>
    

    添加.self事件修饰符,只有作用在该元素上的事件起作用,输出:

    handler2
    

    once

    <div @click="handler1">
    	handler1
    	<div @click.once="handler2">handler2</div>
    </div>
    

    添加.once事件修饰符,handler2只能触发一次点击事件

    第一次点击handler2,输出:

    handler2
    handler1
    

    第n次点击handler2,输出:

    handler1
    

    prevent

    <a href="https://www.baidu.com" @click.prevent="other">百度</a>
    

    添加.prevent事件修饰符,阻止默认事件,执行other事件

    展开全文
  • Vue 事件修饰符

    2020-06-29 10:54:22
    Vue事件修饰符:stop、once、selt、prevent、capture <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent=...

    Vue事件修饰符:stop、once、selt、prevent、capture

    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
    

    关于.stop和.self的区别,前者是防止事件冒泡,后者则是忽略了事件冒泡和事件捕获的影响,只有直接作用在该元素上的事件才会被调用。

    ...
    <div @click="handler1">
    	handler1
    	<div @click="handler2">handler2</div>
    </div>
    ...
    handler1() {
    	console.log('handler1')
    }
    handler2() {
    	console.log('handler2')
    }
    ...
    

    点击handler2发生事件冒泡,输出:

    handler2
    handler1
    

    stop

    <div @click="handler1">
    	handler1
    	<div @click.stop="handler2">handler2</div>
    </div>
    

    添加.stop事件修饰符阻止事件冒泡,输出:

    handler2
    

    self

    <div @click.self="handler1">
    	handler1
    	<div @click="handler2">handler2</div>
    </div>
    

    添加.self事件修饰符,只有作用在该元素上的事件起作用,输出:

    handler2
    

    once

    <div @click="handler1">
    	handler1
    	<div @click.once="handler2">handler2</div>
    </div>
    

    添加.once事件修饰符,handler2只能触发一次点击事件

    第一次点击handler2,输出:

    handler2
    handler1
    

    第n次点击handler2,输出:

    handler1
    

    prevent

    <a href="https://www.baidu.com" @click.prevent="other">百度</a>
    

    添加.prevent事件修饰符,阻止默认事件,执行other事件

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,204
精华内容 1,281
关键字:

vue事件修饰符

vue 订阅