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

Vue3的学习

create-vue创建vue3项目

create-vue是官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供急速响应

  • 前提环境条件:控制面板输入node -v,显示的是安装了16.0或更高版本的Node.js
  • 创建一个Vue应用:npm init vue@latest
  1. vite.config.js --- 项目的配置文件基于vite的配置
  2. package.json --- 项目包文件核心依赖项是vue3
  3. main.js --- 入口文件createApp函数创建应用实例
  4. app.vue --- 根组件SFC单文件组件script-template
    1. 脚本script和模板template顺序调整
    2. 模板template不再要求唯一根元素
    3. 脚本script添加setup表示支持组合式API
  5. index.html --- 单页入口,提供id为app的挂载点

创建项目和yun:

创建一个Vue应用:npm init vue@latest

接下来会需要输入项目名,此时输入的项目名是:vue_project

接下来输入执行下面的语句(之后如果要打开项目也是指令,终端要进入项目所在的目录)

cd vue_project

npm install

npm run dev(之后打开项目使用这条语句)

组合式API

setup

执行时,比beforeCreate还要早

setup函数中,获取不到this(this是underfined)

vue2的完整写法:

(定义数据+函数 然后以对象方式return)

<script>export default {setup(){console.log('setup函数')const message='hello'const logMessage=()=>{console.log(message)}return{message,logMessage}},beforeCreate() {console.log('beforeCreate函数')}}
</script>
<template><div>{{ message }}</div><button @click="logMessage">按钮</button>
</template>
vue3的语法糖可以简化return:

(使用组合式API)


<script setup>
//数据
const message='this is a message'
const logMessage=()=>{console.log(message)
}
</script>
<template><div>{{ message }}</div><button @click="logMessage">按钮</button>
</template>

reactive()和ref()

reactive()

接收一个对象类型的数据,返回一个响应式的对象

<script setup>import {reactive} from "vue";const state=reactive({count:100})const setCount=()=>{state.count++}
</script><template><div>{{state.count}}</div><button @click="setCount">++</button>
</template>
ref()

接收简单类型或复杂类型,返回一个响应式对象

本质:是在原有传入数据的基础上,外层包了一层对象,包成了复杂类型

底层:保存复杂类型之后,再借助reactive实现的响应式

注意:

  • 脚本中访问数据,需要通过.value
  • 在template中,.value不需要加(帮我们扒了一层)
<script setup>import {ref} from 'vue'const count =ref(简单类型或者复杂类型数据)
</script>
<script setup>// import {reactive} from "vue";// const state=reactive({//   count:100// })// const setCount=()=>{//   state.count++// }import {ref} from "vue";const count=ref(0)const setCount=()=>[count.value++]
</script><template><div>{{count}}</div><button @click="setCount">++</button>
</template>

computed

步骤:

  • 导入computed函数
  • 执行函数在
  • 回调参数中return基于响应式数据做计算的值,用变量接收

只读写法:

可写方法:

watch函数

监听一个或多个数据的变化,数据变化时执行回调函数

监听单个数据
  • 导入watch函数
  • 执行watch监听传入要监听的咸阳市数据(ref对象)和回调函数

监听多个数据

不管哪个数据变化都需要监听

1.其中第三个参数可以写immediate:true,可以立刻执行(例如在打开页面时)

2.deep深度监视,默认watch进行的是浅层监视

  • const ref1=ref(简单类型)可以直接监视
  • const ref2=ref(复杂类型)监视不到复杂类型内部数据的变化

3.对于对象中的单个属性,进行监视

组合式API下的数据传递

父传子

由于写了setup,所以无法直接配置props,此处借助于“编译器宏”函数defineProps接收传递的数据

defineProps原理

就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换

子传父

  • 父组件中给子组件标签通过@绑定事件
  • 通过defineEmits编译器宏生成emit方法
  • 子组件内部通过emit方法触发事件

模板引用

概念:通过ref标识获取真实的都没对象或者组件实例对象

  1. 通过ref函数,生成一个ref对象 
  2. 通过ref标识,进行绑定
  3. 通过ref对象,value即可访问到绑定的元素

defineFxpose()

在默认情况下<script setup>语法糖组件内部的属性和方法是不开放给父组件访问的,可以通过defineFxpose编译宏指定哪些属性和方法可以访问

defineExpose({testMessage
})

project&inject

跨层组件通过provide函数提供数据

底层组件通过inject函数获取数据

新特性defineOptions

1.在vue2中用的<script>标签,其中setup,props,emits等是平级属性

2.在vue3中是用的<script setup>标签,setup属性已经没有了,无法添加与其平行的属性,所以引入了defineProps和defineFmits这两个宏。

如果要定义组件的name或其他自定义属性,还是得回到最原始的用法——再添加一个普通的<script>标签

所以引用了defineOptions宏,只要是用来定义Options API选项,可以定义defineOptions任意选项,props,emit,expose,slots除外(这些可以使用defineXXX来实现)

defindModel

要使用,在vite.config.js中加入配置,接着要重启项目

Pinia

Pinia是Vue的最新的状态管理工具,是Vuex的替代品

可以在创建Vue项目时Pinia那一栏选择Yes,也可以在该项目的终端输入指令:yarn add pinia 或者使用 npm install pinia

相关文章:

Vue3的学习

create-vue创建vue3项目 create-vue是官方新的脚手架工具&#xff0c;底层切换到了vite&#xff08;下一代构建工具&#xff09;&#xff0c;为开发提供急速响应 前提环境条件&#xff1a;控制面板输入node -v&#xff0c;显示的是安装了16.0或更高版本的Node.js创建一个Vue应…...

什么是Peppol ID?如何创建?

Peppol 网络的两大优势是安全和高效&#xff0c;由于Peppol 最常用于电子发票&#xff0c;因此这些优势在电子发票上展露无遗。相比之下&#xff0c;通过电子邮件发送 PDF 格式的发票和其他文件不仅处理成本较高&#xff0c;而且容易出现发票欺诈。 如果您所在的公共部门组织或…...

Spring注解大揭秘:@Component、@Service、@Repository详解

Spring注解大揭秘&#xff1a;Component、Service、Repository详解 前言比较 前言 想象一下&#xff0c;你正在构建一个复杂的Spring应用程序。你需要管理各种不同类型的组件&#xff0c;包括服务层、数据访问层和通用组件。Spring的Component、Service和Repository注解就像是你…...

Innodb底层原理与Mysql日志机制

MySQL内部组件结构 Server层 主要包括连接器、词法分析器、优化器、执行器等&#xff0c;涵盖 MySQL 的大多数核心服务功能&#xff0c;以及所有的内置函数&#xff08;如日期、时间、数学和加密函数等&#xff09;&#xff0c;所有跨存储引擎的功能都在这一层实现&#xff0c…...

浅谈大数据背景下用户侧用电数据在电力系统的应用与发展分析

安科瑞 华楠 摘要&#xff1a;随着能源互联网、互联网、新型传感技术的持续推进&#xff0c;电力用户侧用电数据呈现指数级剧增、异构性增强的情况&#xff0c;逐渐构成了用户侧用电行为大数据。然而目前对电力领域的数据价值挖掘于电网内部和电源端&#xff0c;用户侧庞大且蕴…...

20230919在WIN10下使用python3将PDF文档转为DOCX格式的WORD文档

20230919在WIN10下使用python3将PDF文档转为DOCX格式的WORD文档 2023/9/19 11:20 python pdf word https://blog.csdn.net/u013185349/article/details/130059657 Python实现PDF转Word文档 AcceptedLin 已于 2023-04-10 14:45:17 修改 1243 收藏 1 文章标签&#xff1a; pd…...

PCR检测试剂——博迈伦

PCR&#xff08;聚合酶链式反应&#xff09;是一种常用的分子生物学技术&#xff0c;被广泛应用于基因分型、基因表达分析、病原体检测等领域。在PCR实验中&#xff0c;PCR检测试剂是必不可少的重要组成部分&#xff0c;它们包括引物、酶、缓冲液和核苷酸。 1. 引物&#xff08…...

spring一个项目多个模块聚合打包问题解决方案

文章目录 1.问题描述&#xff1a;2.解决方案一、创建聚合父工程二、创建子模块&#xff08;module&#xff09;三、编写子模块代码1.模块1&#xff08;demo-one&#xff09;2.模块2&#xff08;demo-tow&#xff09; 四、创建聚合模块 &#xff08;demo-starter&#xff09;1. …...

Linux设备树(Device Tree)何时被解析

Linux设备树&#xff08;Device Tree&#xff09;是在内核启动阶段就会被解析。当 Linux 内核启动的时候&#xff0c;它会读取设备树文件&#xff08;dtb文件&#xff09;并根据里面的信息来组织设备、加载驱动等。在驱动代码里&#xff0c;通常我们是在驱动初始化&#xff08;…...

【Elasticsearch】数据简单操作(二)

简介&#xff1a;Elasticsearch&#xff08;ES&#xff09;是一个开源的分布式搜索和分析引擎&#xff0c;用于快速存储、搜索和分析大量数据。它具有高性能、可扩展性和灵活性的特点&#xff0c;被广泛用于构建实时搜索、日志分析、数据可视化等应用。 本文主要介绍ES索引的操…...

4 vCPU 实例达成 100 万 JSON API 请求/秒的优化实践

“性能工程” &#xff08;Performance engineering&#xff09;是个日渐流行的概念。顾名思义“性能工程”是包含在系统开发生命周期中所应用的一个技术分支&#xff0c;其目的就是确保满足非功能性的性能需求&#xff0c;例如&#xff1a;性能、可靠性等。由于现代软件系统变…...

呼叫中心系统有什么优势

在随着企业的管理水平也在不断提高。企业经营管理中所涉及到的各种复杂问题都有逐渐凸显出来。传统的呼叫中心已无法满足企业服务需求和客户满意度变化的要求。因此通过呼叫中心系统将企业业务流程和数据整合起来进行管理和运营已经成为目前企业管理领域中较为流行和成熟之选。…...

如何在linux操作系统下安装nvm

本文主要介绍如何在linux操作系统下安装nvm&#xff0c;如果想知道nvm如何在windows操作系统下使用&#xff0c;请参考文章如何通过nvm管理多个nodejs版本_nvm 查看所有node版本-CSDN博客。 1、nvm下载 nvm全称Node Version Manager&#xff0c;即Node版本管理器。访问官网地址…...

Linux 入门:基本指令

本篇文章来介绍我们在初学Linux时可以会碰倒的一些基本指令&#xff0c;让我们对这些指令有一个基本的了解。 目录 01. ls 指令 02. pwd 命令 03. cd 指令 04. touch 指令 05. mkdir 指令&#xff08;重要&#xff09; 06. rmdir指令 && rm 指令&#xff08;重…...

IP转地理位置:探讨技术与应用

IP地址是互联网上设备的唯一标识符&#xff0c;而将IP地址转换为地理位置信息是网络管理、安全监控和市场定位等领域中的一项重要任务。本文将深入探讨IP转地理位置的技术原理和各种应用场景。 IP地址与地理位置 IP地址&#xff08;Internet Protocol Address&#xff09;是一…...

关于埋点上报

一、埋点上报结构包含哪些&#xff1f; 埋点上报结构一般包含以下信息&#xff1a; 事件名称&#xff1a;标识上报的是哪个事件&#xff0c;例如“注册成功”或“点击按钮”等。事件发生时间&#xff1a;记录事件发生的时间戳。用户ID&#xff1a;标识事件所属的用户。设备信息…...

最新博客园图片上传接口,模拟实现图片上传

简单看了一下博客园的图片上传接口&#xff0c;可以拿来做图床工具&#xff0c;仅供参考学习&#xff0c;请勿滥用。 1、实例代码 #!/usr/bin/python # -*- coding: UTF-8 -*- """ author: Roc-xb """import requestsurl "https://uplo…...

ROS2 从头开始:第 08/8回 - 使用 ROS2 生命周期节点简化机器人软件组件管理

一、说明 欢迎来到我在 ROS2 上的系列的第八部分。对于那些可能不熟悉该系列的人,我已经涵盖了一系列主题,包括 ROS2 简介、如何创建发布者和订阅者、自定义消息和服务创建、...

Vue组件库Element

目录 Vue组件库ElementElement简介Element快速入门环境配置Element常用组件Table表格Table表格演示Table表格属性详解 Pagination分页Pagination分页演示Pagination分页属性详解Pagination分页事件详解 Dialog对话框Dialog对话框组件演示Dialog对话框属性详解 Form表单Form表单…...

broadcast自动扩展

broadcast&#xff1a; 1、能够进行维度扩展&#xff0c;是自动的2、在扩展的时候不需要拷贝数据要点&#xff1a; - 从最小的维度开始匹配&#xff0c;如果前面没有维度了&#xff0c;在前面插入一个新的维度。- 插入的新维度size是1&#xff0c;再将其扩展为与目标相同大小si…...

Z-Image-Turbo模型在智能车领域的应用:仿真场景图像生成

Z-Image-Turbo模型在智能车领域的应用&#xff1a;仿真场景图像生成 最近和几个做自动驾驶算法的朋友聊天&#xff0c;他们都在为一个问题头疼&#xff1a;测试数据不够用。特别是那些罕见的极端场景&#xff0c;比如暴雨天、浓雾夜&#xff0c;或者刺眼的逆光路况&#xff0c…...

3步解锁魔兽争霸III最佳体验:WarcraftHelper全方位优化工具指南

3步解锁魔兽争霸III最佳体验&#xff1a;WarcraftHelper全方位优化工具指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper WarcraftHelper是一款专为…...

快速体验:Python3.8镜像开箱即用,无需配置直接写代码

快速体验&#xff1a;Python3.8镜像开箱即用&#xff0c;无需配置直接写代码 1. Python3.8镜像简介 Python作为当下最流行的编程语言之一&#xff0c;其3.8版本在性能优化和功能完善方面达到了一个成熟稳定的阶段。这个预配置好的Python3.8镜像&#xff0c;让你可以完全跳过繁…...

如何一键下载国内主流视频平台的在线视频:Video-Downloader完全指南

如何一键下载国内主流视频平台的在线视频&#xff1a;Video-Downloader完全指南 【免费下载链接】Video-Downloader 下载youku,letv,sohu,tudou,bilibili,acfun,iqiyi等网站分段视频文件&#xff0c;提供mac&win独立App。 项目地址: https://gitcode.com/gh_mirrors/vi/V…...

git clone git@github.com: Permission denied (publickey)权限拒绝问题

一、前言最近在部署detectron2&#xff08;Facebook开源的目标检测框架&#xff09;时&#xff0c;执行克隆命令&#xff1a;git clone gitgithub.com:facebookresearch/detectron2.git终端直接抛出如下错误&#xff1a;Cloning into detectron2... gitgithub.com: Permission …...

南京大学发布“视频侦探“系统:让AI像侦探一样从长视频中找线索

这项由南京大学与中科院自动化所联合进行的研究发表于2026年的计算机视觉与模式识别(CVPR)会议&#xff0c;论文编号为arXiv:2603.22285。有兴趣深入了解的读者可以通过该编号查询完整论文内容。当我们观看一部两小时的电影时&#xff0c;想要回答"主角在什么时候第一次露…...

全民养虾潮背后:智能体产业的产业化困局

2026年3月&#xff0c;如果你在科技园区看到有人抱着电脑排长队&#xff0c;或者听到“养虾了吗”的问候&#xff0c;不必感到奇怪。这只“虾”正是开源AI智能体——OpenClaw。从社交平台刷屏的“养龙虾”攻略到GitHub星标数突破27万&#xff0c;超越Linux登顶全球开源项目榜首…...

QGIS插件开发避坑指南:我的第一个批量属性修改工具是怎么炼成的

QGIS插件开发避坑指南&#xff1a;我的第一个批量属性修改工具是怎么炼成的 第一次打开QGIS的Python控制台时&#xff0c;我完全没意识到自己即将踏入一个充满"惊喜"的世界。作为一名有Python基础但缺乏Qt框架经验的开发者&#xff0c;本以为凭借官方文档就能轻松实现…...

Graphormer实战教程:基于ogb库加载PCQM4M数据微调模型示例

Graphormer实战教程&#xff1a;基于ogb库加载PCQM4M数据微调模型示例 1. 引言 Graphormer是一种创新的分子属性预测模型&#xff0c;采用纯Transformer架构的图神经网络设计。它专门针对分子图&#xff08;原子-键结构&#xff09;的全局结构建模与属性预测任务&#xff0c;…...

Cortex-M为何不能运行Linux?解析ARM架构与操作系统的兼容性

1. Cortex-M与Linux的兼容性解析作为一名在嵌入式领域摸爬滚打多年的工程师&#xff0c;我经常被问到这个问题&#xff1a;"为什么我的STM32&#xff08;基于Cortex-M内核&#xff09;不能跑Linux&#xff1f;"要回答这个问题&#xff0c;我们需要从处理器架构和操作…...