01.基础入门

12a2024/10/7大约 6 分钟

01.基础入门

vue官方文档，官方文档很详细，同步更新，建议阅读
尚硅谷vue3视频和vue2为主的早期视频
vue是一个渐进式框架，即允许开发者根据需求选择不同的功能和特性。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面，并支持多种方式使用
- 通过vite开发spa单页面应用
- 通过引入js文件在一般html中使用相关功能
- 通过服务器渲染ssr(Nuxt)优化单页面性能表现
- 其他...
特点：
- 上手容易：Vue的语法非常友好，文档清晰，适合初学者。它提供了模板、指令(如v-if,v-for)等非常直观的功能，开发者可以用传统的HTML风格来描述UI。Vue采用了类似于MVVM(Model-View-ViewModel)模式，使得开发者的关注点更倾向于视图与数据之间的双向绑定，不需要手动管理数据状态变化。
- 框架化：Vue是一个比较完整的框架，默认内置了很多功能，比如Vue Router、Vuex(状态管理)、指令等，你几乎可以用它做出一个完整的应用而无需依赖第三方库。这使得Vue更像一个全栈框架。
- 灵活性和约定：Vue的设计哲学比较灵活，但也提供了一些约定，让开发者可以在不需要做过多配置的情况下轻松启动项目。例如，Vue的单文件组件(.vue)结构非常清晰，HTML、CSS和JavaScript被放在同一个文件中，容易管理

1.1 创建项目

创建vue应用命令及其他相关命令

# 使用npm或其他包管理工具创建项目
npm init vue@latest
cd <your-project-name>
npm install
# 生产
npm run dev
# 发布
npm run build

项目结构

最终通过createApp创建应用，并挂载到dom中指定元素上

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// <div id="app"></div>
app.mount('#app')

可以不使用npm，通过<script src="https://unpkg.com/vue@2"></script>引入vue2，并创建对象

<script src="https://unpkg.com/vue@2"></script>

<div id="app">{{ message }}</div>

<!-- 在script块中创建vue对象，并挂载到id为app的dom上 -->
<!-- ES模块语法写法见vue官方文档快速开始部分 -->
<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

通过全局构建版本引入vue3，并创建对象
还可以使用petite-vue构建，一个更好适配这种独立引入需求的版本，仓库在这里

<!-- 生产时应该使用 vue.global.prod.js，移除开发调试的功能代码 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

1.2 vue 文件构成

一个基本的vue文件中包含三个部分，template、script、style块，块标签上还有各种属性
- template：模板，用于定义用户界面的结构
  - 在vue2中，template标签内只能包含一个根元素，在vue3中支持有多个
  - template标签对应原生的template标签，在这里是vue的虚拟容器，不会渲染在页面上。在模板中使用template标签用于完成内容控制v-show、插槽定义v-slot和条件渲染v-if/v-for的功能，其他的属性都会被舍弃
  - 顶层的template标签不支持任何指令和属性
  - template标签的内容可以作为script中的一个属性template传递给vue
- script：脚本，用于定义逻辑
  - setup：vue3增加，表明使用的是组合式API风格。选项式API是vue2使用的面向对象的模式，所有的功能都通过对象的属性实现；组合式API是vue3新增的风格，直接在函数作用域定义变量和声明引用，方便组织和重用逻辑。风格将影响在script内的声明方式，但功能是一致的
  - lang：指定使用的语言，默认是js
- style：样式，用于定义样式
  - scoped：作用域样式，只对当前组件有效
  - lang：指定使用的语言，默认是css
在vue3版本，script和style块可以有多个，但要求块的lang相同，之前对多个块的支持不完善
组合式
```
<script setup lang="ts">
import { ref } from 'vue'
const message = ref('Hello vue!')
</script>


<script lang="ts">
import { ref } from 'vue'
export default {
  setup() {
    const message2 = ref('Hello vue!')
    function change() {
      message2.value = 'Hello world!'
    }
    return {
      message2,
      change
    }
  }
}
</script>

<template>
<h1>{{ message }}</h1>
<template>

<style scoped>
h1 {
  color: green;
}
</style>
```
选项式
```
<script lang="ts">
export default {
  // data被设计为函数，方便多个组件之间数据隔离
  data() {
    const message2 = 'Hello vue!'
    return {
      message2
    }
  }
}
</script>

<template>
<h1>{{ message }}</h1>
<template>

<style scoped>
h1 {
  color: red;
}
</style>
```

写法选择

vue包含两种不同的写法，可以考虑使用任意一种，目前vue3中选项式是在组合式的基础上实现的
选项式option：是vue2就开始支持的写法，虽然对比vue2有以下改进，但大体上是相同的，主要的理念是将所有的属性和函数放入一个对象中，然后针对对象的属性进行操作
- 允许使用时少思考，逻辑需要写在哪里已经被预先确定了，对初学者友好
- 所有逻辑都依赖this完成，this指向了当前组件实例，可以方便地使用面向对象思想编写代码
- 如果选择选项式，那么一切功能都对应被导出对象的特定属性，写在特定属性中的函数和值会被vue识别到，自动处理
组合式composition：是从vue3开始提供的写法，目的是引入更灵活的代码组织、类型推导和体积优化
- 组合式可以方便地决定将代码放在哪里，能够像写普通的js代码一样地运用代码组织能力，意味着只要普通代码能编写好，最终组合式的代码也能编写合理
- 组合式因为是像普通的代码而不是对象，可以利用TreeShaking，也可以修改函数名进行压缩(对象属性不会被压缩)
- 组合式带来了更好的类型推导，本身是类型友好的
- 如果选择组合式，那么一切功能都通过特定的函数包装，vue通过包装实现了数据和视图的处理，写法偏向原始的script块

组合式setup