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

Vue3组件基础示例

news 2026/4/3 11:11:36

组件是vue中最推崇的，也是最强大的功能之一，就是为了提高重用性，减少重复性的开发。

如何使用原生HTML方法实现组件化

在使用原生HTML开发时，我们也会遇到一些常见的功能、模块，那么如何在原生HTML中使用组件化呢？其实最典型的代表就是JQuery了。常见的实现方式有两种，一种是利用class预定义某些特定的组件，另一种是使用JS初始化的方式，选择到某个DOM，然后生成对应的组件。

下面是一个简单的利用class生成按钮记录点击事件的组件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="zh-button"></div><div class="zh-button"></div><div class="zh-button"></div><script>window.onload = function() {const buttons = document.querySelectorAll('.zh-button');for (let button of buttons) {const spanDom = document.createElement('span');spanDom.innerHTML = '点击次数：'const timeDom = document.createElement('span');timeDom.innerHTML = '0';const buttonDom = document.createElement('button');buttonDom.textContent = '按钮';buttonDom.onclick = function() {const timeDom = button.querySelectorAll('span')[1];timeDom.innerHTML = ++timeDom.innerHTML;}button.appendChild(spanDom);button.appendChild(timeDom);button.appendChild(buttonDom);}}</script>
</body>
</html>

如何使用Vue3实现组件化

在vue中，代码按照templeate、script、style的模块方式拆分。我们创建一个名为Count的的vue组件，看看是怎么使用的。

示例

vue组件代码(Count.vue)：

<template><div class="container">初始值是： {{ props.initCount }}点击的次数： {{ count }}<button @click="clickBtn">按钮</button></div>
</template><script setup>
import { toRef, ref } from 'vue';const props = defineProps(['initCount']);const count = ref(props.initCount || 0);const clickBtn = () => { count.value++; }
</script><style scoped></style>

调用方式：

<template><Count></Count><Count :initCount="1"></Count><Count :initCount="10"></Count>
</template><script setup>
import Count from '../components/Count.vue'; 
</script><style scoped></style>

Vue组件的组成：

  • 模板（template）:模板声明了数据和最终展现给用户的DOM之间的映射关系。
  • 样式：控制组件内的展示样式，记得添加scoped:<style scoped>
  • 初始数据： 一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态。在setup中，直接使用ref/reactive定义即可。
  • 外部参数（props）: 组件之间通过参数来进行数据的传递和共享，默认传递方向是自上而下的，但也可以显示声明为双向绑定。
  • 方法（methods）: 一般为组件内部的私有方法。
  • 生命周期钩子函数（lifecycle hooks）: 一个组件会触发多个生命周期钩子函数，比如created,destroyed等，在这次钩子函数中，可以封装一些自定义的逻辑。

。。。。。。

暂且对组件的认识到此为止，有了一个简单的了解之后，先看看vue提供的一些基础语法，数据绑定，指令，修饰符等。

相关文章：

Vue3组件基础示例

组件是vue中最推崇的&#xff0c;也是最强大的功能之一&#xff0c;就是为了提高重用性&#xff0c;减少重复性的开发。 如何使用原生HTML方法实现组件化 在使用原生HTML开发时&#xff0c;我们也会遇到一些常见的功能、模块&#xff0c;那么如何在原生HTML中使用组件化呢&am…...

编程日记 2024/4/9 4:13:58

如何使用PL/SQL Developer工具导出clob字段的表？

1 准备测试数据 导出测试对象&#xff1a;表test_0102&#xff0c;others字段为clob类型 --创建中间表test_0101 create table test_0101( id number, name varchar2(20), others clob);--插入100条测试数据 beginfor i in 1..100 loopinsert into test_0101 values(i,i||_a,l…...

编程日记 2024/4/9 4:11:56

蓝桥杯刷题 深度优先搜索-[NewOJ P1158]N皇后（C++）

题目描述 n皇后问题&#xff1a;n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 上面布局用序列2 4 6 1 3 5表示&#xff0c;第i个数字表示第i行皇后放的列号。 按照这种格式输出前3个解&#xff0c;并统计总解数。 输入格式 输入一个正整数n&a…...

编程日记 2024/4/9 4:06:51

python实例2.2：编写一个装饰器，计算任何一个函数执行的时间（详解及其知识点拓展）

目录 一、编写一个装饰器，计算任何一个函数执行的时间 二、装饰器详解，及其用法举例...

编程日记 2024/4/9 4:03:46

Jenkins 持续集成 【CICD】

持续集成 &#xff08;Continuous integration&#xff0c;简称CI&#xff09; 持续集成是一种开发实践&#xff0c;它倡导团队成员频繁的集成他们的工作&#xff0c;每次集成都通过自动化构建&#xff08;包括编译、构建、打包、部署、自动化测试&#xff09;来验证&#xff…...

编程日记 2024/4/9 4:02:45

【CHI】（十二）Memory Tagging

目录 1. Introduction 2. Message extensions 3. Tag coherency 4. Read transaction rules 4.1 TagOp values 4.2 Permitted initial MTE tag states 5. Write transactions 5.1 Permitted TagOp values 5.2 TagOp, TU, and tags relationship 6. Dataless transact…...

编程日记 2024/4/9 4:01:44

Vue - 你知道Vue组件之间是如何进行数据传递的吗

难度级别：中级及以上 提问概率：85% 这道题还可以理解为Vue组件之间的数据是如何进行共享的，也可以理解为组件之间是如何通信的，很多人叫法不同，但都是说的同一个意思。我们知道，在Vue单页面应用项目中，所有的组件都是被嵌套在App.vue内…...

编程日记 2024/4/9 4:00:43

IP网络对讲广播系统审计

前言 这个系统是前两年在一个内网遇到的&#xff0c;当时顺手试了一个admin登陆之后再没有然后了&#xff0c;最近发现有大佬分享关于这个系统的漏洞&#xff0c;于是就把自己当初看的几个漏洞分享一下&#xff0c;系统比较简单&#xff0c;漏洞点很多&#xff0c;不要做坏事哦…...

编程日记 2024/4/9 3:58:41

蓝桥杯刷题--python38

197. 阶乘分解 - AcWing题库 def init(n): for i in range(2,n1): if not st[i]:primes.append(i) j0 while primes[j]*i<n: st[i*primes[j]]1 if i%primes[j]0: break j1 nint(input(…...

编程日记 2024/4/9 3:57:40

【LeetCode热题100】33. 搜索旋转排序数组（二分）

一.题目要求 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], …...

编程日记 2024/4/9 3:46:28

基于Leaflet.js的Marker闪烁特效的实现-模拟预警

目录 前言 一、闪烁组件 1、关于leaflet-icon-pulse 2、 使用leaflet-icon-pulse 3、方法及参数简介 二、闪烁实例开发 1、创建网页 2、Marker闪烁设置 3、实际效果 三、总结 前言 在一些地质灾害或者应急情况当中&#xff0c;或者热门预测当中。我们需要基于时空位置来…...

编程日记 2024/4/9 3:37:21

Vue-05

v-model 应用于其他表单元素 常见的表单元素都可以用v-model绑定关联 → 快速获取或设置表单元素的值 它会根据控件类型自动选取正确的方法来更新元素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name…...

编程日记 2024/4/9 3:36:19

Mongodb中一个小巧的数据更新命令$inc

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第55篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。 $inc是一个很小巧的命令。说它小巧&#xff0c;一个是因为短&#xff0c;只有三个字符。另一个是说…...

编程日记 2024/4/9 3:32:16

Java基于SpringBoot+Vue的专家医院预约挂号系统，附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

编程日记 2024/4/9 3:30:13

STM32一个地址未对齐引起的 HardFault 异常

1. 概述 客户在使用 STM32G070 的时候&#xff0c;KEIL MDK 为编译工具&#xff0c;当编译优化选项设置为Level0 的时候&#xff0c;程序会出现 Hard Fault 异常&#xff0c;而当编译优化选项设置为 Level1 的时候&#xff0c;则程序运行正常。表面上看&#xff0c;这似乎是 K…...

编程日记 2024/4/9 3:24:08

spring事务那些事

实际工作中还会面临千奇百怪的问题&#xff0c;看下面返个例子&#xff08;注意MySql数据库测试&#xff09;&#xff1a; //1.hello1Service 调用 hello2Service Transactional(propagation Propagation.REQUIRED,rollbackFor Exception.class) public void doUpdate() {//…...

编程日记 2024/4/9 3:23:05

设计模式深度解析：AI大模型下的策略模式与模板方法模式对比解析

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL应用》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 策略模式与模板方法模式对比解析 文章目录 &#x1f31f;引言&#x1f31f;Part 1:…...

编程日记 2024/4/9 3:15:56

贪婪算法python实现

贪婪算法&#xff08;Greedy Algorithm&#xff09;是一种解决问题的策略&#xff0c;它基于一种贪心的思想&#xff1a;在每一步选择中都采取当前状态下最好或最优的选择&#xff0c;从而希望最终能够得到全局最优解。 其核心思想可以简单概括为“当前局部最优选择”&#xff…...

编程日记 2024/4/9 3:14:55

(一)基于IDEA的JAVA基础12

一维数组 为什么使用数组: 当我们需要存储一系列数据的时候&#xff0c;就需要用到数组&#xff0c;如果不使用数组&#xff0c;我们就要需要一个一个的去声明变量&#xff0c;这样浪费内存空间&#xff0c;同时效率低下。 什么是数组: 数组本身就是一个变量&#xff0c;只…...

编程日记 2024/4/9 3:13:54

vue3中封装table表格

封装实例useTable import {ref } from vue export function useTable(api) {const data = ref([])const refre...

编程日记 2024/4/9 3:11:52

GLM-4.1V-9B-Base效果展示：书法作品字体+内容+文化内涵中文解析

GLM-4.1V-9B-Base效果展示&#xff1a;书法作品字体内容文化内涵中文解析 1. 模型能力概览 GLM-4.1V-9B-Base是智谱开源的视觉多模态理解模型&#xff0c;在中文视觉理解任务上表现出色。不同于常规的图片识别工具&#xff0c;这款模型能够深入理解图像中的文化元素&#xff…...

编程新知 2026/4/3 11:07:43

突破暗黑2单机限制：d2s-editor存档修改工具全解析

突破暗黑2单机限制&#xff1a;d2s-editor存档修改工具全解析 【免费下载链接】d2s-editor 项目地址: https://gitcode.com/gh_mirrors/d2/d2s-editor 你是否曾在暗黑破坏神2的世界中&#xff0c;为了一件心仪的装备而反复刷怪数小时&#xff1f;是否因角色属性点分配失…...

编程新知 2026/4/3 11:03:41

3步解锁缠论交易：通达信可视化插件让复杂技术分析变简单

3步解锁缠论交易&#xff1a;通达信可视化插件让复杂技术分析变简单 【免费下载链接】Indicator 通达信缠论可视化分析插件 项目地址: https://gitcode.com/gh_mirrors/ind/Indicator 缠论作为中国股市技术分析的重要理论体系&#xff0c;其核心价值在于揭示价格波动的内…...

编程新知 2026/4/3 11:01:41

5大核心模块构建学术排版系统：STIX Two字体全面应用指南

5大核心模块构建学术排版系统&#xff1a;STIX Two字体全面应用指南 【免费下载链接】stixfonts OpenType Unicode fonts for Scientific, Technical, and Mathematical texts 项目地址: https://gitcode.com/gh_mirrors/st/stixfonts 一、价值解析&#xff1a;为什么专…...

编程新知 2026/4/3 9:38:52

Phi-3-Mini-128K快速原型开发：微信小程序集成AI对话功能

Phi-3-Mini-128K快速原型开发&#xff1a;微信小程序集成AI对话功能 最近在捣鼓一些AI小应用&#xff0c;发现很多开发者都想给自己的小程序加个“智能大脑”&#xff0c;让用户能聊聊天、问问问题。但一提到集成大模型&#xff0c;很多人就觉得门槛高、流程复杂&#xff0c;光…...

编程新知 2026/4/3 9:20:25

Umi-OCR：3个技巧让你的扫描PDF文件变身智能文档

Umi-OCR&#xff1a;3个技巧让你的扫描PDF文件变身智能文档 【免费下载链接】Umi-OCR OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/批量导入图片&#xff0c;PDF文档识别&#xff0c;排除水印/页眉页脚&#xff0c;扫描/生成二维码。内置多国语言库。 …...

编程新知 2026/4/3 9:04:01

【独家首发】CPython官方GIL移除路线图深度解读（附内部邮件泄露+性能基准测试数据），错过再等十年

第一章&#xff1a;Python无锁GIL环境下的并发模型演进全景Python长期以来受全局解释器锁&#xff08;GIL&#xff09;制约&#xff0c;导致多线程无法真正并行执行CPU密集型任务。近年来&#xff0c;随着CPython 3.12正式引入实验性无GIL构建选项&#xff08;通过--without-py…...

编程新知 2026/4/3 7:12:16

Token 成本暴跌 280 倍，为什么用 AI 替代初级开发，依然算不拢账？

从董事会的 PPT 翻车&#xff0c;看 AI 降本神话背后的全成本真相上周我旁听了一场 C-suite 高管会议&#xff0c;亲眼看着一位副总裁被自己的 PPT 逼入绝境。会议的主题是 AI 项目的成本收益&#xff0c;他准备了一套无懈可击的逻辑&#xff1a;大模型 Token 价格 3 年暴跌 28…...

编程新知 2026/4/3 6:57:57

FireRedASR Pro优化指南：如何提升长音频识别效率

FireRedASR Pro优化指南&#xff1a;如何提升长音频识别效率 1. 长音频识别的核心挑战 语音识别系统在处理长音频时面临几个关键瓶颈问题&#xff1a; 内存压力&#xff1a;随着音频时长增加&#xff0c;需要缓存的中间状态呈指数级增长计算复杂度&#xff1a;注意力机制的时…...

编程新知 2026/4/3 5:36:33

Phi-4-mini-reasoning推理能力展示：多步分析题目的简洁结论生成效果

Phi-4-mini-reasoning推理能力展示&#xff1a;多步分析题目的简洁结论生成效果 1. 模型介绍 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型&#xff0c;特别擅长处理需要多步分析的题目。与通用聊天模型不同&#xff0c;它被设计用来解决数学题、逻辑题等需要严谨…...

编程新知 2026/4/3 5:26:22