Vue组件之自定义事件的功能图解


Posted in Javascript onFebruary 01, 2018

使用v-on绑定自定义事件

(一)基于webpack的项目初始化

在使用之前,我们先使用npm构建一个vue应用,使该项目能很好地和webpack模块打包器配合使用,命令如下

进入自定义空文件夹vuepro下,myapp项目初始化需利用webpack打包生成一个标准目录的项目文件夹

vue init webpack myapp

安装过程会出现以下几个让我们操作的地方,前几个直接按回车,后面输入n即可,如下图

Vue组件之自定义事件的功能图解

安装完成后,myapp文件夹下会自动生成一些文件和文件夹,表示我们项目初始化完成,而我们的的APP.vu是主组件,components组件是Vue的一种代码复用的机制,components把js和HTML混合到一起,作为整个Vue应用层的基础

Vue组件之自定义事件的功能图解

我们可以根据上图终端提示的命令去运行我们的项目

cd myapp

npm run dev

Vue组件之自定义事件的功能图解

我们再将上图中得到的网址赋值到浏览器打开,得到以下页面表示我们基于webpack的项目构建成功

Vue组件之自定义事件的功能图解

打开主组件,如果亲们出现了下图和我一样的提醒,是因为我们的javascript不支持ES6语法,我们只需进入设置里面改一下语言类型就可以了。

Vue组件之自定义事件的功能图解

Vue组件之自定义事件的功能图解

到这里我们可以去介绍组件自定义事件的使用了

(二)v-on && $emit 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件

我们在myapp/src/components下新建一个组件Emit.vue,同时我们得在主组件APP.vue中引入该组件,以及注册该组件

Vue组件之自定义事件的功能图解

然后我们在Emit.vue文件中去些一个自定义事件的例子

Vue组件之自定义事件的功能图解

当我们点击按钮就能获取到组件内部的事件盒参数

Vue组件之自定义事件的功能图解

总结

以上所述是小编给大家介绍的Vue组件之自定义事件的功能图解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
3分钟了解vue数据劫持的原理实现
May 01 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
微信小程序三级联动选择器使用方法
May 19 #Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
使用JS模拟锚点跳转的实例
Feb 01 #Javascript
微信小程序实现图片预览功能
Jan 31 #Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 #Javascript
微信小程序实现MUI数字输入框效果
Jan 31 #Javascript
微信小程序实现折叠面板
Jan 31 #Javascript
You might like
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
使用python实现个性化词云的方法
2017/06/16 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
python的pip有什么用
2020/06/17 Python
flask项目集成swagger的方法
2020/12/09 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
办公室文秘自我鉴定
2013/09/21 职场文书
公司股权转让协议书
2014/04/12 职场文书
天坛导游词
2015/02/02 职场文书
股东大会通知
2015/04/24 职场文书
民事纠纷协议书
2016/03/23 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
《废话连篇——致新手》——chinapizza
2022/04/05 无线电