【Vue 开发实战】基础篇 # 2：组件基础及组件注册

说明

【Vue 开发实战】学习笔记。

组件

通常把可拆分的html，以及拆分后的逻辑，样式组合在一起称之为组件。

在 Vue 中，通过 Vue.component 定义（注册）一个组件：

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>
head>
<body>
    <div id="app">
        {{message}}
        <ul>
            <todo-item v-for="item in list" :title="item.title" :del="item.del">todo-item>
        ul>

        <todo-list>todo-list>
    div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        // 定义一个名为 todo-item 的组件；名字需要唯一
        Vue.component("todo-item", {
            props: {
                title: String,
                del: {
                    type: Boolean,
                    default: false
                }
            },
            template: `
                
                    {{title}}
                    {{title}}
                    
                
            `,
            // data 需要为函数返回一个对象，保证唯一性
            data: function() {
                return {}
            },
            methods: {
                
            },
        });
        // 定义一个名为 todo-list 的组件
        Vue.component("todo-list", {
            template: `
                
                    
                
            `,
            data: function() {
                return {
                    list: [
                        {
                            title: "课程3",
                            del: true
                        },{
                            title: "课程4",
                            del: false
                        },
                    ]
                }
            },
        });

        var vm = new Vue({
            el: "#app",
            data: {
                message: "kaimo 313",
                list: [
                    {
                        title: "课程1",
                        del: true
                    },{
                        title: "课程2",
                        del: false
                    },
                ]
            }
        })
    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

在这里插入图片描述

相关阅读:
普冉PY32系列(十四) 从XL2400迁移到XL2400P
考研算法题练习2022.11.13
若依-匿名注解@Anonymous解析
设计模式-05建造者模式（Bulider模式）详解
软件测试工程师成长记：职场人的职业探寻之路
SpringBoot+MySQL+Vue前后端分离的宠物领养救助管理系统(附论文)
Allegro如何输出各层PCB视图的PDF文件
nginx_0.7.65_00截断_nginx解析漏洞
跨境电商首选腾讯云轻量应用服务器Lighthouse!
Kubernetes-in-action (一)

原文地址：https://blog.csdn.net/kaimo313/article/details/126684831