Vue_理解组件化开发

Vue组件化开发

一、什么是组件化：

vue.js 有两大法宝，一个是数据驱动，另一个就是组件化
把一个复杂的问题，拆解成多个简单的可解决的小问题进行逐个解决
所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。
Vue组件注册分为：全局注册和局部注册区别：全局组件是挂载在 Vue.options.components 下，而局部组件是挂载在 vm.$options.components 下，这也是全局注册的组件能被任意使用的原因。

二、组件的分类 一般来说，组件大致可以分为三类：

页面级别的组件。
业务上可复用的组件。
与业务无关的独立组件

 <div id="app"><!-- 组件化开发基本步骤：1.创建组件构造器对象（Vue.extend）2.注册组件 (Vue.component)3.使用组件 <组件标签名></组件标签名>--><cpn></cpn><cpn></cpn><cpn></cpn></div><script src="Vue_Js/vue.js"></script><script>//创建组件构造器var cpnV = Vue.extend({template: `<div><h3>这是标题<h3><span>哦 哈哈哈哈</span></div>`})//注册组件（全局  意味着可以在多个Vue实例中使用）Vue.component("cpn", cpnV)let vm = new Vue({el: "#app",data: {},methods: {},})</script>

//局部组件（意味着只能在本Vue实例中使用这个组件）methods: {},filters:{formatStr:function(msg){var x='a'var y='b'var obj=msgreturn `${x}-${obj}-${y}`}},components:{//cpn 组件标签名  cpnV这是组件构造器对象名称cpn:cpnV}

1.页面级别的组件：
页面级别的组件，通常是pages目录下的.vue组件，是组成整个项目的一个大的页面。一般不会有对外的接口。我们通常开发时，主要就是编写这种组件。如下所示：pages下面的Home.vue(主页)和About.vue(关于我们)等都是一个独立的页面，也是一个独立的组件。

pages
├─ About.vue
└─ Home.vue

2.业务上可复用的组件：
这一类组件通常是在业务中被各个页面复用的组件，这一类组件通常都写到components目录下，然后通过import在各个页面中使用.这一类组件通常是实现某个功能，比如外卖中各个页面都会使用到的评分系统。这个部分就可以实现评分功能，可以写成一个独立的业务组件。比如下面的components中的Star.vue就是一个业务组件。这一类组件的编写通常涉及到组件常用的props,slot和自定义事件等。

components
└─ Star.vue

3.与业务无关的组件：
这一类组件通常是与业务功能无关的独立组件。这类组件通常是作为基础组件，在各个业务组件或者页面组件中被使用目前市面上比较流行的ElementUI和iview等中包含的组件都是独立组件。如果是自己定义的独立组件，比如富文本编辑器等，通常写在utils目录中。

Vue_理解组件化开发相关推荐

【组件化开发】前端进阶篇之如何编写可维护可升级的代码
前言我还在携程的做业务的时候,每个看似简单的移动页面背后往往会隐藏5个以上的数据请求,其中最过复杂的当属机票与酒店的订单填写业务代码这里先看看比较"简单"的机票代码: 然后看看 ...
对前端工程化、模块化、组件化开发的理解
参考理解一: 提到前端往往很多人的映像就是入门简单,HTML.CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短 ...
如何理解Unity组件化开发模式
Unity的开发模式核心:节点和组件,组件可以加载到任何节点上,每个组件都有 gameobject 属性,可以通过这个属性获取到该节点,即游戏物体. 也就是说游戏物体由节点和组件构成,每个组件表示物体 ...
组件化开发和模块化开发概念辨析
网上有许多讲组件化开发.模块化开发的文章,但大家一般都是将这两个概念混为一谈的,并没有加以区分.而且实际上许多人对于组件.模块的区别也不甚明了,甚至于许多博客文章专门解说这几个概念都有些谬误. 想分清 ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
mysql组件化_组件化开发和模块化开发概念辨析
网上有许多讲组件化开发.模块化开发的文章,但大家一般都是将这两个概念混为一谈的,并没有加以区分.而且实际上许多人对于组件.模块的区别也不甚明了,甚至于许多博客文章专门解说这几个概念都有些谬误. 想分清 ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
vue组件化开发实践
前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
360奇舞团钟恒：选用Vue.js进行组件化开发，我们遇到了哪些坑？
责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net. 欢迎加入"CSDN前端开发者"微信群,参与热点.难点技术交流.请加群主微信「Rachel_ ...
React心得之降龙十八掌：第二式-飞龙在天（ React组件化开发及相关概念）
引言 (乾卦九五)<彖>曰:"'飞龙在天',大人造也." 学习了上一章,想必我们对于React有了一个初步的认识,了解了什么是React.什么是JSX.模块与组件.组件 ...

Vue_理解组件化开发

Vue组件化开发

Vue_理解组件化开发相关推荐

最新文章

热门文章