Vue组件化编程

晨曦生辉耀匕尖 / 2023-07-08 / 原文

一、非单文件组件

  1 <!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 <!--
 10     Vue中使用组件的三大步骤：
 11         一、定义组件(创建组件)
 12         二、注册组件
 13         三、使用组件(写组件标签)
 14     一、如何定义一个组件？
 15         使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
 16         区别如下：
 17             1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
 18             2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
 19         备注：使用template可以配置组件结构。
 20     二、如何注册组件？
 21         1.局部注册：靠new Vue的时候传入components选项
 22         2.全局注册：靠Vue.component('组件名',组件)
 23     三、编写组件标签：
 24         <school></school>
 25 -->
 26 <!--
 27     几个注意点：
 28     1.关于组件名:
 29         一个单词组成：
 30             第一种写法(首字母小写)：school
 31             第二种写法(首字母大写)：School
 32         多个单词组成：
 33             第一种写法(kebab-case命名)：my-school
 34             第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
 35         备注：
 36             (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
 37             (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
 38     2.关于组件标签:
 39         第一种写法：<school></school>
 40         第二种写法：<school/>
 41         备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。
 42     3.一个简写方式：
 43         const school = Vue.extend(options) 可简写为：const school = options
 44 -->
 45 <div id="root">
 46     <hello></hello>
 47     <hr>
 48     <h1>{{msg}}</h1>
 49     <!-- 第三步：编写组件标签 -->
 50     <school></school>
 51     <hr>
 52     <!-- 第三步：编写组件标签 -->
 53     <student></student>
 54 </div>
 55 </body>
 56 <script type="text/javascript">
 57 
 58         // 第一步：创建school组件
 59         const school = Vue.extend({
 60             template:`
 61             <div>
 62                 <h2>学校名称：{{schoolName}}</h2>
 63                 <h2>学校地址：{{address}}</h2>
 64                 <button @click="showName">点我提示学校名</button>
 65             </div>
 66             `,
 67             data(){
 68                 return{
 69                     schoolName:"京东",
 70                     address:"北京"
 71                 }
 72             },
 73             methods:{
 74                 showName(){
 75                     alert(this.schoolName)
 76                 }
 77             }
 78         })
 79         // 第一步：创建student组件
 80         const student = Vue.extend({
 81             template:`
 82             <div>
 83                 <h2>学生姓名：{{studentName}}</h2>
 84                 <h2>学生年龄：{{age}}</h2>
 85             </div>
 86             `,
 87             data(){
 88                 return{
 89                     studentName:"张三",
 90                     age:18
 91                 }
 92             }
 93         })
 94 
 95         //第一步：创建hello组件
 96         const hello = Vue.extend({
 97             template:`
 98                 <div>
 99                     <h2>你好啊！{{name}}</h2>
100                 </div>
101             `,
102             data(){
103                 return {
104                     name:'Tom'
105                 }
106             }
107         })
108 
109         Vue.component('hello',hello)
110 
111         new Vue({
112             el:'#root',
113             data: {
114                 msg:'你好啊！'
115             },
116             //第二步：注册组件（局部注册）
117             components:{
118                 school,
119                 student
120             }
121         })
122 </script>
123 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>非单文件组件2</title>
 6     <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="root">
10     <h1>{{msg}}</h1>
11     <app></app>
12 </div>
13 </body>
14 <script type="text/javascript">
15         const student = Vue.extend({
16             template:`
17             <div>
18                 <h2>学生姓名：{{name}}</h2>
19                 <h2>学生年龄：{{age}}</h2>
20             </div>
21             `,
22             data(){
23                 return{
24                     name:"张三",
25                     age:18
26                 }
27             }
28         })
29 
30         const school = Vue.extend({
31             template: `
32             <div>
33                 <h2>学校名称：{{name}}</h2>
34                 <h2>学校地址：{{address}}</h2>
35                 <student></student>
36             </div>
37             `,
38             data(){
39                 return{
40                     name:"京东",
41                     address:"北京"
42                 }
43             },
44             components:{
45                 student
46             }
47         })
48 
49         //定义hello组件
50         const hello = Vue.extend({
51             template:`<h1>{{msg}}</h1>`,
52             data(){
53                 return {
54                     msg:'欢迎来到京东学习！'
55                 }
56             }
57         })
58 
59         //定义app组件
60         const app = Vue.extend({
61             template:`
62                 <div>
63                     <hello></hello>
64                     <school></school>
65                 </div>
66             `,
67             components:{
68                 school,
69                 hello
70             }
71         })
72 
73         new Vue({
74             el:'#root',
75             data: {
76                 msg:'你好啊！'
77             },
78             components:{
79                 app
80             }
81         })
82 </script>
83 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>非单文件组件3-VueComponent</title>
 6     <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9 <!--
10     关于VueComponent：
11     1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
12     2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
13         即Vue帮我们执行的：new VueComponent(options)。
14     3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
15     4.关于this指向：
16         (1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
17         (2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
18     5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
19         Vue的实例对象，以后简称vm。
20 
21     一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype    !!!!!!!!!
22     为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
23 -->
24 <div id="root">
25     <h1>{{msg}}</h1>
26     <school></school>
27     <hello></hello>
28 </div>
29 </body>
30 <script type="text/javascript">
31 
32         const school = Vue.extend({
33             name:"school",
34             template: `
35             <div>
36                 <h2>学校名称：{{name}}</h2>
37                 <h2>学校地址：{{address}}</h2>
38                 <button @click="showName">点我提示学校名</button>
39             </div>
40             `,
41             data(){
42                 return{
43                     name:"京东",
44                     address:"北京"
45                 }
46             },
47             methods: {
48                 showName(){
49                     console.log('showName',this)
50                 }
51             },
52         })
53 
54         const test = Vue.extend({
55             template:`<span>jingdong</span>`
56         })
57 
58         //定义hello组件
59         const hello = Vue.extend({
60             template:`
61             <div>
62               <h2>{{msg}}</h2>
63               <test></test>
64             </div>
65             `,
66             data(){
67                 return {
68                     msg:'欢迎来到京东学习！'
69                 }
70             },
71             components:{test}
72         })
73 
74         // console.log('@',school)
75         // console.log('#',hello)
76 
77         const vm = new Vue({
78             el:'#root',
79             data: {
80                 msg:'你好啊！'
81             },
82             components:{
83                 school,
84                 hello
85             }
86         })
87 </script>
88 </html>

二、单文件组件

1、index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6 </head>
 7 <body>
 8     <div id="root"></div>
 9     <script type="text/javascript" src="../js/vue.js"></script>
10     <script type="text/javascript" src="./main.js"></script>
11 </body>
12 </html>

2、main.js

1 import App from "./App";
2 
3 new Vue({
4     el:'#root',
5     template: `<App></App>`,
6     component:{
7         App
8     }
9 })

3、App.vue

 1 <template>
 2     <div>
 3     <School></School>
 4     <Student></Student>
 5     </div>
 6 </template>
 7 
 8 <script>
 9   import School from "./School";
10   import Student from "./Student";
11 
12     export default {
13         name:'App',
14         components:{
15       School,
16       Student
17         },
18         data(){
19             return {
20 
21             }
22         }
23     }
24 </script>

4、School.vue

 1 <template>
 2   <div class="demo">
 3     <h2>学校名称：{{name}}</h2>
 4     <h2>学校地址：{{address}}</h2>
 5     <button @click="showName">点我提示学校名</button>
 6   </div>
 7 </template>
 8 
 9 <script>
10   export default {
11     name:'School',
12     data(){
13       return {
14         name:'京东',
15         address:'北京'
16       }
17     },
18     methods: {
19       showName(){
20         alert(this.name)
21       }
22     },
23   }
24 </script>
25 
26 <style>
27   .demo{
28     background-color: orange;
29   }
30 </style>

5、Student.vue

 1 <template>
 2   <div>
 3     <h2>学生姓名：{{name}}</h2>
 4     <h2>学生年龄：{{age}}</h2>
 5   </div>
 6 </template>
 7 
 8 <script>
 9   export default {
10     name:'Student',
11     data(){
12       return {
13         name:'张三',
14         age:18
15       }
16     }
17   }
18 </script>