一碗周

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面本篇文章将从0开始搭建一个企业可用的项目骨架，这里我使用的包管理工具时Yarn，别问为什么，问就是喜欢用这个；如果你是npm的话，直接将yarn add全部替换为npm i即可（废话文学）。通过Vite安装Vue3项目安装比较简单，首先输入命令npm create vite然后会让你输入项目名称第三步让你选择一个框架，这里选择Vue最后一步我们选择vue-ts，也就是Vue+Type.

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面在实际开发中，为了增加用户体验，经常会使用到过渡动画，而过渡动画在CSS中是通过transition和animation实现的。而在Vue中，Vue本身中内置了一些组件和API可以帮助我们方便的实现过渡动画效果；接下来我们就学习一下。Vue的transition组件Vue中中提供了transition组件，该组件可以在下列情况之一的情况下，为元素自动添加进入/离开的过渡效果：使用v-if条件渲.

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面我们在写Vue2的时候，编写组件的方式是使用Options API，这种方式的特点就是在对应的属性编写对应的功能模块，例如在data中定义数据、methods定义方法等；这种方法的弊端就是同一功能的代码逻辑被拆分到各个属性中，影响代码的阅读。Vue3中提供的Composition API可以帮助我们优雅的组织我们的代码，让相关功能的代码更加有序的组织在一起，可以参考『做了一夜动画，就为让大家更好的理.

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面本篇文章是全部采用的<script setup>这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档对两种方式的描述。本篇文章将介绍如下七种组件通信方式：propsemitv-modelrefsprovide/injecteventBusvuex/pinia(状态管理工具)开始搞事情~举一个栗子俗话说的好，学习不写demo，.

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~写在前面Vue中实现双向数据绑定的v-model，如果你还停留在用的层面，那你就真的out了，现在通过这篇文章来看一下v-model的实现原理是什么，以及在实际开发中如何使用这个语法糖。v-model的使用原理在Vue中，我们可以使用v-bind实现单项的数据绑定，也就是通过父组件向子组件传入数据 ，但是反过来，子组件不可以修改父组件传递过来的数据 ，这也就是所谓的单向数据绑定。而v-model就实现了.

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志——苏轼Vuex 概述Vuex 是什么Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。上图可以明显看出使用与不使用Vuex的区别使用 Vuex 统一管理状态的好处能够在 vuex 中集中管理共享的数据，易于开发和后期维护能够高效地实现组件之间的数据共享，提高开发效率存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步什么样的数据适合存储到 Vuex 中一般情况下，只有组件之间共.