动力节点老杜Vue笔记第三章 Vue组件化
3 Vue组件化
3.1 什么是组件
- 传统方式开发的应用
一个网页通常包括三部分：结构（HTML）、样式（CSS）、交互（JavaScript）
传统应用存在的问题：
- 关系纵横交织，复杂，牵一发动全身，不利于维护。
- 代码虽然复用，但复用率不高。
- 组件化方式开发的应用
使用组件化方式开发解决了以上的两个问题：
-
每一个组件都有独立的js，独立的css，这些独立的js和css只供当前组件使用，不存在纵横交错。更加便于维护。
-
代码复用性增强。组件不仅让js css复用了，HTML代码片段也复用了（因为要使用组件直接引入组件即可）。
-
什么是组件？
组件：实现应用中局部功能的代码和资源的集合。凡是采用组件方式开发的应用都可以称为组件化应用。 -
模块：一个大的js文件按照模块化拆分规则进行拆分，生成多个js文件，每一个js文件叫做模块。凡是采用模块方式开发的应用都可以称为模块化应用。
-
任何一个组件中都可以包含这些资源：HTML CSS JS 图片 声音 视频等。从这个角度也可以说明组件是可以包括模块的。
-
组件的划分粒度很重要，粒度太粗会影响复用性。为了让复用性更强，Vue的组件也支持父子组件嵌套使用。
子组件由父组件来管理，父组件由父组件的父组件管理。在Vue中根组件就是vm。因此每一个组件也是一个Vue实例。
3.2 组件的创建、注册和使用
<!DOCTYPE html**>**
2. **<html** lang="en"**>**
3. **<head>**
4. **<meta** charset="UTF-8"**>**
5. **<title>**组件的创建注册和使用**</title>**
6. **<script** src="../js/vue.js"**></script>**
7. **</head>**
8. **<body>**
9. **<div** id="app"**>**
10. **<h1>**{{msg}}**</h1>**
11. <!-- 3.使用组件 -->
12. **<userlist></userlist>**
13. **<userlist></userlist>**
14. **<userlogin></userlogin>**
15. **<userlogin></userlogin>**
16. **</div>**
17. **<script>**
18. // 1.创建组件
19. const userListComponent = Vue.extend({
20. template : `
21. **<ul>**
22. **<li** v-for="(user,index) of users" :key="user.id"**>**
23. {{index}},{{user.name}}
24. **</li>**
25. **</ul>**
26. `,
27. data(){
28. return {
29. users : [
30. {id:'001', name:'jack'},
31. {id:'002', name:'lucy'},
32. {id:'003', name:'james'}
33. ]
34. }
35. }
36. })
37.
38. // 1.创建组件
39. const userLoginComponent = Vue.extend({
40. template : `
41. **<div>**
42. **<h3>**用户登录**</h3>**
43. **<form** @submit.prevent="login"**>**
44. 账号：**<input** type="text" v-model="username"**><br><br>**
45. 密码：**<input** type="password" v-model="password"**><br><br>**
46. **<button>**登录**</button>**
47. **</form>**
48. **</div>**
49. `,
50. data(){
51. return {
52. username : 'admin',
53. password : '123'
54. }
55. },
56. methods : {
57. login(){
58. alert(this.username + "," + this.password)
59. }
60. }
61. })
62.
63. const vm = new Vue({
64. el : '#app',
65. data : {
66. msg : '组件的创建注册和使用'
67. },
68. // 2.注册组件（局部注册）
69. components : {
70. // userlist 就是组件的名字
71. userlist : userListComponent,
72. userlogin : userLoginComponent
73. }
74. })
75. **</script>**
76. **</body>**
77. **</html>**
1. 创建组件
1. const userComponent = Vue.extend({这个配置项和创建Vue实例的配置项几乎是一样的，只是略有差异})
2. 需要注意的是：
1. el不能用。组件具有通用性，不特定为某个容器服务，它为所有容器服务。
2. data必须使用函数形式：return {}
3. 使用template配置项配置页面结构：HTML。
2. 注册组件
1. 局部注册
1. 使用components配置项：components : {user : userComponent}，user就是组件名。
2. 全局注册
1. Vue.component(‘user’, userComponent)
3. 使用组件
1. 直接在页面需要使用组件的位置：**
3. ****
4. ****
5. ****组件嵌套** **
6. ****
7. ****
8. ****
9. **