vue使用once修饰符,使事件只能触发一次问题

目录
  • once修饰符,使事件只能触发一次
  • vue事件修饰符(once:prev:stop)
    • 注释说的很详细

once修饰符,使事件只能触发一次

多个修饰符可以同步使用

<!--定义vue的操作对象-->
<div id="app">
    <!-- 使用self修饰符 点击标签自身时才会执行事件 -->
    <!-- 使用once修饰符 使事件只能触发一次  -->
    <!-- 多个修饰符可以同时使用   -->
    <div class="inner" @click.self.once="divClick">
        <input type="button" value="点击" @click="butClick">
    </div>
</div>
<!--导入vue.js-->
<script src="./vue.js"></script>
<script>
    //创建一个vue实例
    var vm = new Vue({
        el:"#app", //指定实例控制的DOM元素
        data:{ //存储页面数据
        },
        methods:{ //在此处定义实例可用的所有方法
            divClick(){
                console.log('div点击事件')
            },
            butClick(){
                console.log('button点击事件')
            }
        }
    })
</script>

vue事件修饰符(once:prev:stop)

附有同一文件夹下的html文件、js文件和css文件

注释说的很详细

index.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
	<link rel="stylesheet" href="style.css" rel="external nofollow" >
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<!--vue-app是根容器-->
	<div id="vue-app">
	<h1>Event</h1>
	<button @click.once="add(1)">单击涨一岁</button>
	<button v-on:click="subtract(1)">单击减一岁</button>
	<button @dblclick="add(10)">双击涨十岁</button>
	<button v-on:dblclick="subtract(10)">双击减十岁</button>
	<p>My age is {{age}}</p>

	<div id="canvas" v-on:mousemove="updateXY">
	{{x}},{{y}} -
	<span v-on:mousemove="stopMoving">Stop Moving</span>
	<br>
	<span v-on:mousemove.stop="">Stop Moving</span>
	</div>
	<a v-on:click="alert()" href="https://blog.csdn.net/qq_40647912" rel="external nofollow"  rel="external nofollow" >baidu</a>
	<br>
	<a v-on:click.prevent="alert()" href="https://blog.csdn.net/qq_40647912" rel="external nofollow"  rel="external nofollow" >baidu</a>
	</div>
	</div>
	<script src="app.js"></script>

</body>
</html>

app.js的代码

//实例化VUE对象
new Vue({
	el:"#vue-app",
	//仅限于在vue-app容器下
	data:{
		age:30,
		x:0,
		y:0
		},
	methods:{
		add:function(inc){
			this.age += inc;
		},
		subtract:function(dec){
			this.age -= dec;
		},
		updateXY:function(event){
			this.x = event.offsetX;
			this.y = event.offsetY;
		},
		stopMoving:function(event){
			event.stopPropagation();
		},
		alert:function(){
			alert("Hellow world !");
		}
	}
});

style.css代码

#canvas{
	width: 600px;
	padding: 200px 20px;
	text-align: center;
	border: 1px solid #333;
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js 事件修饰符的使用教程

     一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这一利器,使我们可以便捷的处理 DOM 事件,本章,一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作. 仓储地址: https://github.com/Lanesra712/VueTrial/tree/master/Chapter01-Rookie/directives  二.干货合集

  • Vue中$once的两个实用小技巧分享

    Vue中$once的两个实用小技巧分享

    目录 前言 清除定时器 $once/$emit + async/await 实现 Dialog 同步执行 总结 前言 在 Vue 中有很多 API 都有很实用的地方,只是需要挖掘适用的场景,这里整理出了 $once 的两个小技巧,也是在平常工作中用的比较多的,分享给大家,希望对大家能有帮助. 清除定时器 定时器大家用的应该也不少,像我一开始一般都是这样写的,在 created 中创建定时器,在 beforeDestroy 中销毁定时器. <script> export default { na

  • vue中的事件修饰符once,prevent,stop,capture,self,passive

    目录 vue中的事件修饰符 1. once 2. prevent 3. stop 4. capture和self 5. passive与prevent相反 vue事件处理(修饰符) 事件修饰符 按键修饰符 系统修饰键 鼠标按钮修饰符 vue中的事件修饰符 1. once 只执行一次 <div v-on:click.once='alert("1")'></div> 只有在第一次点击时会执行,再次点击不会起作用 2. prevent 阻止默认程序,比如form表单中

  • vue使用once修饰符,使事件只能触发一次问题

    目录 once修饰符,使事件只能触发一次 vue事件修饰符(once:prev:stop) 注释说的很详细 once修饰符,使事件只能触发一次 多个修饰符可以同步使用 <!--定义vue的操作对象--> <div id="app">     <!-- 使用self修饰符 点击标签自身时才会执行事件 -->     <!-- 使用once修饰符 使事件只能触发一次  -->     <!-- 多个修饰符可以同时使用   -->

  • 详解Vue的sync修饰符

    详解Vue的sync修饰符

    1 .指令 指令即 Directive,从字面意思理解就是我告诉你要做什么,就是发送了一个指令,然后由接收指令的人去做就好了.在 Vue 中的指令有个统一好认的格式,就是以 v- 开头的就是指令,如: <div v-text="x"> </div> //v-text指定标签文本指令 <div v-on:click="add"> <div> //v-on事件绑定指令 但并不是所有的指令都以 v- 开头,对于一些简写,也是

  • Vue常用的修饰符的作用详解

    目录 一.Vue的修饰符是什么 二.修饰符的作用 1.表单修饰符 2.事件修饰符 3.鼠标按钮修饰符 4.键盘修饰符 5.v-bind修饰符 三.常用的应用场景 一.Vue的修饰符是什么 Vue中的修饰符分为以下五种: 表单修饰符: 事件修饰符: 鼠标按键修饰符: 键值修饰符: v-bind修饰符. 二.修饰符的作用 1.表单修饰符 修饰符 作用 使用 lazy 填完信息,光标离开标签的时候,才会将值赋予给value <input type="text" v-model.lazy

  • Vue中sync修饰符分析原理及用法示例

    Vue中sync修饰符分析原理及用法示例

    目录 不使用sync修饰符的代码示例 使用sync修饰符的代码示例 sync修饰符的原理 前几天在看别人代码时,发现了sync修饰符的妙用,特记录其用法和原理如下. 不使用sync修饰符的代码示例 父组件: <template> <div> <div v-if="show">11111</div> <h3>下面是子组件</h3> <SyncDemo :show="show" @update

  • vue 之 .sync 修饰符示例详解

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行"双向绑定". 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值. 这很方便,但也会导致问题,因为它破坏了单向数据流.(数据自上而下流,事件自下而上走) 由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态. 这在 debug 复杂

  • vue.js中修饰符.stop的用法解析

    vue.js中修饰符.stop的用法解析

    目录 修饰符.stop的用法 用法如下 下面是全部的代码 stop事件修饰符 stop事件修饰符具体介绍 修饰符.stop的用法 .stop修饰符是用来阻止冒泡事件的发生的. 用法如下 <a v-on:click.stop="doThis"></a> 下面是全部的代码 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF

  • 如何理解Vue的.sync修饰符的使用

    本文介绍了Vue的.sync修饰符的使用,分享给大家,也给自己留个笔记 案例 <div id="app"> <div>{{bar}}</div> <my-comp :foo.sync="bar"></my-comp> <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-

  • 解决vue elementUI 使用el-select 时 change事件的触发问题

    如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it

  • 详解Vue 事件修饰符capture 的使用

    .capture事件修饰符的作用添加事件侦听器时使用事件捕获模式 即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素.若有多个该修饰符,则由外而内触发. 就是谁有该事件修饰符,就先触发谁. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.capture事件修饰符</title&g

随机推荐