蕝戀 - 博客园

2023年8月13日

摘要：用你喜欢的js包管理器安装pinia： ```Bash yarn add pinia # 或者使用 npm npm install pinia ``` 创建一个 pinia 实例 (根 store) 并将其传递给应用：编辑main.js： ```Vue import { createApp } f 阅读全文

posted @ 2023-08-13 14:25 蕝戀阅读(39) 评论(0) 推荐(0) 编辑

pinia状态管理初识

摘要：一款官方推荐的，代替vuex的，新的状态管理工具。官方网： [https://pinia.vuejs.org/zh/introduction.html](https://pinia.vuejs.org/zh/introduction.html) **主要区别：** - 去除了modules的概念，阅读全文

posted @ 2023-08-13 14:24 蕝戀阅读(8) 评论(0) 推荐(0) 编辑

2023年8月12日

vue3.3实验性新特性defineModel

摘要：子父之间使用v-model双向绑定数据，子组件每次都要写emit和props觉得麻烦？ vue3.3新的实验性特性defineModel可以完全不写emit和props。由于是实验性特性，所以需要配置之后才能使用。修改vite.config.js： ```JavaScript export de 阅读全文

posted @ 2023-08-12 15:18 蕝戀阅读(3320) 评论(0) 推荐(0) 编辑

vue3在父子组件使用v-model双向绑定

摘要：父组件： ```Vue 我是父组件, {{ count }} --> --> --> --> ``` 封装一个InputBox子组件，用于数据的加减 ```Vue - + ``` # 思考：觉得每次在子组件中定义emit和props很麻烦？vue3.3添加了一个实验性特新defineModel，详阅读全文

posted @ 2023-08-12 15:18 蕝戀阅读(307) 评论(0) 推荐(0) 编辑

vue3.3新特性defineOptions

摘要：当我们使用选项式api时候，可以轻松创建与setup()选项同级别的选项。但是，用了 {{ data }} ``` 这样就会有两个script标签，感觉怪怪的。在Vue3.3版本中加入了defineOptions宏，就是用来解决这个问题的，现在你可以直接在setup中使用defineOption 阅读全文

posted @ 2023-08-12 15:18 蕝戀阅读(291) 评论(0) 推荐(0) 编辑

组合式api-跨层级组件通信provide和inject

摘要： vue2的provide和inject：[https://v2.cn.vuejs.org/v2/api/#provide-inject](https://v2.cn.vuejs.org/v2/api/#provide-inject) **主要作用：** 跨层级传递数据（响应和非相应数据都可以）、方法阅读全文

posted @ 2023-08-12 15:17 蕝戀阅读(40) 评论(0) 推荐(0) 编辑

组合式api-ref引用子组件、dom元素， defineExpose的使用

摘要：和vue2一样，我们有时候希望父组件能够调用子组件中的方法、属性。那么就要用到ref。 ![](https://secure2.wostatic.cn/static/9EaR4qMsjTzZQ1pUTKfZDH/image.png?auth_key=1691824633-uYpoam2KQH219s 阅读全文

posted @ 2023-08-12 15:17 蕝戀阅读(9) 评论(0) 推荐(0) 编辑

组合式api-子父组件之间通信props和emit

摘要：整体来说和vue2也是比较相似的。 # 使用props传递数据到子组件 - 父组件给定数据。 - 子组件中使用defineProps来接收父组件传递的数据。 ![](https://secure2.wostatic.cn/static/qrARQNrexu57w8Sckba1by/image.png 阅读全文

posted @ 2023-08-12 15:16 蕝戀阅读(89) 评论(0) 推荐(0) 编辑

vue3组合式api生命周期

摘要： # 生命周期钩子函数 Vue3：[https://cn.vuejs.org/api/composition-api-lifecycle.html](https://cn.vuejs.org/api/composition-api-lifecycle.html) Vue2：[https://v2.cn 阅读全文

posted @ 2023-08-12 15:16 蕝戀阅读(62) 评论(0) 推荐(0) 编辑

组合式api-侦听器watch的语法

摘要：和vue2对比，也是语法上稍有不同。监听单个数据对象 ```Vue import {ref, watch} from "vue"; const count = ref(100) // 语法： watch(响应式数据对象, (newVal, oldVal) => { 业务处理... } // 只监听阅读全文

posted @ 2023-08-12 15:15 蕝戀阅读(36) 评论(0) 推荐(0) 编辑

绝恋。。

公告