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,一经查实,立即删除!

相关文章

Android OkHttp

目录 1.build.gradle 2.基本使用 3.POST请求 4.Builder构建者 1.build.gradle implementation("com.squareup.okhttp3:okhttp:4.12.0") 2.基本使用 GET同步请求 public void getSync(View view) {new Thread(){Overridepublic void run() {Request request …

C语言初阶--12数组

文章目录 二维数组的创建和初始化二维数组的创建二维数组的初始化二维数组的使用二维数组在内存中的存储 数组越界数组作为函数参数冒泡排序函数数组名是什么&#xff1f; 二维数组的创建和初始化 二维数组的创建 //数组创建 int arr[3][4]; double arr[2][4]; 二维数组的初始…

HTML中meta标签的作用

1.搜索引擎优化 通过设置关键词&#xff08;keywords&#xff09;、描述&#xff08;description&#xff09;等属性&#xff0c;帮助搜索引擎更好地理解网页内容&#xff0c;从而提高网页在搜索结果中的排名 2.定义页面使用的语言 通过charset属性指定文档的字符集&#xff0…

windows通过cmd终止线程

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

Spring Security——10,其他权限校验方法

其他权限校验方法 一、hasAnyAuthority方法二、hasRole方法三、hasAnyRole方法一键三连有没有捏~~ 前面都是使用PreAuthorize注解&#xff0c;然后在在其中使用的是hasAuthority方法进行校验。 SpringSecurity还为我们提供了其它方法例如&#xff1a;hasAnyAuthority&#xff…

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

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

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

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

2024使用VMware® Workstation 17 Pro部署Ubuntu22.04

官网下载镜像 https://ubuntu.com/download/server&#xff0c;配置好vmware的NAT网络。 常用设置 # root用户登录设置&#xff0c;用 sudo 也一样。 sudo passwd root vi /etc/ssh/sshd_config systemctl restart sshdVMware的网络问题 # 遇到的问题 # 1.明明显示已经连上…

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

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

SeLinux安全上下文文件

在SeLinux 框架中&#xff0c;需要为每个主体和客体设置好安全上下文。在Android中&#xff0c;常见的安全上下文文件有file_contexts、genfs_contexts、service_contexts、mac_permissions.xml和seapp_contexts file_contexts 根系统中所有文件的安全上下文&#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; 字符串比…

ubuntu18.04-arm7v架构下构建Telegraf自定义系统服务

ubuntu18.04-arm7v架构下构建Telegraf自定义系统服务 通过交叉编译后的Telegraf可执行文件使用nohup启动后&#xff0c;在系统重启时&#xff0c;有时候会忘记再把它启动起来。这个时候我们就可以将其定义成系统服务&#xff0c;让系统来帮忙管理。 创建telegraf.service文件 …

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【信息】…

linux CentOS7配置docker的yum源并安装

[TOC](这里写目录标题 配置yum源Docker的自动化安装一些其他启动相关的命令&#xff1a; 配置yum源 使用以下命令下载CentOS官方的yum源文件 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 清除yum缓存 yum clean all 更新yum缓存…

上升Chrome安装Vue插件vue-devtools

Chrome安装Vue插件vue-devtools的步骤如下&#xff1a; 打开Chrome浏览器&#xff0c;点击地址栏右侧的三个点图标&#xff0c;选择“更多工具”->“扩展程序”。在打开的扩展程序页面&#xff0c;点击右上角的“打开Chrome网上应用店”。在Chrome网上应用店中搜索“Vue De…

【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;都会产生很大的影响…

@RequestBody与@RequestParam的区别

RequestBody会将请求体中的数据&#xff0c;转换成对象 RequestParam会从http请求查询参数中提取数据 RequestParam和RequestBody是Spring Framework中用于处理HTTP请求的注解&#xff0c;它们有以下区别&#xff1a; 1.数据来源: RequestParam: 从HTTP请求的查询参数中提取…

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

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