Vue和Vue-Element-Admin(十三):基于vue2比较学习vue3

news2024/11/17 19:59:00

文章目录

  • 开篇总结
  • 1.创建 Vue3 工程
    • 1.1 【基于 vue-cli 创建】
    • 1.2 【基于 Vite 创建】(Vue 官方推荐)
    • 1.3 【基于 Vite 官方 create-vite 创建】
  • 2.Vue3 语法核心
    • 2.1 【拉开序幕的 setup】
    • 2.2 ref 和 reactive 的学习
    • 2.3 toRefs、toRef、computed
    • 2.4 【watch】
      • \*情况一:监视【ref】定义的 【基本类型】数据
      • \*情况二:监视【ref】定义的 【对象类型】数据
      • \*情况三:监视 【reactive】定义的【对象类型】数据,且默认开启了深度监视
      • \*情况四:监视 ref 或 reactive 定义的【对象类型】数据中的 某个属性
      • \*情况五:监视多个数据
    • 2.5【watchEffect】
    • 2.6【标签的 ref 属性】
    • 2.7 props
    • 2.8 Hooks
  • 3.路由
    • 3.1 两个注意点
    • 3.2 RouterLink 中 to 的两种写法
    • 3.3 路由器的工作模式
    • 3.4 路由传参
      • query 传参
      • parmas 传参
    • 3.5 路由的Props配置
    • 3.6 【replace属性】
    • 3.7 【编程式路由导航 和 重定向】
  • 4.【pinia】(建议看官网)
    • 4.1 在Vue3项目中引入pinia
    • 4.2 官网的一个基础示例
    • 4.3 【定义一个Store】
      • 【Option Store】
      • 【Setup Store】
    • 4.4【使用一个Store】
    • 4.5 【State】
      • 重置 state
      • 变更 state
      • 订阅 state
    • 4.6 【Getter】
      • getter 拿什么来计算?
      • 向 getter 传递参数
    • 4.7【Action】
      • 订阅 action
  • 5.组件通信
    • 5.1. 【props】
    • 5.2 【mitt】
    • 5.3 【v-model】
      • 原生input上使用v-model
      • 在一个输入组件上使用v-model
    • 5.4【$attrs 】
    • 5.5 【\$refs、$parent】
    • 5.6 【provide、inject】
    • 5.7 【slot】
      • 1. 默认插槽
      • 2. 具名插槽
      • 3. 作用域插槽
  • 6.其它 API
    • 6.1【shallowRef 与 shallowReactive 】
      • `shallowRef`
      • `shallowReactive`
      • 总结
    • 6.2【readonly 与 shallowReadonly】
      • **`readonly`**
      • **`shallowReadonly`**
    • 6.3【toRaw 与 markRaw】
      • `toRaw`
      • `markRaw`
    • 6.4【customRef】
  • 7.Vue3新组件
    • 7.1 【Teleport】
    • 7.2 【Suspense】
    • 7.3【全局API转移到应用对象】
    • 7.4【其他】

开篇总结

首先声明:这篇笔记中是在学习禹神最新Vue3教程记下来的,其中有一些自己写的笔记见解、搬禹神、vue、vite官网的一些笔记。主要目的还是给自己多一点知识点的总结。其实一遍下来,基本大部分都会,所以学习会很快。有几点我得好好在下面总结。

1.学习到的新点

  • props和provide传值可以通过传函数给下面的组件,组件调用后传参可以更改父元素。
  • 一个reactive响应式对象中包含有ref类型数据,通过reactive可以直接获取数据,有解包的过程
  • 新了解的mitt进行组件间的通信
  • 禹神yyds,作用域插槽每次看到都会有不一样的见解,但是不用容易忘,这次讲的例子很让人记忆深刻
  • position:fixed定位入口父元素中有filter CSS属性,也会和position:relative;一样。

2.学习的建议

  • 虽然之前通过各个方面资源学习vue,其中主要是通过官网和禹神的vue2视频学习,学习也简单,但是很重要的一点,就是要去多练,多接触,要不然很容易忘的。
  • 想学习更多的东西,看官网挺好的,当然听老师讲可能会对

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

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

相关文章

Gitcode文件历史记录查看和还原

文件历史记录 文件历史记录用于记录代码文件的更改历史,它允许用户查看文件的不同版本,了解每个版本的修改内容、作者和提交消息。这对于跟踪文件演进、恢复错误更改、审查代码以及了解项目进展都非常有用。 文件历史记录功能提供了以下核心功能&#…

WebSocket协议在Java中的整合

1. 常见的消息推送方式 2.WebSocket API 3.基于WebSocket的实战(实时聊天室) 这里以解析后端代码为主,前端不作为重点,若想复现项目,请从作者的仓库中拉取代码 WebSocket-chatRoom: 基于WebSocket协议实现一个简单的…

http自动发送请求工具(自动化测试http请求)

点击下载《http自动发送请求工具(自动化测试http请求)》 前言 在现代软件开发过程中,HTTP 请求的自动化测试是确保应用程序稳定性和可靠性的关键环节。为了满足这一需求,我开发了一款功能强大且易于使用的自动化 HTTP 请求发送工具。该工具基于 C# 开发…

【小白可懂】微信小程序---课表渲染

结果展示:(代码在最后) WeChat_20241116174431 项目简介 在数字化校园建设的大背景下,为了更好地服务于在校师生,我们开发了一款基于微信小程序的课表管理系统。该系统采用了现代化的前端技术和优雅的设计风格&#x…

WinDefender Weaker

PPL Windows Vista / Server 2008引入 了受保护进程的概念,其目的不是保护您的数据或凭据。其最初目标是保护媒体内容并符合DRM (数字版权管理)要求。Microsoft开发了此机制,以便您的媒体播放器可以读取例如蓝光,同时…

LabVIEW前面板最大化显示与像素偏差分析 有源程序附件

LabVIEW前面板最大化显示与像素偏差分析 有源程序附件 LabVIEW前面板最大化显示与像素偏差分析 有源程序附件 - 北京瀚文网星科技有限公司 这个VI用于将LabVIEW程序的前面板最大化地显示在指定显示器上,实现步骤如下: 1. 获取所有显示器的信息 首先&…

【C++】深入理解 C++ 优先级队列、容器适配器与 deque:实现与应用解析

个人主页: 起名字真南的CSDN博客 个人专栏: 【数据结构初阶】 📘 基础数据结构【C语言】 💻 C语言编程技巧【C】 🚀 进阶C【OJ题解】 📝 题解精讲 目录 前言📌 1. 优先级队列、容器适配器和 deque 概述✨1.1 什么是优…

LogViewer NLog, Log4Net, Log4j 文本日志可视化

LogViewer 下载 示例&#xff1a;NLog文本日志可视化软件&#xff0c;并且能够实时监听输出最新的日志 nlog.config 通过udp方式传输给LogViewer (udp://ip:port) <?xml version"1.0" encoding"utf-8" ?> <nlog xmlns"http://www.nlog-…

安卓开发作业

整体效果: 安卓小作业 [TOC](页面配置) 整体框架有4个fragment页面,聊天,朋友,发现,设置. 配置如下: bash <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android" xm…

【QML】QML多线程应用(WorkerScript)

1. 实现功能 QML项目中&#xff0c;点击一个按键后&#xff0c;运行一段比较耗时的程序&#xff0c;此时ui线程会卡住。如何避免ui线程卡住。 2. 单线程&#xff08;会卡住&#xff09; 2.1 界面 2.2 现象 点击delay btn后&#xff0c;执行耗时函数&#xff08;TestJs.func…

深度学习中的Pixel Shuffle和Pixel Unshuffle:图像超分辨率的秘密武器

在深度学习的计算机视觉任务中&#xff0c;提升图像分辨率和压缩特征图是重要需求。Pixel Shuffle和Pixel Unshuffle是在超分辨率、图像生成等任务中常用的操作&#xff0c;能够通过转换空间维度和通道维度来优化图像特征表示。本篇文章将深入介绍这两种操作的原理&#xff0c;…

pom中无法下载下来的类外部引用只给一个jar的时候

比如jar在桌面上放着,操作步骤如下&#xff1a; 选择桌面&#xff0c;输入cmd ,执行mvn install:install-file -DgroupIdcom -DartifactIdaspose-words -Dversion15.8.0 -Dpackagingjar -Dclassifierjdk11 -Dfilejar包名称 即可把jar包引入成功。

群控系统服务端开发模式-应用开发-前端图片格式功能开发

一、添加视图 在根目录下src文件夹下views文件夹下param文件夹下grade文件夹下&#xff0c;新建index.vue&#xff0c;代码如下 <template><div class"app-container"><div class"filter-container" style"float:left;"><…

【Web前端】Promise的使用

Promise是异步编程的核心概念之一。代表一个可能尚未完成的操作&#xff0c;并提供了一种机制来处理该操作最终的成功或失败。具体来说&#xff0c;Promise是由异步函数返回的对象&#xff0c;能够指示该操作当前所处的状态。 当Promise被创建时&#xff0c;它会处于“待定”&a…

EEG+EMG学习系列 (2) :实时 EEG-EMG 人机界面的下肢外骨骼控制系统

[TOC]( EEGEMG学习系列(2):实时 EEG-EMG 人机界面的下肢外骨骼控制系统) 论文地址&#xff1a;https://ieeexplore.ieee.org/abstract/document/9084126 论文题目&#xff1a;Real-Time EEG–EMG Human–Machine Interface-Based Control System for a Lower-Limb Exoskeleton …

Spring Authorization Server OAuth2.1

Spring Authorization Server介绍 Spring Authorization Server 是一个框架&#xff0c;它提供了 OAuth 2.1 和 OpenID Connect 1.0 规范以及其他相关规范的实现。 它建立在 Spring Security 之上&#xff0c;为构建 OpenID Connect 1.0 身份提供者和 OAuth2 授权服务器产品提供…

《生成式 AI》课程 第3講 CODE TASK 任务3:自定义任务的机器人

课程 《生成式 AI》课程 第3講&#xff1a;訓練不了人工智慧嗎&#xff1f;你可以訓練你自己-CSDN博客 我们希望你创建一个定制的服务机器人。 您可以想出任何您希望机器人执行的任务&#xff0c;例如&#xff0c;一个可以解决简单的数学问题的机器人0 一个机器人&#xff0c…

Python知识点精汇!字符串:定义、截取(索引)和其内置函数

目录 一、字符串的定义 二、字符串的截取 1.截取干啥的 2.怎么用截取 3.打印多次 4.两个字符串拼接在一起 三、字符串内置函数 1.查询函数&#xff1a; &#xff08;1&#xff09;find(str,start,end) &#xff08;2&#xff09;index&#xff08;str,start,end&#…

创建vue+electron项目流程

一个vue3和electron最基本的环境搭建步骤如下&#xff1a;// 安装 vite vue3 vite-plugin-vue-setup-extend less normalize.css mitt pinia vue-router npm create vuelatest npm i vite-plugin-vue-setup-extend -D npm i less -D npm i normalize.css -S &#xff0…

从0开始机器学习--Day27--主成分分析方法

主成分分析方法(Principal components analysis) 在降维算法中&#xff0c;比较普遍的是使用主成分分析方法&#xff08;PCA&#xff09; PCA算法简单示例 如图&#xff0c;假设我们有一个二维的特征&#xff0c;想要将其降为一维&#xff0c;简单的方法是寻找一条直线&#…