组件绑定事件时

1. 普通组件绑定事件不能添加.native, 添加后事件失效

2. 自定义组件绑定事件需要添加.native, 否则事件无效

<template>
<!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> -->
<input type="text" @keyup.native="show($event)"> //普通组件不能添加.native, 添加后事件失效
</template> <script>
import { MessageBox } from 'mint-ui'; export default {
name: 'about',
data(){
return{ }
},
methods:{
show(ev){
MessageBox.alert('操作成功').then(action => {
if(ev.keyCode==){
console.log('enter');
}
});
}
}
}
</script>
<template>
<mt-field label="用户名" placeholder="请输入用户名" @keyup.native="show($event)"></mt-field> //自定义组件需要添加.native, 不添加事件无效
<!-- <input type="text" @keyup.native="show($event)"> -->
</template> <script>
import { MessageBox } from 'mint-ui'; export default {
name: 'about',
data(){
return{ }
},
methods:{
show(ev){
MessageBox.alert('操作成功').then(action => {
if(ev.keyCode==){
console.log('enter');
}
});
}
}
}
</script>

vue中组件绑定事件时是否加.native的更多相关文章

  1. vue中<select>绑定事件

    <div id="app"> <select v-model="selectItem" @change="selectFn($eve ...

  2. Vue--vue中的组件、组件绑定事件和数据、私有组件、子组件,父子组件参数互传

    一.公有组件以及组件的使用和特点 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. Vue中组件

    0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...

  4. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  5. Vue中组件化编码使用(实战练习一)

    Vue中组件化编码的大致流程(初接触).组件之间的参数传递(最基础的形式).组件之间的配合完成一个需求 1.在Vue中进行组件化编码 1.1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆 ...

  6. vue中组件之间的通信

    一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式  props vue自定义的事件 消息订阅与发布 vuex sl ...

  7. JavaScript 绑定事件时传递数据

    var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...

  8. 在Vue中的load或ready的加载时机

    在Vue中的load或ready的加载时机 1.我们来插入一段代码来分析: Js代码如下 <script type="text/javascript"> var app ...

  9. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

随机推荐

  1. tomcat配置通过域名直接访问项目首页步骤

    假设www.ctool.top.ip:192.168.122.135 step 1 申请一个域名并做好DNS解析,或者在hosts文件做域名指向 #vim /etc/hosts www.ctool.t ...

  2. Oracle查询数据库中所有表的记录数

    1.Oracle查询数据库中所有表的记录数,但是有可能不准建议用第二种方式进行查询 select t.table_name,t.num_rows from user_tables t 2.创建orac ...

  3. 如何使用Apollo标定激光雷达和IMU

    https://github.com/ApolloAuto/apollo/blob/master/docs/quickstart/apollo_1_5_lidar_calibration_guide_ ...

  4. 从Linux内核角度看中间人攻击(ARP欺骗)并利用Python scapy实现

    邻居子系统与ARP协议 邻居子系统的作用就是将IP地址,转换为MAC地址,类似操作系统中的MMU(内存管理单元),将虚拟地址,转换为物理地址. 其中邻居子系统相当于地址解析协议(IPv4的ARP协议, ...

  5. AI tensorflow MNIST

    MNIST 数据 train-images-idx3-ubyte.gz:训练集图片 train-labels-idx1-ubyte.gz:训练集图片类别 t10k-images-idx3-ubyte. ...

  6. Java多线程(十)——线程优先级和守护线程

    一.线程优先级的介绍 java 中的线程优先级的范围是1-10,默认的优先级是5.“高优先级线程”会优先于“低优先级线程”执行. java 中有两种线程:用户线程和守护线程.可以通过isDaemon( ...

  7. redis学习(一)——redis介绍及安装

    一.redis简介 redis是一个高性能的key-value非关系数据库,它可以存键(key)与5种不同类型的值(value)之间的映射(mapping),支持存储的value类型包括:String ...

  8. 使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法

    问题:使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法 解决方法:webstrom ->preferences->Laugrange ...

  9. .net core 简单项目的创建

    1.linux 安装net coref https://www.microsoft.com/net/learn/get-started/linuxubuntu 2.创建目录 2.创建控制台项目 第一次 ...

  10. Spring Boot 之发送邮件

    Spring Boot 之发送邮件 简介 API 配置 实战 引入依赖 配置邮件属性 Java 代码 完整示例 引申和引用 简介 Spring Boot 收发邮件最简便方式是通过 spring-boo ...