黑马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的概念和…

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

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

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

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

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变得庞大而杂乱&…

计算机里的神灵(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…

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

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

什么是推挽电路?

推挽电路原理&#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…

急救车工业路由器应用提升急救效率:车联网、数据采集与远程诊疗

急救车作为医院里医疗急救过程中的重要组成部分&#xff0c;在智慧医疗物联网领域中急救车应用4G工业路由器实现网络部署与数据采集&#xff0c;通过工业4G路由器能够实时采集到病患的生理数据、救护现场音频与视频、GPS定位以及车辆运行状态等重要信息。这些数据将被传输到医疗…

计算机毕业设计 基于HTML语言的环保网站的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

SVN状态图标不显示

问题可能点1&#xff1a;图标覆盖 1、右键找到设置 2、找到图标覆盖 3、重启TortoiseSVN 问题可能点2&#xff1a;注册表图标顺序太靠下&#xff0c;被占用 1、windowsr, 输入regedit进入注册表 2、找到一下目录 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Cu…

基于微信小程序的奶茶点餐小程序设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

flink集群与资源@k8s源码分析-总述

1 简介 集群和资源模块提供动态资源能力,是分布式系统关键基础设施,分布式datax,分布式索引,事件引擎都需要集群和资源的弹性资源能力,提高伸缩性和作业处理能力。本文分析flink的集群和资源的k8s模块,深入了解其设计原理,为开发自有的集群和资源组件做技术准备, 同时涉…

云计算与大数据——部署Hadoop集群并运行MapReduce集群(超级详细!)

云计算与大数据——部署Hadoop集群并运行MapReduce集群(超级详细&#xff01;) Linux搭建Hadoop集群(CentOS7hadoop3.2.0JDK1.8Mapreduce完全分布式集群) 本文章所用到的版本号&#xff1a; CentOS7 Hadoop3.2.0 JDK1.8 基本概念及重要性 很多小伙伴部署集群用hadoop用mapr…