Vue組件化編程

一、非單文件組件

  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>

posted on 2023-07-08 15:39 晨曦生輝耀匕尖閱讀(32) 評論(0) 收藏舉報

刷新頁面返回頂部

Vue組件化編程

一、非單文件組件

二、單文件組件

1、index.html

2、main.js

3、App.vue

4、School.vue

5、Student.vue

公告