vue2.0 之事件处理器

事件绑定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方法，在控制台生成日志内容

转载于:https://www.cnblogs.com/shhnwangjian/p/7082652.html

vue2.0 之事件处理器相关推荐

前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器
一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:  {{#if ok}}<h1> ...
vue2[初级]事件处理器
本节内容什么是事件处理器例如我们点击一个连接时只想记录被点击的连接地址而不是真正的要去跳转到连接此时需要使用.prevent事件处理器来控制事件处理器还可以控制当前事件是否需要继续向上渲染 ...
vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解
最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...
【Vue2.0】— 全局事件总线GlobalEventBus（十九）
[Vue2.0]- 全局事件总线GlobalEventBus(十九) main.js import Vue from 'vue' import App from './App.vue' Vue.con ...
【Vue2.0】— 组件的自定义事件（十八）
[Vue2.0]- 组件的自定义事件(十八) <template><div ><h2>{{msg}}</h2><!-- 通过父组件给子组件传递函数 ...
【Vue2.0】—表单事件数据绑定（六）
[Vue2.0]-表单事件数据绑定(六) <body><div id="root"><form action="" @submit ...
【Vue2.0】—键盘事件（三）
[Vue2.0]-键盘事件(三)
【Vue2.0】—事件处理和事件修饰符（二）
[Vue2.0]-事件处理和事件修饰符(二) <div id="root"><h2>{{name}},加油!</h2><!-- 阻止默认事 ...
Vue2.0中的事件修饰符
Vue2.0中的事件修饰符: 1.prevent:阻止默认事件,原生js里面为event.preventDefault() 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture ...
vue2.0读书笔记2-进阶
一.深入响应式原理二.过渡效果三.过渡状态四.Render函数五.自定义指令六.混合七.插件八.单文件组件九.生产环境十.路由 vue-router: http://router.v ...

vue2.0 之事件处理器

事件绑定v-on（内置事件）

事件绑定v-on（自定义事件）

vue2.0 之事件处理器相关推荐

最新文章

热门文章