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

意思就是当你给一个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. Dubbo学习-2-注册中心搭建

    1.Dubbo支持如下几种注册中心,推荐使用zookeeper来作为注册中心. 2. 下载zookeeper https://zookeeper.apache.org/releases.html#do ...

  2. 如何查看本机上安装的.NET Framework版本

    在开始菜单选择"运行", 或者快捷键 “windows键+R” 在命令窗口输入regedit.exe,打开注册表 在注册表中定位到如下节点 HKEY_LOCAL_MACHINE\S ...

  3. Python3解leetcode First Bad Version

    问题描述: You are a product manager and currently leading a team to develop a new product. Unfortunately ...

  4. AOP说明

    小程序的开发者或者服务商会提供一些lib库,用来代理小程序的生命周期或API等,进而想要进行一些通用逻辑的处理(例如: 打点/事件触发/统一登录等等通用逻辑). 通常,小程序开发者们使用这些扩展包时, ...

  5. WINDOWS2008server安全策略设置

    一.防止黑客或恶意程序暴力破解我的系统密码 答: 暴力破解Windows密码实质上是通过穷举算法来实现,尤其是密码过于简单的系统,暴力破解的方法还是比较实用的.有一点需要我们注意,这个问题的关键在于W ...

  6. 如何选择Linux操作系统版本?

    一般来讲, 桌面用户首选Ubuntu; 服务器首选RHEL或CentOS, 两者中首选CentOS; 根据具体要求: 1.安全性要求较高, 则选择Debian或者FreeBSD. 2.需要要使用数据库 ...

  7. Spring源码解读--(一)源码下载

    走在Java程序员这条路上,网上Java各种工具满天飞,写个简单的CRUD,相信是个开发都能写出来,于是在思考如何可以在同行业中更有竞争力(其实就是如何赚更多钱).那么,老大给我推荐了Spring源码 ...

  8. Oracle Data Guard Protection Modes

    Maximum Availability This protection mode provides the highest level of data protection that is poss ...

  9. JPEG 存储分割后的图象会产生锯齿

    分割后的图象如果保存为 JPG 格式,物体边界会产生锯齿状的很暗的像素. 如下图所示. 这会给后续处理带了噪声, 因此,保存分割后的图象最好用无损压缩格式,如 bmp, png 等.

  10. Spring框架各Jar包说明

    来源:https://blog.csdn.net/weisong530624687/article/details/50888094 前言: (1)spring.jar 是包含有完整发布模块的单个ja ...