首先介绍一下是什么意思:

意思就是当你给一个vue组件绑定事件时候,要加上native!如果是普通的html元素!就不需要

<div id = "app">
<my-component @click="i_said"></my-component>
</div> Vue.component('my-component', {
template: "<button>点击我</button>",
}) new Vue({
el:"#app",
methods:{
i_said(){
alert("Hello world");
}
}
})

这样在组件上添加事件是没有效果的,如果是普通的html标签当然没问题比如

<div id = "app">
<button @click="i_said">点击我</button>
</div> new Vue({
el:"#app",
methods:{
i_said(){
alert("Hello world");
}
}
})

这样肯定没问题,

组件上添加自定义事件也没问题比如

<div id = "app">
<my-component @say="i_said"></my-component>
</div> Vue.component("my-component", {
template: "<button @click='greet'>点击我</button>",
methods:{
greet(){
this.$emit("say", "Hello world");
}
}
}) new Vue({
el:"#app",
methods:{
i_said(message){
alert(message)
}
}
})

这样也完全没有问题也直接弹出“Hello world”

但是组件要添加原生事件需要加上.native 才会生效

 <div id = "app">
<my-component @click.native="i_said"></my-component>
</div> Vue.component('my-component', {
template: "<button>点击我</button>",
}) new Vue({
el:"#app",
methods:{
i_said(){
alert("Hello world");
}
}
})

这样就能执行了!

Vue-native绑定原生事件的更多相关文章

  1. vue组件绑定原生事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

  3. vuejs给组件绑定原生事件

    给组件绑定事件,该事件是自定义的事件 <div id='root'> <child @click='handleClick'></child> </div&g ...

  4. vue 给组件绑定原生事件

    有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...

  5. Vue组件绑定自定义事件

    Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...

  6. elmentUI组件怎么绑定原生事件

    el-input为例: <el-input id="user-input" type="textarea" placeholder="请换行输入 ...

  7. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  8. Vue样式绑定和事件处理器

    一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...

  9. Vue样式绑定、事件绑定

    1.样式绑定 1.1class类标签绑定 <p :class="对象"> <p :class="数组"> <p :class=&q ...

随机推荐

  1. flume(2)

    接续上一篇:https://www.cnblogs.com/metianzing/p/9511852.html 这里也是主要记录配置文件. 以上一篇案例五为基础,考虑到日志服务器和采集日志的服务器往往 ...

  2. C# WinForm 中Label自动换行 解决方法

    在TableLayoutPannel中放着一些Label如果把Label的AutoSize属性设成True的话,文字超过label长度时就会自动增加,直到后面的字出窗体以外设置成False时,一旦到达 ...

  3. 51nod1600 Simple KMP

    题目描述 对于一个字符串|S|,我们定义fail[i],表示最大的x使得S[1..x]=S[i-x+1..i],满足(x<i) 显然对于一个字符串,如果我们将每个0<=i<=|S|看 ...

  4. Oracle中动态SQL详解(EXECUTE IMMEDIATE)

    Oracle中动态SQL详解(EXECUTE IMMEDIATE) 2017年05月02日 18:35:48 悠悠倾我心 阅读数:744 标签: oracle动态sqloracle 更多 个人分类:  ...

  5. php常见五种设计模式

    php面向对象基础知识 请点击查看 一.常见的设计模式主要有23种,根据使用目标的不同可以分为以下三大类:创建设计模式.结构设计模式.行为模式创建设计模式: (5种)用于创建对象时的设计模式.初始化对 ...

  6. linux ( CentOS 7)下Tengine(nginx)的安装与配置

    TengineTengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.它的目的是打造一个高效.安全的Web平台. 使用root用户安装 ...

  7. VS code 同步设置与插件

    准备工作:拥有一个github账户,电脑上需安装VSCode.实现同步的功能主要依赖于VSCode插件 "Settings Sync"第一步:安装同步插件Settings Sync ...

  8. Linux实用技巧--隧道

    平时开发过程中,可能会遇到一些网络问题,比如npm install 一些依赖包.本地电脑是可以,没有问题.但是测试环境服务器,由于公司内部网络安全限制,不可以随意访问外部网络.因此下载一个依赖包就变得 ...

  9. 搞死人不偿命的 Bank系统

    每一个成功者都有一个开始.勇于开始,才能够找到通往成功的路. 最近C#进行到第三章:升级Mybank,发现这是一个我个人觉得比较难搞的一个东西,一下是我对Bank系统难点的叙述,请大神笔下留情~ 1. ...

  10. cts-on-gsi测试流程

    测试前提: 1.发货user版本 2.selinux:Enable 3.连接ADB,stay awake 4.烧录XXX申请的key 5.外网环境(ipv6) ATV9测试准备(正常准备环境+fast ...