• Vue3系列文章 —（2）开始

    ✅作者简介：大三学生，专注分享所学知识
    ✨个人主页：个人主页
    🔥系列专栏：Vue3

    内容概览

    0. 开发工具准备

    0.1 IDE还是编辑器？

    • webstorm ： 专为前端服务的IDE（学生可凭教育邮箱免费使用）

    • vscode ： 一款好用的免费轻量编辑器（需要自己做一些配置）

      • Vue2 ： vscode + vetur
      • Vue3 ： vscode + volar

    • volar优于vetur，且两者不能同时使用

    • 总结 ： 追求轻量或者免费用vscode，否则用webstorm

    0.2 在浏然器上安装开发者工具

    1. 相关知识补充

    单文件组件
    • 是*.vue 文件 ，简称为SFC或者组件
    • 是将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件
    





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    API风格

    Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API

    选项式 API (Options API)

    当使用选项式API时，我们只需要将在创建组件时传入一个配置对象，Vue使用这个配置对象来描述组件的逻辑。

    这个配置对象包含许多配置项，例如 data、methods 和 mounted，这些配置项所定义的属性都会暴露在函数内部的 this 上，它会指向当前创建的组件实例。

    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    组合式 API (Composition API)

    当使用组合式 API，我们使用导入的 API 函数来描述组件逻辑

    在使用组合式API编写组件时，通常会与

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21