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

04 开发第一个组件

news 文章来源：https://blog.csdn.net/qq_37703224/article/details/135052258 2025/1/11 1:38:30

概述

在Vue3中，一个组件就是一个.vue文件。

在本小节中，我们来开发第一个Vue3组件。这个组件的功能非常的简单，只需要在浏览器上输出一个固定的字符串”欢迎跟着Python私教一起学Vue3“即可。

实现步骤

第一步：新增src/components/Demo.vue，并填写如下内容

<template><h1>欢迎跟着Python私教一起学Vue3</h1>
</template>

第二步：在src/App.vue中引入该组件

<script setup>
import Demo from "./components/Demo.vue"
</script>

第三步：在模板中进行使用

<template><h1>Vite5+Vue3</h1><div class="container"><Demo/></div>
</template>

第四步：启动服务

yarn dev

第五步：浏览器访问 http://localhost:5173/

完整代码

package.json

{"name": "hello","private": true,"version": "0.1.0","type": "module","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"vue": "^3.3.8"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.0","vite": "^5.0.0"}
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

src/App.vue

<script setup>
import Demo from "./components/Demo.vue"
</script>
<template><h1>Vite5+Vue3</h1><div class="container"><Demo/></div>
</template>

src/components/Demo.vue

<template><h1>欢迎跟着Python私教一起学Vue3</h1>
</template>

启动方式

yarn
yarn dev

浏览器访问：http://localhost:5173/

相关文章：

04 开发第一个组件

概述 在Vue3中&#xff0c;一个组件就是一个.vue文件。 在本小节中&#xff0c;我们来开发第一个Vue3组件。这个组件的功能非常的简单&#xff0c;只需要在浏览器上输出一个固定的字符串”欢迎跟着Python私教一起学Vue3“即可。 实现步骤 第一步&#xff1a;新增src/compon…...

编程日记 2023/12/18 12:26:50

【Unity】如何让Unity程序一打开就运行命令行命令

【背景】 Unity程序有时依赖于某些服务去实现一些功能，此时可能需要类似打开程序就自动运行Windows命令行命令的功能。 【方法】 using UnityEngine; using System.Diagnostics; using System.Threading.Tasks; using System.IO; using System.Text...

编程日记 2023/12/18 12:24:48

Web前端-HTML（表格与表单）

文章目录 1.表格与表单1.1 概述 2.表格 table2.1 表格概述2.2. 创建表格2.3 表格属性2.4. 表头单元格标签th2.5 表格标题caption&#xff08;了解&#xff09;2.6 合并单元格(难点)2.7 总结表格 3. 表单标签(重点)3.1 概述3.2 form表单3.3 input 控件(重点)type 属性value属性值…...

编程日记 2023/12/18 12:21:46

Android RecycleView实现平滑滚动置顶和调整滚动速度

目录 一、滑动到指定位置&#xff08;target position&#xff09;并且置顶 1. RecycleView默认的几个实现方法及缺陷 2. 优化源码实现置顶方案 二、调整平移滑动速率 三、其他方案&#xff1a;置顶、置顶加偏移、居中 1. 其他置顶方案 2. 置顶加偏移 3. 滚动居中 在实…...

编程日记 2023/12/18 12:19:44

跳跃游戏 + 45. 跳跃游戏 II

给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输…...

编程日记 2023/12/18 12:13:40

在Django中使用多语言(i18n)

在Django中使用多语言 配置中间件 MIDDLEWARE [......django.contrib.sessions.middleware.SessionMiddleware,django.middleware.locale.LocaleMiddleware, # 此行重点django.middleware.common.CommonMiddleware,...... ]配置翻译文件目录 根目录下创建目录locale # 国…...

编程日记 2023/12/18 12:12:39

高性价比AWS Lambda无服务体验

前言 之前听到一个讲座说到AWS Lambda服务&#xff0c;基于Serverless无服务模型&#xff0c;另外官网还免费提供 100 万个请求 按月&#xff0c;包含在 AWS 免费套餐中是真的很香&#xff0c;对于一些小型的起步的网站或者用户量不大的网站&#xff0c;简直就是免费&#xff…...

编程日记 2023/12/18 12:10:37

【物联网】EMQX(二)——docker快速搭建EMQX 和 MQTTX客户端使用

一、前言 在上一篇文章中&#xff0c;小编向大家介绍了物联网必然会用到的消息服务器EMQ&#xff0c;相信大家也对EMQ有了一定的了解&#xff0c;那么接下来&#xff0c;小编从这篇文章正式开始展开对EMQ的学习教程&#xff0c;本章节来记录一下如何对EMQ进行安装。 二、使用…...

编程日记 2023/12/18 12:09:36

2023 亚马逊云科技 re:lnvent 大会探秘: Amazon Connect 全渠道云联络中心

2023 亚马逊云科技 re:lnvent 大会探秘: Amazon Connect 全渠道云联络中心 前言一. Amazon Connect 介绍 &#x1f5fa;️二. Amazon Connect 使用教程 &#x1f5fa;️1.我们打开URl链接找到对应服务2.输入Amazon Connect选中第一个点击进入即可&#xff1b;3.在进入之后我们就…...

编程日记 2023/12/18 12:07:34

鸿蒙开发之用户隐私权限申请

一、简介 鸿蒙开发过程中可用于请求的权限一共有两种&#xff1a;normal和system_basic。以下内容摘自官网&#xff1a; normal权限 normal 权限允许应用访问超出默认规则外的普通系统资源。这些系统资源的开放&#xff08;包括数据和功能&#xff09;对用户隐私以及其他应用带…...

编程日记 2023/12/18 12:04:32

Docker笔记：简单部署 nodejs 项目和 golang 项目

docker 简单的维护 nodejs 项目容器 1 &#xff09;Nodejs 程序 const express require(express) const app express()app.get(/, (req, res) > {res.send(首页) })app.get(/news, (req, res) > {res.send(news) })// dokcer 做端口映射不要指定ip app.listen(3000)2…...

编程日记 2023/12/18 11:58:26

java内置的数据结构

Java语言提供了许多内置的数据结构&#xff0c;包括&#xff1a; 1. 数组&#xff08;Array&#xff09;&#xff1a;数组是最基本的数据结构之一&#xff0c;它是一个有序的元素集合&#xff0c;每个元素都有一个对应的索引。在Java中&#xff0c;数组可以通过声明和初始化来创…...

编程日记 2023/12/18 11:57:25

轻松搭建FPGA开发环境：第三课——Vivado 库编译与设置说明

工欲善其事必先利其器&#xff0c;很多人想从事FPGA的开发&#xff0c;但是不知道如何下手。既要装这个软件&#xff0c;又要装那个软件&#xff0c;还要编译仿真库&#xff0c;网上的教程一大堆&#xff0c;不知道到底应该听谁的。所以很多人还没开始就被繁琐的开发环境搭建吓…...

编程日记 2023/12/18 11:54:23

【PostgreSQL】从零开始:（十一）PostgreSQL-Dropdb命令删除数据库

dropdb命令删除数据库 命令 [postgrespostgre-sql bin]$ dropdb --help dropdb removes a PostgreSQL database.Usage:dropdb [OPTION]... DBNAMEOptions:-e, --echo show the commands being sent to the server-f, --force try to terminate …...

编程日记 2023/12/18 11:51:20

UDP网络编程其他相关事项

netstat指令 netstat -an 可以查看当前主机网络情况&#xff0c;包括端口监听情况和网络连接情况。 netstat -an | more 可以分页显示。 要求在dos控制台下执行。 说明&#xff1a;&#xff08;1&#xff09;Listening表示某个端口在监听&#xff1b;&#xff08;2&#xf…...

编程日记 2023/12/18 11:50:20

Redhat LINUX 9.3 + PG 16.1 搭建主备流复制

一直想搭建一个PG流复制&#xff0c;最近正好有一个新环境&#xff0c;操作系统是最新的,rhel 9.3&#xff0c;数据库是最新的 pg 16.1,借鉴了网上的步骤&#xff0c;尤其是小工到专家的内容&#xff0c;在此谢过。 1.安装环境 1&#xff09;IP: 主&#xff1a;192.168.133.151…...

编程日记 2023/12/18 11:49:19

kafka设置消费者组

安装部署后 consumer.properties group.idtest-group 单机测试&#xff0c;自己开俩窗口&#xff0c;一个测试消费者&#xff0c;一个测试生产者&#xff08;创建消息那步&#xff09; 创建主题 bin/kafka-topics.sh --create --bootstrap-server localhost:9092 --replica…...

编程日记 2023/12/18 11:46:16

Worker-Thread设计模式

Worker-Thread模式类似于工厂流水线&#xff0c;有时也称为流水线设计模式。线程池在某种意义上也算是Worker-Thread模式的一种实现&#xff0c;线程池初始化时创建线程类似于在流水线等待工作的工人&#xff0c;提交给线程池的Runnable接口类似于需要加工的产品&#xff0c;Ru…...

编程日记 2023/12/18 11:44:14

npm 安装包遇到问题的常用脚本（RequestError: socket hang up）

前言 最近在给一个基于 Electron 的开源项目做贡献&#xff0c;需要去安装一些 npm 库&#xff0c;由于众所周知的原因&#xff0c;经常会出现报错&#xff1a; npm ERR! path D:\Projects\project\node_modules\electron npm ERR! command failed npm ERR! command C:\Windo…...

编程日记 2023/12/18 11:42:12

活动 | Mint Blockchain 将于 2024 年 1 月 10 号启动 MintPass 限时铸造活动

MintPass 是由 Mint Blockchain 官方发行的 Mint 网络和社区的 NFT 通行证&#xff0c;将在 2024 年 1 月份启动限时铸造活动。今天这篇文章会着重向大家介绍即将举办的 MintPass 活动的基础信息。 MintPass 有 2 种类型&#xff1a; 类型 1&#xff1a;Mint Genesis NFT Mint…...

编程日记 2023/12/18 11:29:01

Android动画（四）——属性动画ValueAnimator的妙用

目录 介绍 效果图 代码实现 xml文件 介绍 ValueAnimator是ObjectAnimator的父类&#xff0c;它继承自Animator。ValueAnimaotor同样提供了ofInt、ofFloat、ofObject等静态方法&#xff0c;传入的参数是动画过程的开始值、中间值、结束值来构造动画对象。可以将ValueAnimator看…...

编程日记 2023/12/18 11:26:59

C语言飞机大战

一、前言 [设计难度 : ★☆☆☆☆ [参考书籍&#xff1a;《C语言课程设计与游戏开发实践教程》 [主要涉及知识&#xff1a;函数封装 循环判断语句 [程序运行效果图&#xff1a; [主要的游戏功能&#xff1a; 通过按键’w’,‘s’,‘a’,d’分别实现飞机的上下左右移动 按空格…...

编程日记 2023/12/18 11:19:53

js 原型 和 原型链

function Person(name,age){ this.name name this.age age } var p new Person(张三,11) //创建构造函数的时候&#xff0c;解析器会自动为构造函数创建prototype属性&#xff0c;prototype属性对应的对象就是原型对象 // prototype 翻译为 原…...

编程日记 2023/12/18 11:18:52

如何利用SD-WAN节省运维成本和简化运维工作？

在当今数字化时代&#xff0c;企业对于网络的要求越来越高&#xff0c;需要保障网络的安全性、可靠性和灵活性。同时&#xff0c;随着企业的上云和远程办公等需求的增加&#xff0c;传统的WAN网络已经无法满足企业的需求。因此&#xff0c;SD-WAN技术应运而生。 SD-WAN节省运维…...

编程日记 2023/12/18 11:17:51

在工作中使用CHAT提高效率

问CHAT&#xff1a;数智时代与中国情境下的营销管理创新方向&#xff1a;市场营销&#xff08;管理&#xff09;的使命 CHAT回复&#xff1a;市场营销&#xff08;管理&#xff09;的使命可以被概述为寻找、吸引和保留消费者。通过识别、满足甚至超越消费者期望&#xff0c;以实…...

编程日记 2023/12/18 11:16:50

Maven 项目的三种打包方式与 pom.xml 文件中项目描述

目录&#xff1a; 定义项目的信息 本项目描述相关标签<parent> 标签<relativePath/> 标签<scope> 标签 Maven 三种打包方式 JARWARPOM 原文链接 — —...

编程日记 2023/12/18 11:13:47

【普中】基于51单片机简易计算器数码管显示设计( proteus仿真+程序+实物演示+讲解视频）

【普中开发板】基于51单片机简易计算器数码管显示设计( proteus仿真程序实物演示讲解视频&#xff09; Proteus 仿真&#xff1a;Proteus 8.16(有低版本) 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;P04 1. 主要功能&#xff1a…...

编程日记 2023/12/18 11:10:45

【Android】DeepLink

官方文档&#xff1a;创建指向应用内容的深层链接 Intro to Deep Linking on Android What is Deep linking? Deeplinks are a concept that help users navigate between the web and applications. They are basically URLs which navigate users directly to the specif…...

编程日记 2023/12/18 11:08:44

微服务Redis-Session共享登录状态

一、背景 随着项目越来越大&#xff0c;需要将多个服务拆分成微服务&#xff0c;使代码看起来不要过于臃肿&#xff0c;庞大。微服务之间通常采取feign交互&#xff0c;为了保证不同微服务之间增加授权校验&#xff0c;需要增加Spring Security登录验证&#xff0c;为了多个服务…...

编程日记 2023/12/18 11:07:42

30道C++ 基础高频题整理（附答案背诵版）

1. C和C有什么区别&#xff1f; C是C语言的超集&#xff08;我看网上很多文章说这是不对的&#xff09;&#xff0c;这意味着几乎所有的C程序都可以在C编译器中编译和运行。然而&#xff0c;C引入了许多新的概念和特性&#xff0c;使得两种语言在一些关键点上有显著的区别。 …...

编程日记 2023/12/18 11:06:41

用html5做的网站源码/十大经典口碑营销案例

微软推出了两个新的Windows API&#xff0c;以帮助驱动程序开发人员创建更安全的软件。微软已经详细说明了其消除未初始化内存问题的下一步&#xff0c;这次针对的是为Windows构建硬件驱动程序的开发人员使用的未初始化内核池内存。据微软安全响应中心(MSRC)的安全工程师Joe Bi…...

编程日记 2025/1/11 1:32:04

有赞官网/青岛seo网站推广

内存限制&#xff1a;10000K 总时限&#xff1a;3000ms 描述 一农场由图所示的十一种小方块组成&#xff0c;蓝色线条为灌溉渠。若相邻两块的灌溉渠相连则只需一口水井灌溉。 输入 给出若干由字母表示的最大不超过5050具体由(m&#xff0c;n)表示&#xff0c;的农场图 输出…...

编程日记 2025/1/11 1:18:58

公司做免费网站建设/搜索引擎广告案例

0x00 前言 随着微软越来越开放&#xff0c;C#也变得越来越吸引人们的眼球。而在游戏行业中&#xff0c;C#也开始慢慢地获得了关注。这不&#xff0c; 网易绝代双娇手游团队已经全面使用.Net Core支持前后端统一C#开发&#xff0c;跨平台部署了。 所以&#xff0c;我们就来总结一…...

编程日记 2025/1/11 1:05:50

重庆市城乡建设委员会网站/seo优化包括哪些

AppBarLayout的子布局layout_scrollFlags: Scrolling View和Child View谁先滚动问题1、scroll&#xff1a;影响向下滚动(默认不设置的值)Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点&#xff1a;第一点&#xff0c;如果使用了其他值&#xff0c;必定要使用这个值才能…...

编程日记 2025/1/11 0:56:46

潍坊网站设计制作/营销软件培训

目录查询当前日期往前三十天当天有多少数据查询最近三十天&#xff0c;每天多少数据给用户赋值一个随机日期查询最近三十天内&#xff0c;每个用户多少数据统计各个年龄段的用户数量查询数据按天分组统计查询过去10天订单量查询过去30天订单量&#xff0c;没有订单量的日期也要…...

编程日记 2025/1/10 16:01:42

做网站是要写代码的吗/外包网络推广公司推广网站

Django 的模板中的数学运算前言 django模板只提供了加法的filter&#xff0c;没有提供专门的乘法和除法运算&#xff1b;django提供了widthratio的tag用来计算比率&#xff0c;可以变相用于乘法和除法的计算。 加法 {{value|add:10}}note:value5,则结果返回15 减法 {{value|add…...

编程日记 2025/1/10 15:58:41