vue组件化开发学习笔记-1-组件化开发思想

一，由机械设计角度理解组件化思想

就像是机械设计中，整机通常由各个部件构成，各个部件实现特定的功能。经过机械行业长期的发展，有些公司就开始将这些可以实现特定功能的机械模块进行标准化，比如功能模块单一的标准件：螺钉，螺母，轴承这些。
功能结构复杂些的，比如滚珠丝杆，线性导轨，电缸，型材等。
利用这些模块，进行排列组合，就可以实现不同功能的机器设备。
这就是组件化思想。
即将实现不同功能的代码封装成不同的组件，像搭积木一样编程
组件化思想有四个特征：
标准：也就是和机械中的标准化一样，只有标准化，才能带来更大程度的互换性。
**分治：**同样的，就是每个模块可以实现各自独立的功能
**重用：**就像一台非标设备中，可能需要用到很多根滚珠丝杠一样的道理，同一个功能模块，也可能被多次复用。而需要更换也是一样，拆下来换成新的即可。
**组合：**这是基于前三个特征而产生的！各个模块组合起来就可以成为一个新的产品。
而在编程中，组件化开发如下图，一个模块就是一个组件，各个组件之间是父子关系或者兄弟关系，于是开发好组件之后，将他们用这些关系联系起来就可以了！！

二，组件化规范Web Components

这个规范的目标是通过封装创建好功能的定制元素来解决上述问题，这些定制元素的标签名字是它定义好的。不再是div,span之类的了。
但是浏览器还不是很支持这个，所以，只是了解一下，有这么个思想，或者说方向方法。
但是vue部分实现了上述的规范！这就可以学习了！

三，组件注册

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">#app{width: 20%;margin: 200px auto;border: 1px solid #ccc;line-height: 30px;padding: 20px;}</style></head><body><div id="app"><button-counter></button-counter><!-- 组件的使用，直接用定义的名字做标签就可以了 --></div><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript">//定义一个名为button-counter的新组件Vue.component('button-counter',{data:function(){return  {count:0}},// data的值需要是一个函数,return需要是一个对象,对象中就存放数据template:'<button @click="count++">点击了{{count}}次</button>'})var vm= new Vue({el:'#app'})</script></body>
</html>

效果：

值得注意的点：
1，data的值必须是一个函数

2，组件模板内容必须是单个根元素（最外层只有一个标签，不能多个并列）

3，组件模板内容可以是模板字符串，因为模板太长，都在一行，很丑的，就可以用模板字符串：

             template:`<div><button @click='count++'>点击了{{count}}次</button><button>测试123</button></div>`

四，组件的命名方式

第一种：中间通过横杆：button-counter
第二种：驼峰式：buttonCounter
需要注意的地方是：如果使用驼峰命名组件，那么必须在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件（在模板字符串中可以使用其他定义好的组件名称），但是在普通的标签使用时，必须使用短横线的方式使用组件。
所以直接使用短横线就没那么多事情了！

五，局部组件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">#app{width: 20%;margin: 200px auto;border: 1px solid #ccc;line-height: 30px;padding: 20px;}</style></head><body><div id="app"><one></one><second></second><three></three></div><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript">var HelloWorld1={data:function(){return {msg:'HelloWorld'}},template:'<div>{{msg}}</div>'}var HelloWorld2={data:function(){return {msg:'第二个'}},template:'<div>{{msg}}</div>'}var HelloWorld3={data:function(){return {msg:'第三个'}},template:'<div>{{msg}}</div>'}//这上面的三个都是先定义好对象,var vm= new Vue({el:'#app',data:{},//这里直接components开始定义组件components:{// 组件的定义方式,键值对的形式，键是字符串，值是对象'one':HelloWorld1,'second':HelloWorld2,'three':HelloWorld3}})</script></body>
</html>