当前位置：首页 > article >正文

vue 入门：组件事件

article 2026/1/29 21:18:23

文章目录

vue介绍
vue 入门
- 简单示例
- 自定义组件
- 事件

vue介绍

vue2 官网

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。

vue 入门

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
v-bind attribute 被称为指令，指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute，简写，例如 :id="message" 将元素节点的 id 属性和 vue 实例的 message 属性的内容保持一致
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
v-on 指令添加一个事件监听器。
<template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素.

简单示例

当创建一个 Vue 实例时，你可以传入一个选项对象,选项对象文档
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值，当这些数据改变时，视图会进行重渲染
Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来，实例 property 和方法的列表

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app">{{message}} {{message + message}}<div :id="message"></div><ul><li v-for="item in list"><span v-if="!item.del">{{item.title}}</span><span v-else style="text-decoration: line-through">{{item.title}}</span><button v-show="!item.del">删除</button></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>//  // 创建一个 Vue 实例var vm = new Vue({el: '#app',data: {message: 'hello world',list: [{title: '课程1',del: false}, {title: '课程2',del: true}],}})
</script></body></html>

PS: 在浏览器控制台上可以通过 vm 获取数据（代码vue实例挂再在vm上），也可以修改相关的变量值

在这里插入图片描述

自定义组件

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

组件API

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body>
<div id="app">{{message}} {{message + message}}<div :id="message"></div><!--<ul>创建一个 todo-item 组件的实例<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,},},// 复用html代码template:`<li><span v-if="!del">{{ title }}</span><span v-else style="text-decoration: line-through">{{ title }}</span><button v-show="!del">删除</button></li>`,data: function () {return {}},methods: {},})// 定义名为 todo-list 的新组件Vue.component('todo-list', {template:`<ul><todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item></ul>`,data: function () {return {list: [{title: '课程1',del: false}, {title: '课程2',del: true}],}}})var vm = new Vue({el: '#app',data: {message: 'hello world',}})
</script>
</body></html>

事件

事件APi
自定义事件
在 Vue.js 中，v-on:my-event 的简写方式是 @my-event，@xxx 进行事件绑定(简写形式)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body>
<div id="app">{{message}} {{message + message}}<div :id="message"></div><!-- <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>Vue.component('todo-item', {props: {title: String,del: {type: Boolean,default: false,},},template:`<li><span v-if="!del">{{ title }}</span><span v-else style="text-decoration: line-through">{{ title }}</span><button v-show="!del" @click="handleClick">删除</button></li>`,data: function () {return {}},methods: {handleClick(e) {console.log('点击删除按钮')// $emit 事件告诉上层（父组件））this.$emit('delete', this.title)}},})Vue.component('todo-list', {// @delete 的方式来绑定一个用来接收 delete事件的方法template:`<ul><todo-item @delete="handleDelete" v-for="item in list" :title="item.title":del="item.del"></todo-item></ul>`,data: function () {return {list: [{title: '课程1',del: false}, {title: '课程2',del: true}],}},methods: {// 子组件触发 delete 事件，父组件接收到事件，执行相应的方法handleDelete(val) {console.log('handleDelete', val)}}})var vm = new Vue({el: '#app',data: {message: 'hello world',}})
</script>
</body></html>

vue 入门：组件事件

文章目录 vue介绍vue 入门简单示例自定义组件事件 vue介绍 vue2 官网 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。 vue 入门 Vue.js 的核心是一个允许采用简洁的模板语…...

编程日记 2026/1/20 9:11:50

数据质量问题中，数据及时性怎么保证？如何有深度体系化回答！

数据治理，数据质量这快是中大厂，高阶大数据开发面试必备技能，企业基于大数据底座去做数仓，那么首先需要保障的就是数据质量。数据质量的重要性在现代企业中变得越发突出。以下是数据质量的几个关键方面，说明其对企业…...

编程日记 2026/1/20 7:44:52

数据可视化 —— 折线图应用（大全）

一、导入需要的库 # Matplotlib 是 Python 最常用的绘图库，pyplot 提供了类似 MATLAB 的绘图接口 import matplotlib.pyplot as plt import numpy as np import pandas as pd 二、常用的库函数 plt.plot(x轴,y轴)：plot()是画折线图的函数。 plt.xlabe…...

编程日记 2026/1/20 9:18:55

什么是中性线、零线、地线，三相四线制如何入户用电

在变压器三相电侧，按照星形连接法，有一个中心点，这根线引出来的线接不接地：不接地就是中性线，接地就是零线下面就是没有接地：中性线接地了以后就可以叫做零线了三相电在高压输电的时候是没有零线的&a…...

编程日记 2026/1/20 0:28:38

自启动应用程序配置之etc/xdg/autostart

在 Linux 系统中，/etc/xdg/autostart/ 目录用于存放系统级的自动启动项（.desktop 文件）。这些文件遵循 FreeDesktop.org 的规范，定义了应用程序在用户登录时自动启动的规则。系统级 vs 用户级自动启动系统级&a…...

编程日记 2025/11/25 19:24:03

在 Linux 系统（ubuntu/kylin）上安装 Docker

在 Linux 系统上安装 Docker 的步骤如下（以 Ubuntu/Debian 和 CentOS/RHEL 为例）：请用./check-config config检查内核是否支持，necessarily 必须全部enable。以下是脚本自行复制运行： #!/usr/bin/env sh set -eEXITCODE=0# bits of this were adapted from lxc-checkco…...

编程日记 2025/8/31 16:04:54

【含文档+PPT+源码】基于Android家政服务系统的开发与实现

介绍视频： 课程简介： 本课程演示的是一款基于Android家政服务系统的开发与实现，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2.…...

编程日记 2026/1/19 6:25:38

SpringBoot + Netty + Vue + WebSocket实现在线聊天

最近想学学WebSocket做一个实时通讯的练手项目主要用到的技术栈是WebSocket Netty Vue Pinia MySQL SpringBoot，实现一个持久化数据，单一群聊，支持多用户的聊天界面下面是实现的过程后端 SpringBoot启动的时候会占用一个端口&#xff…...

编程日记 2025/9/1 8:18:01

配置mac mini M4 的一些软件

最近更换了 mac mini M4 ，想要重新下载配置软件 ，记录一下。 Homebrew是什么？ homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等功能。通过简单的指令可以实现包管理，而不用关心各种…...

编程日记 2026/1/29 11:15:29

Java——抽象方法抽象类接口详解及综合案例

1.抽象方法抽象类介绍抽象方法: 将共性的行为(方法)抽取到父类之后， 由于每一个子类执行的内容是不一样， 所以，在父类中不能确定具体的方法体。该方法就可以定义为抽象方法。抽象类: 如果一个类中存在抽象方法，那么该类就必须…...

编程日记 2026/1/20 3:38:44

【计网】一二章习题

1. (单选题, 3 分) 假设主机A和B之间的链路带宽为100Mbps，主机A的网卡速率为1Gbps，主机B的网卡速率为10Mbps，主机A给主机B发送数据的最高理论速率为（ ）。 A. 100Mbps B. 1Gbps C. 1Mbps D. 10Mbps 正确答案 D 发…...

编程日记 2026/1/21 3:08:39

苹果开发者账号推送证书配置详细指南

苹果开发者账号推送证书配置详细指南一、准备工作苹果开发者账号确保拥有有效的苹果开发者账号（个人/公司账号），年费已缴纳。 App ID配置登录 Apple开发者中心。进入 Certificates, Identifiers & Profiles → Identifiers。创建或…...

编程日记 2026/1/27 2:19:50

3. 列表操作

【问题描述】对于一个列表，在保持非零元素相对顺序的同时，将元素中所有的数字0移动到末尾。‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮…...

编程日记 2025/9/2 11:38:43

【软考-高级】【信息系统项目管理师】【论文基础】进度管理过程输入输出及工具技术的使用方法

定义项目进度管理是为了保证项目按时完成，对项目中所需的各个过程进行管理的过程，包括规划进度、定义活动、活动优先级排序、活动持续时间、制定进度计划和控制进度。管理基础制定进度计划的一般步骤选择进度计划方法（如关键路径法&a…...

编程日记 2026/1/21 21:17:02

TOGAF之架构标准规范-技术架构

TOGAF是工业级的企业架构标准规范，本文主要描述技术架构阶段。如上所示，技术架构（Technology Architecture）在TOGAF标准规范中处于D阶段技术架构阶段技术架构阶段的主要内容包括阶段目标、阶段输入、流程步骤、阶段输出、架构…...

编程日记 2026/1/19 23:53:09

为什么ChatGPT选择SSE而非WebSocket？

为什么ChatGPT选择SSE而非WebSocket？ 一、ChatGPT回答问题的技术逻辑 ChatGPT的响应生成基于Transformer架构和自注意力机制，其核心是通过概率预测逐词生成文本。当用户输入问题后，模型会先解析上下文，再通过预训练的庞大语料库…...

编程日记 2025/8/31 12:42:31

Ansys Electronics 变压器 ACT

你好， 在本博客中，我将讨论如何使用 Ansys 电子变压器 ACT 自动快速地设计电力电子电感器或变压器。我将逐步介绍设计和创建电力电子变压器示例的步骤，该变压器为同心组件，双绕组，采用正弦电压激励，并应用…...

编程日记 2026/1/19 23:40:15

十三种物联网/通信模块综合对比——《数据手册--物联网/通信模块》

物联网／通信模块名称功能应用场景 USB转换模块用于将USB接口转换为其他类型的接口，如串口、并口等，实现不同设备之间的通信。常用于计算机与外部设备（如打印机、扫描仪等）的连接，以及数据传输和设…...

编程日记 2026/1/29 10:54:44

Redis安装(Windows环境)

文章目录 Resid简介:下载Redis启动Redis服务设置Windows服务常用的Redis服务命令 Resid简介: Redis 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可基于内存、分布式、可选持久性的键值对(Key-Value)存储数据库，并提供多种语言的 API。 Redis通常…...

编程日记 2026/1/20 7:16:03

FreeRTOS项目工程完善指南：STM32F103C8T6系列

FreeRTOS项目工程完善指南：STM32系列本文是FreeRTOS STM32开发系列教程的一部分。我们将完善之前移植的FreeRTOS工程，添加串口功能并优化配置文件。更多优质资源，请访问我的GitHub仓库：https://github.com/Despacito0o/FreeRTO…...

编程日记 2026/1/23 10:12:51

论坛系统(测试报告)

文章目录一、项目介绍二、设计测试用例三、自动化测试用例的部分展示用户名或密码错误登录成功编辑自己的帖子成功修改个人信息成功回复帖子信息成功四、性能测试总结一、项目介绍本平台是用Java开发，基于SpringBoot、SpringMVC、MyBatis框架搭建的小型论坛系统…...

编程日记 2026/1/28 12:28:03

【汽车产品开发项目管理——端到端的汽车产品诞生流程】

MPU：集成运算器、寄存器和控制器的中央处理器芯片 MCU：微控制单元，将中央处理器CPU、存储器ROM/RAM、计数器、IO接口及多种外设模块集成在单一芯片上的微型计算机系统。汽车产品开发项目属性：临时性、独特性、渐进明细性、以目标…...

编程日记 2026/1/26 21:50:52

从零到有的游戏开发（visual studio 2022 + easyx.h）

引言本文章适用于C语言初学者掌握基本的游戏开发， 我将用详细的步骤引领大家如何开发属于自己的游戏。作者温馨提示：不要认为开发游戏很难，一些基本的游戏逻辑其实很简单， 关于游戏的开发环境也不用担心，我会详细…...

编程日记 2026/1/26 18:17:35

Open3d无法使用plt.get_cmap(“viridis“)着色pcd格式点云问题

在使用Open3D进行点云处理和可视化时，我们经常会遇到一个问题：直接加载PCD文件时，点云的颜色无法正确显示，但将其转换为PLY格式后再加载，颜色就能正常显示。本文将探讨这一问题的原因，并提供解决方案。 1.…...

编程日记 2026/1/25 1:33:40

网络故障排查实战指南：从准备到定位的全流程拆解

目录第一章：排查前的准备工作 —— 别急着动手，先把底摸清搞清楚故障现象：别被表象骗了收集关键信息：把线索攒齐做好心理准备：复杂问题不慌第二章：排查工具箱 —— 你的 “武器” 得趁手 Wireshark：抓包界的 “显微镜” Ping：最基础但超实用的 “敲门员” …...

编程日记 2026/1/24 11:28:36

MCU的USB接口作为 USB CDC串口输出

前言： 如下内容是和Chatgpt的问答对话。询问了Chatgpt 关于 MCU微控制器内部的USB端口作为串口输出是怎么工作的，是否需要在上位机上安装串口驱动程序等，Chatgpt解答的很好。正文： STM32 使用USB作为串行设备端口，需…...

编程日记 2025/12/4 23:54:39

【C++初阶】--- vector容器功能模拟实现

1.什么是vector？ 在 C 里，std::vector 是标准模板库（STL）提供的一个非常实用的容器类，它可以看作是动态数组 2.成员变量 iterator _start;：指向 vector 中第一个元素的指针。 iterator _finish;&#x…...

编程日记 2026/1/20 22:14:51

函数式编程在 Java：Function、BiFunction、UnaryOperator 你真的会用？

大家好，我是你们的Java技术博主！今天我们要深入探讨Java函数式编程中的几个核心接口：Function、BiFunction和UnaryOperator。很多同学虽然知道它们的存在，但真正用起来却总是不得要领。这篇文章将带你彻底掌握它们！&am…...

编程日记 2025/12/19 14:16:03

Elasticsearch 学习规划

Elasticsearch 学习规划明确学习目标与动机场景化需求分析 - **S**：掌握Elasticsearch架构体系，熟练使用Elasticsearch 进行数据分析,Elasticsearch结合java 项目落地案例 - **M**：搜索和Elasticsearch相关GitHub项目 - **A**：每…...

编程日记 2026/1/22 0:43:32

【AI提示词】Emoji风格排版艺术与设计哲学

提示说明 Emoji风格排版艺术与设计哲学。提示词请使用 Emoji 风格编辑以下段落，该风格以引人入胜的标题、每个段落中包含表情符号和在末尾添加相关标签为特点。请确保保持原文的意思。使用案例（春日穿搭） 🌸 2025春季穿搭灵…...

编程日记 2026/1/10 23:13:03

文章目录

vue介绍

vue 入门

简单示例

自定义组件

事件

相关文章：