黑马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博客