vue中的@click.native 原生点击事件
目录
- @click.native原生点击事件
- 给vue组件绑定事件时候
- 等同于在自组件中
- vue点击事件补充.native
- 步骤
- 官网的解释
@click.native原生点击事件
给vue组件绑定事件时候
必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符)
等同于在自组件中
子组件内部处理click事件然后向外发送click事件:$emit("click".fn)
vue点击事件补充.native
发现vue中加载Element 之后 键盘事件无效果搜索之后发现有BUG特来修复
步骤
发现Element-input 中加入@keyup.enter中无效果
<el-input style="width:500px;" placeholder="请输入查询城市" v-model="location" clearable @keyup.enter="goSearch" ></el-input>
之后在加入.native 的修饰符
<el-input style="width:500px;" placeholder="请输入查询城市" v-model="location" clearable @keyup.enter.native="goSearch" ></el-input>
官网的解释
你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
通俗点讲:
就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的。
可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue组件添加事件@click.native操作
1,给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件 2,等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit("click".fn) <Item @click.native = "shijian()"></Item> 补充知识:vue--组件间(兄弟组件间)事件派发与接收 法一 main.js 在初始化vue之前,给 data 添加一个名为 event 的空v
-
vue键盘事件点击事件加native操作
如下所示: <el-card class="box-card animated flipInY"> <el-form :model="ruleForm2" :label-position="labelPosition" status-icon :rules="rules2" ref="ruleForm2" label-width="50px" class="d
-
vue学习笔记之给组件绑定原生事件操作示例
本文实例讲述了vue学习笔记之给组件绑定原生事件操作.分享给大家供大家参考,具体如下: 当在父组件中定义一个点击事件,并且在父组件的methods中定义了这个点击事件时,在页面上点击并不会有什么反应.那么该怎么办呢? 我们可以在子组件的template中的dom上定义一个点击事件(原生事件),并且在子组件的methods中定义该点击事件,然而点击页面时也只会alert(child click ). 这是为什么呢?父组件的点击事件被vue当成自定义事件,点击后没有检测到,这时需要子组件向父组件触发
-
vue中的@click.native 原生点击事件
目录 @click.native原生点击事件 给vue组件绑定事件时候 等同于在自组件中 vue点击事件补充.native 步骤 官网的解释 @click.native原生点击事件 给vue组件绑定事件时候 必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 等同于在自组件中 子组件内部处理click事件然后向外发送click事件:$emit("click".fn) vue点击事件补充.native 发现vue中加载Element 之后 键盘事件
-
vue中阻止click事件冒泡,防止触发另一个事件的方法
使用vue阻止子级元素的click事件冒泡,很简单,用stop <div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1,就不会触发div绑定时间test1()方法. 以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部
-
vue中解决微信html5原生ios虚拟键返回不刷新问题
问题描述: 做微信h5页面时,经过了微信授权才跳转到一级默认路由home.vue中,因此在home页面时在IOS中底部会出现虚拟的返回键,安卓上不会出现.且在IOS点击返回时会跳转到home空白页面不重新加载,但是在安卓机上点击返回键会重新加载. 实现功能: 解决IOS问题(在home页面点返回时路由还是在home页面,并完成重新加载) 分析: 需要在进入页面时加入监听,并在页面离开时移除监听.因为home页面是个滚动列表,所以我采用了keep-alive路由缓存,所以不能在created()和
-
VUE中v-on:click事件中获取当前dom元素的代码
在开发中总是忘记,特意在此记录 关键字: $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { var selectedBedDom = $(e.srcElement)//dom元素 } PS:下面看下v-
-
vue click.stop阻止点击事件继续传播的方法
如下所示: <div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.j
-
vue中关于click.stop的用法
目录 关于click.stop的用法 @click.stop与@click.prevent 一.@click.stop 二.@click.prevent 关于click.stop的用法 click.stop 阻止点击事件继续传播 场景: 在table中使用,点击当前行,当前行被勾选,但是点击当前行中按钮或点击事件时,使用此方法,则在触发当前点击事件后,阻止行的选中事件 使用: html <el-table ref="tableRef" :data="tableData&
-
vue动态渲染svg、添加点击事件的实现
业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签 经多次实验,用embed.img等标签改变src属性的方式,均无法实现上述全部功能(尤其是svg内部点击事件),最终采用Vue.extend()方法完整实现,代码也较为简洁,html结构如下: <template> <div> <div id="svgTemplate"></div> </div>
-
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局 <template> <div class='content'> 页面内容 </div> </template> 在对应的组件的最外层di
-
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
:id绑定 :id="'a_'+index" 输出的id为a_0,a_1..... <div v-for="(item,index) in list" :key="index" > <div :id="'a'+index" @click="b(index)">哈哈哈</div> </div> 然后在vue的实例中就可以拿到对应的id b(index){ thi
-
在layui中layer弹出层点击事件无效的解决方法
1.click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事 件的 2.而(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件不起作用:(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元
随机推荐
- 深入浅出解析正则表达式-替换原则
- vue.js学习之UI组件开发教程
- Linux shell知识点汇总
- SQLServer 2005 列所有存储过程的语句
- extjs 学习笔记(三) 最基本的grid
- 5个可能被你忽略的Linux安全设置方法
- 关于__defineGetter__ 和__defineSetter__的说明
- Jquery 切换不同图片示例代码
- SQL Server中调用C#类中的方法实例(使用.NET程序集)
- php实例分享之通过递归实现删除目录下的所有文件详解
- php数组随机排序实现方法
- weiphp微信公众平台授权设置
- Thinkphp整合微信支付功能
- php学习 字符串课件
- MySQL 存储过程传参数实现where id in(1,2,3,...)示例
- BootStrap Fileinput的使用教程
- php数组函数序列之in_array() 查找数组值是否存在
- 全面解析$.Ajax()方法参数(推荐)
- jQuery插件开发全解析
- 修改好的jquery滚动字幕效果实现代码