目录
一、使用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