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 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
微信小程序三级联动选择器使用方法
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根据IP地址获取所在城市具体实现
2013/11/27 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python中定义结构体的方法
2013/03/04 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
python实现图片转字符画
2021/02/19 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
机械电子工程专业求职信
2014/06/22 职场文书
股指期货心得体会
2014/09/10 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
教师自荐信范文
2015/03/06 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
golang的文件创建及读写操作
2022/04/14 Golang