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 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
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中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
php微信公众号开发模式详解
2016/11/28 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
php和nginx交互实例讲解
2019/09/24 PHP
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
Python判断有效的数独算法示例
2019/02/23 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
Python列表与元组的异同详解
2019/07/02 Python
Python3+Appium安装使用教程
2019/07/05 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
函授本科毕业生自我鉴定
2013/10/16 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
中班中秋节活动反思
2014/02/18 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
女儿满月酒致辞
2015/07/29 职场文书
使用pytorch实现线性回归
2021/04/11 Python
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
使用CSS实现音波加载效果
2023/05/07 HTML / CSS