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 相关文章推荐
javascript入门基础之私有变量
Feb 23 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
js实现密码强度检验
Jan 15 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
vue实现购物车小案例
Sep 27 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 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入门之常量简介和系统常量
2014/05/12 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
jquery 插件学习(五)
2012/08/06 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
HTML5标签大全
2016/11/23 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
优秀干部获奖感言
2014/01/31 职场文书
绿色小区申报材料
2014/08/22 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
社区植树节活动总结
2015/02/06 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
工程主管竞聘书
2015/09/15 职场文书
纪律委员竞选稿
2015/11/19 职场文书
2015元旦感言
2015/12/09 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
Windows7下FTP搭建图文教程
2022/08/05 Servers