Vue3组件基础示例

组件是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提供的一些基础语法,数据绑定,指令,修饰符等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/798203.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows通过cmd终止线程

1、使用 netstat 命令查看特定端口的占用情况。例如&#xff0c;要查看端口号为 8080 的情况&#xff0c;可以执行以下命令&#xff1a; netstat -ano | findstr :9009这将显示所有占用端口 9009的网络连接&#xff0c;并列出 PID&#xff08;进程标识符&#xff09;。 2、终止…

Steam上线真人乙游,女性玩家还愿意买单吗?

Steam上线了一款真人乙游《糟糕&#xff01;他们太爱我了怎么办&#xff1f;》&#xff08;以下简称《糟糕&#xff01;&#xff09;。 乍一听这个游戏名&#xff0c;似乎和《完蛋&#xff01;我被美女包围了&#xff01;》有异曲同工之妙&#xff0c;事实也确实如此&#xff…

data-diff,一个超强的 Python 库!

目录 前言 安装 特性 基本功能 字典比较 列表比较 集合比较 嵌套数据结构比较 高级功能 比较忽略特定字段 自定义差异显示 数据快照比较 实际应用场景 数据监测和审计 配置管理 测试验证 总结 前言 大家好&#xff0c;今天为大家分享一个超强的 Python 库 - data-diff …

挑战30天C++基本入门(DAY8--树)[part 3](速通哦~)

#上一章我们把搜索二叉树的知识给传授完毕&#xff0c;如果认真的看下去并且手打了几遍&#xff0c;基本上内部的逻辑还是可以理解的&#xff0c;那我们现在就截至继续学习树的一些重要知识啦~~ 树高怎么求呀&#xff1f;如果用上一次学的层次遍历来求树高&#xff0c;有点小题…

Redis分布式锁的实现核心思路

4.2 、Redis分布式锁的实现核心思路 实现分布式锁时需要实现的两个基本方法&#xff1a; 获取锁&#xff1a; 互斥&#xff1a;确保只能有一个线程获取锁非阻塞&#xff1a;尝试一次&#xff0c;成功返回true&#xff0c;失败返回false 释放锁&#xff1a; 手动释放超时释放&…

面试篇:杂乱篇

String s " "; 1. String类的常用方法有哪些&#xff1f; s.length()&#xff1a; 返回字符串长度s.substring()&#xff1a; 截取字符串s.split()&#xff1a; 分割字符串s.equlas()&#xff1a; 字符串比…

Chapter 1 Basic Concepts of Communication and Communication Systems

1.1 The Concept of Communication communication【通信】:It is the process of using signals to transmit messages containing information in space. To put it simply, communication is the spatial transmission of information【信息的空间传递】Information【信息】…

【JavaWeb】Day35.MySQL概述——数据库设计-DDL(二)

表操作 关于表结构的操作也是包含四个部分&#xff1a;创建表、查询表、修改表、删除表。 1.创建 语法 create table 表名( 字段1 字段1类型 [约束] [comment 字段1注释 ], 字段2 字段2类型 [约束] [comment 字段2注释 ], ...... 字段n 字段n类型 [约束] [comment …

藏不住了!这20个技术点是运维老手的秘密武器

你们好&#xff0c;我的网工朋友。 信息技术系统的正常运行直接关系到企业或生产的正常运行。 然而&#xff0c;网工经常面临以下问题&#xff1a;网络速度慢、设备故障和应用系统效率低。 任何信息技术系统的故障&#xff0c;如果不及时处理&#xff0c;都会产生很大的影响…

P2089 烤鸡、P1706 全排列问题、P1157 组合的输出、P1036 [NOIP2002 普及组] 选数——Python代码实现(带注释)

P2089 烤鸡 题目背景 猪猪 Hanke 得到了一只鸡。 题目描述 猪猪 Hanke 特别喜欢吃烤鸡&#xff08;本是同畜牲&#xff0c;相煎何太急&#xff01;&#xff09;Hanke 吃鸡很特别&#xff0c;为什么特别呢&#xff1f;因为他有 1010 种配料&#xff08;芥末、孜然等&#xf…

【优选算法专栏】专题十六:BFS解决最短路问题(一)

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…

串口和 蓝牙模块HC08

串口基本认知 串行接口简称串口&#xff0c;也称 串行通信 接口或 串行通讯接口 &#xff08;通常指 COM 接口 &#xff09;&#xff0c;是采用串行通信方 式的 扩展接口 。串行 接口&#xff08;Serial Interface &#xff09;是指数据一位一位地顺序传送。其特点是 通信线路…

优秀企业都在用的企微知识库,再不搭建就晚了!

每个团队都在寻找让工作效率提升的方法。如果你想知道哪些团队能够高效地完成任务&#xff0c;而另一些却步履维艰&#xff0c;那么答案可能就是“企业微信知识库”。见过很多团队都在使用它&#xff0c;而且效果非常显著。如果你还没有搭建属于自己的企微知识库&#xff0c;可…

你真的会写接口自动化测试断言吗?

你真的会写自动化测试断言吗&#xff1f; 在接口测试中&#xff0c;断言是一项非常重要的操作&#xff0c;它是用来校验接口返回结果是否符合预期的一种手段。一般来说&#xff0c;接口测试断言大致可以分为以下几类&#xff1a; 状态码断言&#xff1a;这是最基本也是最常用的…

【C语言】汉诺塔问题

目录 一、何为汉诺塔问题&#xff1f; 二、汉诺塔计算规律 三、打印汉诺塔的移动路径 总结 一、何为汉诺塔问题&#xff1f; 汉诺塔问题是一个经典的问题。汉诺塔&#xff08;Hanoi Tower&#xff09;&#xff0c;又称河内塔&#xff0c;源于印度一个古老传说。大梵天创造世…

BM57 岛屿数量(回溯)

对数组index的判断要放前面&#xff0c;要不然报数组越界异常。 import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** 判断岛屿数量* param grid char字符型二维数组 * return …

Unity开发者3D模型基础

术语“3D 建模”是指使用特殊软件创建对象或表面的 3D 数字表示的过程。 3D 模型可用于各种不同的目的&#xff0c;包括电影、视频游戏、建筑和工程。 3D 建模也是创建虚拟现实 (VR) 和增强现实 (AR) 体验工作的重要组成部分。 我们通常通过构建或获取 3D 模型并将其导入 Unit…

ssm028蜀都天香酒楼的网站设计与实现+jsp

基于JSP的蜀都天香酒楼管理系统的设计与实现 摘要 近年来&#xff0c;信息化管理行业的不断兴起&#xff0c;使得人们的日常生活越来越离不开计算机和互联网技术。首先&#xff0c;根据收集到的用户需求分析&#xff0c;对设计系统有一个初步的认识与了解&#xff0c;确定蜀都…

ssm026校园美食交流系统+vue

校园美食交流系统 摘 要 1 前 言 3 第1章 概述 4 1.1 研究背景 4 1.2 研究目的 4 1.3 研究内容 4 第二章 开发技术介绍 5 2.1Java技术 6 2.2 Mysql数据库 6 2.3 B/S结构 7 2.4 SSM框架 8 第三章 系统分析 9 3.1 可行性分析 9 3.1.1 技术可行性 9 3.1.2 经济可行…

极客时间: 用 Word2Vec, LangChain, Gemma 模拟全本地检索增强生成(RAG)

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…