前端学习（1190）:事件修饰符

传统方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- v-cloak用法 --><style>[v-cloak] {display: none;}/* 先通过样式隐藏内容 然后在内存中替换 然后再显示想要的结果 */</style>
</head>
<!-- v-once显示的信息不需要后期修改 这样可以提高性能 --><body><div id="app"><div>{{num}}</div><div v-on:click='handle0'><button @click='handle1'>点击2</button><!--  <button @click='handle2(123,456,$event)'>点击3</button> --></div></div><!-- 刷新的时候有闪动 --><script type="text/javascript" src="./js/vue.js"></script><script>/* VUE基本使用 *//* 填充数据 *//* 引入js *//* 语法功能 */var vm = new Vue({//绑定的标签el: '#app',//数据显示data: {//msg: 'Hello Vue',num: 0/*  info: '你好' */},methods: {/*  handle2: function(p, p1, event) {console.log(p, p1);console.log(event.target.tagName);this.num++;}, */handle0: function() {this.num++;},handle1: function(event) {//阻止冒泡event.stopPropagation();// console.log(event.target.innerHTML);}}});</script>
</body></html>

vue

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- v-cloak用法 --><style>[v-cloak] {display: none;}/* 先通过样式隐藏内容 然后在内存中替换 然后再显示想要的结果 */</style>
</head>
<!-- v-once显示的信息不需要后期修改 这样可以提高性能 --><body><div id="app"><div>{{num}}</div><div v-on:click='handle0'><!-- 阻止冒泡 --><button @click.stop='handle1'>点击2</button><!--  <button @click='handle2(123,456,$event)'>点击3</button> --></div><div><a href="http://www.baidu.com" v-on:click.prevent='handle2'>点击</a></div></div><!-- 刷新的时候有闪动 --><script type="text/javascript" src="./js/vue.js"></script><script>/* VUE基本使用 *//* 填充数据 *//* 引入js *//* 语法功能 */var vm = new Vue({//绑定的标签el: '#app',//数据显示data: {//msg: 'Hello Vue',num: 0/*  info: '你好' */},methods: {/*  handle2: function(p, p1, event) {console.log(p, p1);console.log(event.target.tagName);this.num++;}, */handle0: function() {this.num++;},handle1: function(event) {//阻止冒泡// event.stopPropagation();// console.log(event.target.innerHTML);},handle2: function(event) {event.preventDefault();}}});</script>
</body></html>

运行结果

前端学习（1190）:事件修饰符相关推荐

Vue学习01-v-on事件修饰符
v-on事件修饰符: .stop:阻止标签的向外冒泡行为如div内部有个button,但是div和button都有点击事件.此时只希望点击按钮时触发按钮点击事件,不触发div点击事件,那么v-on: ...
Vue学习：事件修饰符
当使用连接点击,触发默认事件时,会出现跳转,跳转是默认行为,可以取消 <div id='root'> <h2>欢迎页面,你好 {{name ...
Vue事件修饰符（prevent，stop，once，capture，self）
1.Vue的事件修饰符: 1.prevent 阻止默认事件(常用) 2.stop:阻止默认冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有 ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几 ...
Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
五、伊森商城前端基础-Vue v-on 事件修饰符按键修饰符 v-for v-if 和v-show v-else和v-else-if p24
目录 1.v-on 2.事件修饰符 3.按键修饰符 3.1.组合按钮 4.v-for 5.v-if和v-show 6.v-else 和 v-else-if 6.1.v-if结合v-for来时用 1.v ...
Vue2.0学习笔记：Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
vue事件修饰符，六次实操带你快速了解与应用~
一.速识概念: 你好呀,最近过的怎么样?今天总结了vue常见的事件修饰符,学习面试都是常遇到的,快来看看吧~

前端学习（1190）:事件修饰符

前端学习（1190）:事件修饰符相关推荐

最新文章

热门文章