黑马VUE3视频笔记

目录

一、使用create-vue创建项目

二、setup选项

三、reactive和ref函数

1.reactive()

2.ref()

三、computed

四、watch

​五、生命周期函数

六、父传子、子传父

父传子defineProps

子传父defineEmits

七、模板引用

ref

defineExpose

八、跨层传递普通数据 provide和inject

传递普通数据

传递响应式数据

跨层传递方法

九、新特性-defineOption

十、pinia

pinia基本语法

action异步写法

storeToRefs

pinia持久化

十一、vue3大事件管理系统

pnpm包管理器

node版本管理工具

笔记:黑马 大事件项目 笔记_珊珊而川的博客-CSDN博客

一、使用create-vue创建项目

npm init vue@latest

vue2的插件是vetur vue3的插件是volar

二、setup选项

<script setup>
</script>

三、reactive和ref函数

1.reactive()

2.ref()

三、computed

四、watch

深度监听:deep:true

精确监听对象的某个属性:

五、生命周期函数

六、父传子、子传父

父传子defineProps

父组件传过去的值动态控制,子组件接受的也是动态的

defineEmits配置原理:

子传父defineEmits

七、模板引用

ref

defineExpose

暴露属性和方法

八、跨层传递普通数据 provide和inject

顶层组件

底层组件

底层组件给顶层组件传值

顶层组件:

底层组件

传递普通数据

传递响应式数据

跨层传递方法

九、新特性-defineOption

为了解决定义平级属性、一个页面2个script标签的问题

解决:

十、pinia

pinia基本语法

1.创建项目

2.引入pinia

安装 | Pinia 中文文档

3.定义一个store

4.使用 store

声明函数操作方法

声明基于数据的派生的计算属性getters

action异步写法

storeToRefs

对仓库里的数据做出结构,用其包裹

pinia持久化

官网说明

引入

使用

pinia的key值是可以改的

不希望整个state都作持久化,用paths:[]

总结:

十一、vue3大事件管理系统

pnpm包管理器

node版本管理工具

npm-setup.exe

笔记:黑马 大事件项目 笔记_珊珊而川的博客-CSDN博客

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

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

相关文章

JAXB(Java Architecture for XML Binding)下载、使用

简介 JAXB&#xff08;Java Architecture for XML Binding&#xff09;就是XML数据绑定的java架构。JAXB可以根据XML Schema生成java类&#xff0c;也能根据java类生成XML Schema&#xff0c;能将XML数据unmarshall到Java内容树&#xff0c;也能将Java内容树持久化为XML数据。…

【煤矿虚拟仿真体验】VR采煤机技能培训有效提高训练效果

在我们的社会中&#xff0c;能源是至关重要的。它是推动我们日常生活和工作的主要动力。然而&#xff0c;我们在获取这种能源的过程中&#xff0c;也带来了许多环境问题。煤矿开采是其中的一个重要部分&#xff0c;因此我们需要寻找更环保、更安全的方式来进行煤矿开采。VR&…

手把手教你用 Milvus 和 Towhee 搭建一个 AI 聊天机器人

作为向量数据库的佼佼者&#xff0c;Milvus 适用于各种需要借助高效和可扩展向量搜索功能的 AI 应用。 举个例子&#xff0c;如果想要搭建一个聊天机器人&#xff0c;Milvus 一定是其进行数据管理的首选。那么&#xff0c;如何让这个应用程序开发变得易于管理及更好理解&#x…

LeetCode算法二叉树—222. 完全二叉树的节点个数

目录 222. 完全二叉树的节点个数 - 力扣&#xff08;LeetCode&#xff09; 代码&#xff1a; 运行结果&#xff1a; 给你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能…

2023-09-28 monetdb-db,schema,user,role-分析

摘要: 对moentdb的database,schema,user,role和权限做分析, 以与mysql中的概念做对比分析. 备份: https://stoneatom.yuque.com/staff-ft8n1u/qfqtnb/gfqc62fozh0qsyqm 上下文相关: 2023-09-28 mysql-代号m-schema调研-文档记录-CSDN博客 2023-09-28 monetdb-databae的概念和…

前后缀分解

42. 接雨水 前后缀分解 class Solution {public int trap(int[] height) {int n = height.length;int[

湖南软件测评公司简析:软件功能测试和非功能测试的联系和区别

一、软件功能测试   软件功能测试旨在验证软件是否按照需求规格说明书的要求正常工作。具体而言&#xff0c;功能测试会对软件的所有功能进行测试&#xff0c;以确保其满足用户的需求和预期。在进行功能测试时&#xff0c;根据需求规格说明书编写测试用例&#xff0c;并在测试…

时序预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络时间序列预测

时序预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络时间序列预测 目录 时序预测 | MATLAB实现POA-CNN-BiLSTM鹈鹕算法优化卷积双向长短期记忆神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现POA-CNN-BiLSTM鹈鹕算…

【CMake】find_package 命令

【find_package】基本调用形式 find_package(<PackageName> [version] [EXACT] [QUIET] [MODULE][REQUIRED] [[COMPONENTS] [components...]][OPTIONAL_COMPONENTS components...][NO_POLICY_SCOPE])例如 find_package(fastcdr REQUIRED) find_package(fastrtps REQUIR…

ad18学习笔记十一:显示和隐藏网络、铺铜

如何显示和隐藏网络&#xff1f; Altium Designer--如何快速查看PCB网络布线_ad原理图查看某一网络的走线_辉_0527的博客-CSDN博客 AD19(Altium Designer)如何显示和隐藏网络 如何显示和隐藏铺铜&#xff1f; Altium Designer 20在PCB中显示或隐藏每层铺铜-百度经验 AD打开与…

优化Python开发环境的几个神技巧

用Python编代码体验极佳&#xff0c;并且随着新版本的发布越来越好&#xff01; 对于很多人而言&#xff0c;Python提供的大量免费函数库、高可读性的程序和新引入的类型注释让很多爱不释手。 然而&#xff0c;数据科学家特别容易使自己的Jupyter notebook变得庞大而杂乱&…

探索useCallback、useMemo、useContext原理

您好&#xff0c;如果喜欢我的文章&#xff0c;可以关注我的公众号「量子前端」&#xff0c;将不定期关注推送前端好文~ useCallback & useMemo 介绍 useCallback和useMemo原理类似&#xff0c;只是入参有所不同。 useCallback缓存的是回调函数&#xff0c;如果依赖项没…

MinGW、GCC、GNU和MSVC是什么?有什么区别?

在C和C开发中&#xff0c;常常会遇到MinGW、GCC、GNU和MSVC这些术语。本教程将向您解释它们的含义以及它们之间的区别&#xff0c;帮助您更好地理解这些常见的编译工具和开发环境。 MinGW&#xff08;Minimalist GNU for Windows&#xff09;&#xff1a; MinGW是一个开源的软件…

计算机里的神灵(SCIP)

计算机程序的构造和解释 我找到计算机里的神灵了&#xff0c;开心一刻 下面是从MIT官网下载的 SCIP求值器&#xff08;解释器&#xff09;的代码&#xff0c;这个官网是个宝藏库 还有其他视频课程和 SCIP的问题答案和可运行代码 链接&#xff1a;https://ocw.mit.edu/courses/6…

力扣-349.两个数组的交集

Idea 使用两个哈希集合&#xff0c;其中一个用来存储第一个数组&#xff0c;第二个来存储两个数组的交集&#xff0c;因为集合自带去重功能&#xff0c;因此最后用数组来接收就好了 AC Code class Solution { public:vector<int> intersection(vector<int>& n…

axios全局路由拦截的设置方法

一个项目中如果http请求发生了错误/异常&#xff0c;比如返回码4xx&#xff08;表示没有授权&#xff0c;登录过期等&#xff09;&#xff0c;我们希望能够在axios在第一时间就能拦截获取到&#xff0c;然后直接提示报错的错误信息&#xff0c;而不是在发起请求的地方&#xff…

Android gradle dependency tree change(依赖树变化)监控实现

文章目录 前言基本原理执行流程diff 报告不同分支 merge 过来的 diff 报告同个分支产生的 merge 报告同个分支提交的 diff 报告 具体实现原理我们需要监控怎样的 Dendenpency 变化怎样获取 dependency Treeproject.configurations 方式./gradlew dependenciesAsciiDependencyRe…

Git 详细安装教程(详解 Git 安装过程的每一个步骤

Git 详细安装教程&#xff08;详解 Git 安装过程的每一个步骤&#xff09; 该文章详细具体&#xff0c;值得收藏学习

什么是推挽电路?

推挽电路原理&#xff1a; 可以简单理解为推和拉&#xff1b; 此电路总共用到两个元器件&#xff0c;对应图中的Q1----NPN三极管&#xff0c;Q2----PNP三极管&#xff0c;两个电阻R1和R2起到限流的作用&#xff1b;两个三极管的中间对应信号的输出。 下面就举例说明是如何工作的…

uniapp 微信小程序之隐私协议开发

uniapp 微信小程序之隐私协议开发 官网通知&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html 1、配置 __usePrivacyCheck__: true&#xff1b;位置 manifest.json : "mp-weixin":{"__usePrivacyCh…