Vue组件化编程

2. Vue 组件化编程

2. 1 非单文件组件

快速入门

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件title>
    <script type="text/javascript" src="../js/vue.js">script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.4/dayjs.min.js">script>

head>
<body>
    <div id="root">
        <school>school>
        <student>student>
        <hello>hello>
    div>
    <script type="text/javascript">
        const school = Vue.extend({
            template:`
                
                    {{name}}
                    {{loc}}
                
            `,
            data(){
                return {
                    name:'AAA',
                    loc:'BBB',
                }
            }
        })
        const student = Vue.extend({
            data(){
                return {
                    name:'王二',
                    age:18
                }
            },
            template:`
                
                    {{name}}
                    {{age}}
                
            `,
        })

        const hello = Vue.extend({
            data(){
                return {
                    name:'王二',
                }
            },
            template:`
                
                    hello, {{name}}
                
            `,
        })
        // 注册为全局组件
        Vue.component('hello', hello)
        const vm = new Vue({
            el:'#root',
            // 配置局部组件
            components:{
                school,
                student
            }
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

组件命名注意点

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>命名的注意点title>
    <script type="text/javascript" src="../js/vue.js">script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.4/dayjs.min.js">script>

head>
<body>
    <div id="root">
        
        <my-school>my-school> 
        <student>student>
        <hello>hello>
    div>
    <script type="text/javascript">
        const school = {
            template:`
                
                    {{name}}
                    {{loc}}
                
            `,
            data(){
                return {
                    name:'AAA',
                    loc:'BBB',
                }
            }
        }
        const student = Vue.extend({
            name:'Wanger', // 在Vue开发者工具显示的名字，如不定义，就显示注册的名字
            data(){
                return {
                    name:'王二',
                    age:18
                }
            },
            template:`
                
                    {{name}}
                    {{age}}
                
            `,
        })

        const hello = Vue.extend({
            data(){
                return {
                    name:'王二',
                }
            },
            template:`
                
                    hello, {{name}}
                
            `,
        })
        // 注册为全局组件
        Vue.component('hello', hello)
        const vm = new Vue({
            el:'#root',
            // 配置局部组件
            components:{
                'my-school':school,
                student
            }
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

组件的嵌套

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的嵌套title>
    <script type="text/javascript" src="../js/vue.js">script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.4/dayjs.min.js">script>

head>
<body>
    <div id="root">
        <app>app>
    div>
    <script type="text/javascript">
        const student = Vue.extend({
            name:'student',
            data(){
                return {
                    name:'王二',
                    age:18
                }
            },
            template:`
                
                    {{name}}
                    {{age}}
                
            `,
        })
        
        const school = {
            name:'school',
            template:`
                
                    {{name}}
                    {{loc}}
                    
                
            `,
            data(){
                return {
                    name:'AAA',
                    loc:'BBB',
                }
            },
            components:{
                student
            }
        }
        

        const hello = Vue.extend({
            name:'hello',
            data(){
                return {
                    name:'王二',
                }
            },
            template:`
                
                    hello, {{name}}
                
            `,
        })
        const app = {
            template:`
                
                     
                        
                
            `,
            components:{
                school,
                hello
            }
        }
        const vm = new Vue({
            el:'#root',
            // 配置局部组件
            components:{
                app
            }
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

VueComponent构造函数

一个重要的内置关系

参考资料

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15&share_source=copy_web&vd_source=d3c9ceb0642f45fbe95f795c0d074040

Vue 官方文档

https://cn.vuejs.org/v2/guide/

Vue api 文档

https://cn.vuejs.org/v2/api/

相关阅读:
旅游网页设计 web前端大作业全球旅游私人订制旅游公司网站模板(HTML+CSS+JavaScript)
c++类和对象实现日期的相关操作
 网上商城项目（加入购物车）
算法 - 拆炸弹（JavaScript）
中创算力九月员工生日会 | 愿尔祯祥，岁岁如常
 Verilog编写VGA控制器
 JAVA集合04_Map接口概述、常用方法、排序、Hashtable面试题
 网络安全——（黑客）自学
 【前端知识之JS】JS原生手写轮播图
 【汇编语言-王爽】第六章：包含多个段的程序
原文地址：https://blog.csdn.net/Joker15517/article/details/126244828