vue中组件绑定事件时是否加.native
组件绑定事件时
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的更多相关文章
- vue中<select>绑定事件
<div id="app"> <select v-model="selectItem" @change="selectFn($eve ...
- Vue--vue中的组件、组件绑定事件和数据、私有组件、子组件,父子组件参数互传
一.公有组件以及组件的使用和特点 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Vue中组件
0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- Vue中组件化编码使用(实战练习一)
Vue中组件化编码的大致流程(初接触).组件之间的参数传递(最基础的形式).组件之间的配合完成一个需求 1.在Vue中进行组件化编码 1.1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆 ...
- vue中组件之间的通信
一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式 props vue自定义的事件 消息订阅与发布 vuex sl ...
- JavaScript 绑定事件时传递数据
var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...
- 在Vue中的load或ready的加载时机
在Vue中的load或ready的加载时机 1.我们来插入一段代码来分析: Js代码如下 <script type="text/javascript"> var app ...
- jquery-10 jquery中的绑定事件和解绑事件的方法是什么
jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...
随机推荐
- scipy 安装错误及解决
pip 安装 scipy 时,因为是编译安装,所以如果缺少一些编译库,会报很多错误,以下总结可能缺失的安装包: sudo apt-get install gfortran sudo apt-get i ...
- nginx让所有的http地址重定向到https
问:为什么让所有的http都重定向到https呢?答:因为这样会使网站更安全些. 那么我是如何在nginx配置,让输入http://www.youcongtech.com或者youcongtech.c ...
- item 23: 理解std::move和std::forward
本文翻译自<effective modern C++>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 根据std::move和std::forward不 ...
- NCC Meetup 2018 Shanghai 活动小结(含PPT与视频)
NCC Meetup 2018 上海的活动于2018年6月30日在微软上海港汇办公室进行.原本计划30人规模的小型活动,结果收到了逾60人的报名,其中大部均来到现场参加了活动. 本次活动得到了微软公司 ...
- maven新建项目
选择新建maven project 这个文件通常作为父工程,用于管理jar包的依赖,锁定jar包版本 选择next group id :如表面意思 组织名 公司名 artifact id :工 ...
- C++ string中的find()函数
1.string中find()返回值是字母在母串中的位置(下标记录),如果没有找到,那么会返回一个特别的标记npos.(返回值可以看成是一个int型的数) #include<cstring> ...
- Graph Without Long Directed Paths CodeForces - 1144F (dfs染色)
You are given a connected undirected graph consisting of nn vertices and mm edges. There are no self ...
- echarts x轴 增加滚动条
charts x轴 增加滚动条 在option 配置项中添加 [ dataZoom 中配置 ] 设置x轴滚动条 效果图: 动态拖动 以下参考代码 dataZoom配置 官网写法 option = { ...
- 福州大学软件工程1816 | W班 第10次作业[个人作业——软件产品案例分析]
作业链接 个人作业--软件产品案例分析 评分细则 本次个人项目分数由两部分组成(课堂得分(老师/助教占比60%,学生占比40%)满分40分+博客分满分60分) 课堂得分和博客得分表 评分统计图 千帆竞 ...
- html总结:背景图片拉伸
两种方法: ⑴推荐方法 <style>body {background-image:url(images/backimage.jpg);background-size:cover;}< ...