事件绑定v-on(内置事件)

<template>
<div>
<a v-if="isPartA">partA</a>
<a v-else>no data</a>
<button v-on:click="toggle">toggle</button>
<input @keydown.enter="onkeydown">
</div>
</template> <script>
export default {
data () {
return {
isPartA: true
}
},
methods: {
toggle () {
this.isPartA = !this.isPartA
},
onkeydown () {
console.log('on key down')
}
}
}
</script> <style>
html {
height: 100%;
}
</style>

回车,输出如下结果

备注:v-on简写为@

事件绑定v-on(自定义事件)

子组件hello.vue

<template>
<div>
{{ hello }}
<button @click="emitMyEvent">emit</button>
</div>
</template> <script>
export default {
data () {
return {
hello: 'i am component hello'
}
},
methods: {
emitMyEvent () {
this.$emit('my-event', this.hello)
}
}
}
</script> <style scoped>/**/
h1 {
height: 100px;
}
</style>

App,vue

<template>
<div>
<a v-if="isPartA">partA</a>
<a v-else>no data</a>
<button v-on:click="toggle">toggle</button>
<input @keydown.enter="onkeydown">
<comH @my-event="onComhMyEvent"></comH>
</div>
</template> <script>
import comH from './components/hello.vue'
export default {
components: {
comH
},
data () {
return {
isPartA: true
}
},
methods: {
toggle () {
this.isPartA = !this.isPartA
},
onkeydown () {
console.log('on key down')
},
onComhMyEvent (parmformA) {
console.log('onComhMyEvent' + parmformA)
}
}
}
</script> <style>
html {
height: 100%;
}
</style>

点击emit按钮,输出结果如下

1、父组件App.vue引入hello.vue子组件

2、子组件定义emitMyEvent方法,调用父组件my-event自定义事件

3、App.vue中触发onComhMyEvent方法,在控制台生成日志内容

vue2.0 之事件处理器的更多相关文章

  1. vue2.0自定义事件

    我们知道父组件是使用props传递数据给子组件,如果子组件要把数据传递回去,怎么办? 那就是要自定义事件!使用v-on绑定自定义事件 每个Vue实例都实现了事件接口(Events interface) ...

  2. vue2.0阻止事件冒泡

    <!--picker弹窗--><transition name="fade"> <div class="picker_wrap" ...

  3. Vue2.0如何实现父组件与子组件之间的事件发射与接收

    关于vue2.0的事件发射和接收,大家都知道$dispatch和$broadcast在vue2.0已经被弃用了,取而代之的是更加方便快捷的方式,使用事件中心,组件通过它来互相通信,不管组件在哪一个层都 ...

  4. 前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器

    一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...

  5. vue2.0中ckeckbox(复选框)的使用心得,及对click事件和change的理解

    最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...

  6. Vue2.0父子组件间事件派发机制

    从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...

  7. Vue2.0 【第一季】第5节 v-on:绑定事件监听器

    目录 Vue2.0 [第一季] 第5节 v-on:绑定事件监听器 第五节 v-on:绑定事件监听器 一.使用绑定事件监听器,编写一个加分减分的程序. Vue2.0 [第一季] 第5节 v-on:绑定事 ...

  8. vue2.0那些坑之使用elementUI后v-on:click事件不生效问题

    最近在维护vue2.0的项目,遇到了不少坑,在这里说下引用elementui之后,使用v-on:click绑定点击事件无效的情况,如下图: 我想阻止冒泡事件,发现无效.这里将@click换成了@cli ...

  9. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

随机推荐

  1. Linux内核分析——ELF文件格式分析

    ELF文件(目标文件)格式主要三种: 1)可重定向文件:文件保存着代码和适当的数据,用来和其他的目标文件一起来创建一个可执行文件或者是一个共享目标文件.(目标文件或者静态库文件,即linux通常后缀为 ...

  2. CRM 数据查重

    2.8 小工具 · 纷享销客产品手册https://www.fxiaoke.com/mob/guide/crmdoc/src/2-8%E5%B0%8F%E5%B7%A5%E5%85%B7.html C ...

  3. Docker查看容器IP

    https://segmentfault.com/q/1010000001637726 https://blog.csdn.net/sannerlittle/article/details/77063 ...

  4. FileUtils功能概述

    https://commons.apache.org/proper/commons-io/javadocs/api-release/org/apache/commons/io/FileUtils.ht ...

  5. JS创建事件的三种方式(实例)

    1.普通的定义方式 <input type="button" name="Button" value="确定" onclick=&qu ...

  6. [转帖]新的Linux后门开始肆虐 主要攻击中国服务器

    新的Linux后门开始肆虐 主要攻击中国服务器 https://www.cnbeta.com/articles/tech/815639.htm 一种新的 Linux 系统后门已经开始肆虐,并主要运行在 ...

  7. matplotlib绘图2

    fig=plt.figure() fig.add_subplot(3,3,1)#3行3列 第一个图 n=128 X=np.random.normal(0,1,n) Y=np.random.normal ...

  8. 编译安装openssl

    wget https://www.openssl.org/source/openssl-1.1.0g.tar.gztar xf openssl-1.1.0g.tar.gzcd openssl-1.1. ...

  9. oracle小知识点

    一 . procedure和function: procedure和function在语法上几乎完全一样,使用上却有小小的差别, procedure可以单独的调用 在命令行直接exec pro_xxx ...

  10. 将关系型数据库抽取成redis的思路

    思路是 先把id抽取出来形成一个·list表示数量 然后再把表变成键值对形式把id当做成键