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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IoT数采平台4:测试

IoT数采平台1&#xff1a;开篇IoT数采平台2&#xff1a;文档IoT数采平台3&#xff1a;功能IoT数采平台4&#xff1a;测试 Modbus RTU串口测试 OPC测试 HTTP测试 MQTT透传测试 MQTT网关测试及数据上报 TCP / UDP 监听&#xff0c;客户端连上后发送信息&#xff0c;客户端上报数据…

P4117 [Ynoi2018] 五彩斑斓的世界

分析第一个操作 朴素的做法&#xff0c;遍历一遍大于x就-x&#xff0c;极限复杂度O(mn) 分块做法 整块:我们维护一个最大值&#xff0c;从mx到x遍历一遍&#xff08;减去x)用并查集操作merge(i,i-x),考虑mx100001,x1,极限复杂度O(mV) 我们可以分析 1.x>(mx/2),从mx到x遍…

LwIP TCP/IP

LWIP 架构 LwIP 符合 TCP/IP 模型架构&#xff0c;规定了数据的格式、传输、路由和接收&#xff0c;以实现端到端的通信。 此模型包括四个抽象层&#xff0c;用于根据涉及的网络范围&#xff0c;对所有相关协议排序&#xff08;参见图 2&#xff09;。这几层从低到高依次为&am…

【grpc】二、grpc入门,基本使用方法

上篇介绍了使用protobuf生成grpc相关代码&#xff0c;并实现了服务端方法&#xff0c;本篇介绍下具体的使用。 一、服务端 // server.gopackage mainimport ("google.golang.org/grpc""grpcDemo/calc""net" )func startServer(addr string) {//…

近距离共享数字化实战经验,深挖数据价值赋能千行百业

近期&#xff0c;思迈特软件积极投身于金融、制造、零售、医疗等多个行业的线下活动中&#xff0c;深度解析行业趋势&#xff0c;分享BI数字化创新解决方案&#xff0c;并与客户及合作伙伴进行深入交流。通过这些活动&#xff0c;不仅展示了思迈特软件在各领域的先进技术和成果…

【SpringCloud】Nacos 配置管理

目 录 一.统一配置管理1. 在 nacos 中添加配置文件2. 从微服务拉取配置 二.配置热更新1. 方式一2. 方式二 三.配置共享1. 添加一个环境共享配置2. 在 user-service 中读取共享配置3. 运行两个 UserApplication&#xff0c;使用不同的 profile4. 配置共享的优先级5. 多服务共享配…

【C语言】标准库ctype.h(判断和映射字符)

【C语言】标准库ctype.h&#xff1a;判断和映射字符。 #include <ctype.h> 标准库ctype.h&#xff1a; 函数中的参数&#xff1a;都是无符号字符转换为int值进行传递。 判断函数中的返回&#xff1a;若满足判断条件&#xff0c;返回非零值。若不满足判断条件&#xff0c…

计算机研究生规划

一、计算机研究生技术栈 两条腿走路: 左侧工程实践能力&#xff1a;要掌握python编程语言&#xff0c;它和机器学习、神经网络&#xff08;这两门几乎是必须掌握的技能&#xff09;的学习有很大关系 右侧学术创新能力 二、编程语言能力提升 左边基础&#xff0c;右边教你写…

区块链的网络架构有哪些?

区块链技术的兴起正在深刻地改变着互联网的格局。它不仅提供了去中心化、数据透明、难以篡改等优势&#xff0c;还为各种应用场景提供了新的可能性。为了更好地理解区块链&#xff0c;我们需要深入探讨其网络架构。 区块链网络架构主要由以下几个部分组成&#xff1a; 1. 区块…

数字信息化手术麻醉信息系统源码,自动生成各种医疗文书、集成HIS、EMR、LIS、PACS系统

手术麻醉信息系统可以实现手术室监护仪、麻醉机、呼吸机、输液泵等设备输出数据的自动采集&#xff0c;采集的数据能据如实准确地反映患者生命体征参数的变化&#xff0c;并实现信息高度共享&#xff0c;根据采集结果&#xff0c;综合其他患者数据&#xff0c;自动生成手术麻醉…

Vite+Vue3.0项目使用ant-design-vue <a-calendar>日期组件汉化

antd的弹框、日期等默认为英文&#xff0c;要把英文转为中文请看下文&#xff1a; 1.首先我们要在main.js中引入ant-design组件库并全局挂载&#xff1a; import App from ./App import Antd from ant-design-vue; import ant-design-vue/dist/antd.css;const app createApp(…

数据结构与算法:哈希表

目录 1.哈希表和哈希 1.1.知识引入 1.2.为什么需要哈希表呢&#xff1f; 2.简易的哈希表 2.1.哈希表的基础结构 2.2.如何实现基础的哈希表 2.2.1.增 2.2.2.删 2.2.3.查 2.3.泛型编程下的哈希表 3.简易的哈希桶 1.哈希表和哈希 1.1.知识引入 哈希表&#xff08;Hash …

算法打卡day36|动态规划篇04| 01背包理论基础、416. 分割等和子集

目录 01背包理论基础 01背包问题描述 01背包解法 二维数组 一维数组 算法题 Leetcode 416. 分割等和子集 个人思路 解法 动态规划 01背包理论基础 不同的背包种类&#xff0c;虽然有那么多中南背包&#xff0c;但其中01背包和完全背包是重中之重&#xff1b; 01背包问…

练习题(2024/4/8)

1 括号生成 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())()","()(())",…

GEE必须会教程—一文教会你GEE下载影像数据的方法

一、基本流程 A.平台进入&#xff1a;网站搜索&#xff1a;https://developers.google.com/earth-engine&#xff0c;进入Google Earth Engine 官网平台&#xff08;以下简称GEE平台&#xff09;&#xff0c;正常登录该平台需要利用邮箱进行申请&#xff0c;申请通过后可以正常…

图书馆自助借书机怎么借书

图书馆自助借书机借书流程如下&#xff1a; 1. 找到图书馆自助借书机&#xff0c;在机器上选择借书功能。 2. 输入自己的借书卡号或者身份证号码&#xff0c;如果是第一次借书&#xff0c;可能需要进行注册。 3. 输入图书的条形码号码&#xff0c;可以通过扫描条形码或者手动输…

LangChain-11 Code Writing FunctionCalling 大模型通过编写代码完成需求 大模型计算加法

背景简介 我们知道GPT模型对于内容的输出&#xff0c;是对下一个字符的预测&#xff0c;通过概率选出下一个文本。 而且我们也知道&#xff0c;训练样本是非常庞大的&#xff0c;对于GPT来说&#xff0c;也是有可能学习过1 1 2的。 当我们向GPT询问11 时&#xff0c;完全可以…

Verilog语法——按位取反“~“和位宽扩展的优先级

前言 先说结论&#xff0c;如下图所示&#xff0c;在Verilog中“~ ”按位取反的优先级是最高的&#xff0c;但是在等式计算时&#xff0c;有时候会遇到位宽扩展&#xff0c;此时需要注意的是位宽扩展的优先级高于“~”。 验证 仿真代码&#xff0c;下面代码验证的是“~”按位取…

腾讯云视频点播配置说明 | Modstart

开通云点播 开通云点播 云点播VOD_音视频点播_直播回看_音视频上传、存储转码AI处理方案-腾讯云 获取腾讯云 SecretId 和 SecretSecret 注册并且登录 腾讯云

【深度学习基础】

打基础日常记录 CNN基础知识1. 感知机2. DNN 深度神经网络&#xff08;全连接神经网络&#xff09;DNN 与感知机的区别DNN特点&#xff0c;全连接神经网络DNN前向传播和反向传播 3. CNN结构【提取特征分类】4. CNN应用于文本 RNN基础1. RNN的本质 词向量模型word2Vec1. 自然语言…