事件绑定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内核分析作业第七周

    一. 预处理.编译.链接 gcc hello.c -o hello. gcc编译源代码生成最终可执行的二进制程序,GCC后台隐含执行了四个阶段步骤. 预处理 → 编译 → 汇编 → 链接 预处理:编译 ...

  2. Linux内核第二节

    作者:武西垚 深入理解函数调用堆栈 堆栈是C语言程序运行时必须的一个记录调用路径和参数的空间 堆栈的作用 函数调用框架 传递参数 保存返回地址 提供局部变量空间 堆栈相关的寄存器 esp,堆栈指针,指 ...

  3. Anaconda2和Anaconda3同时安装

    转载于:https://www.cnblogs.com/zle1992/p/6720425.html 1.先从网站(国内的清华镜像:https://mirrors.tuna.tsinghua.edu. ...

  4. Sprint 冲刺第三阶段第3-5天 数据库代码

    数据库代码: package com.example.brdemo; import android.app.Activity; import android.content.Intent; impor ...

  5. Eclipse 项目有红感叹号

    问题原因]:工程中classpath中指向的包路径错误 [解决办法]:右键项目名称 BuildPath ---> Configure Build Paht...中,然后上面有几个选项卡找到 Li ...

  6. GitHub18

    兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...

  7. [CNBETA]Intel CPU底层漏洞事件完全详解:全球手机/电脑无一幸免[转帖]

    http://www.cnbeta.com/articles/tech/685897.htm 由Intel CPU漏洞问题衍生出来的安全事件已经波及全球几乎所有的手机.电脑.云计算产品,ARM确认 C ...

  8. delphi 通过事务插入数据

    orsn1.StartTransaction; try qry1.Sql.Clear; qry1.Sql.Text:=' select * from log '; qry1.Open; qry1.In ...

  9. 多条件查询 仿淘宝URL传参方式

    ---恢复内容开始--- 最近项目在做一个电商网站,网站涉及到前后台交互的多条件查询,类似于淘宝的多条件查询,图片如下 此类查询主要涉及到的问题有: 1.如何记忆查询参数 2.如何前后台传值 3.中文 ...

  10. LinkedList 实现 Queue

    package cn.com.example; import java.util.LinkedList; /** * Created by Jack on 2017/3/8. */ public cl ...