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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
Vue前端开发规范整理(推荐)
Apr 23 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
php框架知识点的整理和补充
2021/03/01 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
分析Python读取文件时的路径问题
2018/02/11 Python
分享vim python缩进等一些配置
2018/07/02 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Python列表元素常见操作简单示例
2019/10/25 Python
Python&&GDAL实现NDVI的计算方式
2020/01/09 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
收入证明怎么写
2015/06/12 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
SQL Server删除表中的重复数据
2022/05/25 SQL Server