【Vue 开发实战】基础篇 # 3：Vue组件的核心概念：事件

说明

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

事件

vue 提供了一个简单的方式进行绑定事件，就是使用 @xxx 就可以进行事件绑定，这里以 click 事件为例

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>Vue组件的核心概念：事件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: {
                handleClick() {
                    console.log('点击了删除按钮');
                    // 发射时间出去
                    this.$emit("delete", this.title);
                }
            },
        });
        // 定义一个名为 todo-list 的组件
        Vue.component("todo-list", {
            template: `
                
                    
                
            `,
            data: function() {
                return {
                    list: [
                        {
                            title: "课程3",
                            del: true
                        },{
                            title: "课程4",
                            del: false
                        },
                    ]
                }
            },
            methods: {
                handleDelete(val) {
                    console.log('handleDelete---->', val);
                }
            }
        });

        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
85
86
87
88
89
90
91
92
93

然后点击删除按钮，结果如下

在这里插入图片描述

相关阅读:
Flink+Doris 实时数仓
使用Redis源码探究字符串的实现
SSM学习——SpringMVC（10）
93. 复原 IP 地址
免费开源库CDN加速对比
零点定理习题
大模型赛道如何实现华丽的弯道超车
入侵检测模型（An Intrusion-Detection Model）
leetcode 136. 只出现一次的数字
Java 操作RestHighLevelClient查询详解

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