安装环境与依赖

.vue需要被编译成js文件，才能被浏览器识别的。所以在构建项目之前得安装好以下软件工具哦👨‍🔧

node 8+

npm

npm是node的内置管理器。

  • 查看npm版本：npm -V
  • 设置镜像源：npm config set registry
  • 查看镜像源：npm config get registry

请修改npm镜像：

  1. 淘宝npm镜像
    registry地址：http://registry.npm.taobao.org
  2. cnpmis镜像
    registry地址：http://r.cnpmjs.org

Vue-cli（手脚架）

Vue-cli是Vue.js开发的标准工具。

  • 安装Vue-cli：npm install -g @vue/cli
  • 查看Vue-cli版本号：vue -v

创建Vue3项目

了解Vue3生命周期以及setup()函数

ref,reactive 响应式数据生命

  1. 被响应式api标记过的数据才可以成为响应式数据
  2. ref-用来标记简单类型数据
  3. reactive-一标记复杂类型数据（深度响应式）
  4. 如果用ref对象/数组，会自动将对象/数组转换为reactive的代理对象
  5. ref的数据操作：在js中要.value，在模板中不需要（内部解析会自动添加.value）

Vue3语法

Vue3 中的组件通信方式

  1. 父传子：props。但子组件也能通过传递函数的形式回传参数给父组件。
  2. 子传父：emit自定义事件进行传递
  3. v-model：可配合组件事件一起使用，达到数据同步
  4. refs：使用API选项时，我们可以通过this.$refs.name获取指定的元素或组件，但在组合API中不行。如果我们想通过ref获取，需要定义一个同名的Ref对象，在组件挂载后可以访问。
  5. provide/inject：provide/inject是 Vue 中提供的一对 API。无论层级多深，API 都可以实现父组件到子组件的数据传递。
  6. 透传Attributes：当一个组件以单个元素为根元素作渲染时，透传attributes会自动将class或style、id添加到根元素上。

插槽Slots