Vue.js划分组件的方法


Posted in Javascript onOctober 29, 2017

常见的一些页面,大家坐在一起敲代码就可以了,做完这个页面再做别的页面,但是作为一个功能复杂的系统,尤其是使用一些适合模块化开发的框架,这样会显得效率很低,那么我们就单纯的看在Vue里面如何划分组件的。

总结下来有两种可以划分,两种划分的方法一种是页面上的功能块,select,pagenation,和一些需要大量代码去实现的一些部分,我们可以把它提取出来放到一起或者分类。还有一种根据页面区域来划分,header,footer,sidebar,有了组件之后Vue的组件是怎么实现的?

Vue.js划分组件的方法

Vue的组件是怎么实现的?先来看一下在文件系统里面是什么样的

Vue.js划分组件的方法

APP.vue是项目的一个入口,而我们分好的组件也是一个对象,在APP.vue里面,我们把各个组件用import 导入,header指的是右边的header.vue文件,这个写法是es6的一个写法,当然如果不用不用es6组件化,也得用其他的一些requires来写,进行一个打包处理,如果只是把这两个组件引入到app.vue 里面,在页面中还是现实 不了这两个组件的。

在Vue里面 必须通过components来注册这个组件,把引入进来的  放入,然后在模板层面上再来写<header></header>和<footer></footer>,在渲染之后,模板层面会变成header.vue和footer.vue里面的内容,有一点需要注意,Vue必须要去注册才可以使用

Vue.js划分组件的方法

介绍一下Vue组件之间的通信,秉承了一个概念,必须先要注册,header.vue文件里面的代码,假设我们里面有个data是username,然后方法是dothis,我们看到有一个属性props,注册了一个msg,当我们的app.vue调用了header这个组件的时候,我们可以直接在header属性里面写msg,并且把app.vue里面任何的数据东西传到header.vue里面,所有的都由Vue的机制去实现,如果header.vue这里没有写msg的话,是获取不到属性的。

总结

以上所述是小编给大家介绍的Vue.js划分组件的方法,希望对大家有所帮助!

Javascript 相关文章推荐
jquery.validate使用攻略 第一部
Jul 01 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 #Javascript
vue.js todolist实现代码
Oct 29 #Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 #Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 #jQuery
bootstrap table sum总数量统计实现方法
Oct 29 #Javascript
vue.js语法及常用指令
Oct 29 #Javascript
基于vue.js快速搭建图书管理平台
Oct 29 #Javascript
You might like
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
WebPack基础知识详解
2017/01/16 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python入门之modf()方法的使用
2015/05/15 Python
python基础教程之匿名函数lambda
2017/01/17 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
python如何保存文本文件
2020/06/07 Python
python 实现音频叠加的示例
2020/10/29 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
捐助倡议书范文
2014/04/15 职场文书
研究生求职自荐书
2014/06/23 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
学习张林森心得体会
2014/09/10 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS