Vue开始
1

简介

什么是 Vue？

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，用于高效地开发用户界面。

Vue 的两个核心功能：

  • 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

  • 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

声明式渲染（Declarative Rendering）

  • 原话理解：Vue 让你用模板语法“声明”你希望看到的 HTML，而不是手动操作 DOM。

  • 通俗理解：你只需要告诉 Vue “我希望页面显示什么”，而不用自己写代码去找元素、改元素内容。

例子对比：

  • 普通 JS（命令式操作 DOM）：

const message = "Hello Vue";
document.getElementById("app").innerText = message;

你在告诉浏览器 一步步怎么做。

  • Vue（声明式渲染）：

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

const app = Vue.createApp({
  data() {
    return { message: "Hello Vue" }
  }
}).mount("#app");

你只告诉 Vue “这里显示 message 的内容”，不管 message 怎么变化，Vue 会帮你更新 DOM。

总结：声明式渲染就是“你告诉 Vue 你想要什么样的页面，它帮你去实现更新”。

响应性（Reactivity）

  • 原话理解：Vue 会跟踪状态（变量）变化，然后自动更新页面。

  • 通俗理解：你修改变量，页面自动跟着变，不用手动去刷新 DOM。

例子：

const app = Vue.createApp({
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}).mount("#app");

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment">加1</button>
</div>

总结：响应性就是“数据变化，页面自动变化”，让开发更省心。

单文件组件

  • Vue 提供了一种特殊的文件类型，以 .vue 结尾，叫做 单文件组件（Single-File Component，SFC）。

  • 它把一个组件的三部分内容全部放在一个文件里：

    1. 模板 (HTML)：组件的结构和显示内容

    2. 逻辑 (JavaScript)：组件的数据、方法、事件处理

    3. 样式 (CSS)：组件的样式

  • 优点是：组件更独立、更模块化，所有东西都在一个地方，看起来清晰。

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

API 风格

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

选项式 API（Options API）

核心概念：把组件逻辑按照“选项”分类放在一个对象里。

  • Vue 2 的经典写法就是选项式 API。

  • 常见的选项有：

    • data：存放状态（变量）

    • methods：存放方法（函数）

    • mounted：组件挂载后执行的代码

特点：

  • 所有选项里的内容，都可以通过 this 访问组件实例。

  • this 就代表当前组件实例。

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

组合式 API（Composition API） 

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

核心概念：不按选项分类，而是通过函数“组合”逻辑，更灵活、更适合大型项目。

  • Vue 3 引入的写法。

  • 通常配合 <script setup> 使用，可以让代码更简洁。

  • <script setup> 的特点：

    • 直接导入函数和变量就能在模板里用

    • 顶层的变量/函数会自动暴露给模板

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

对比总结

特点

选项式 API

组合式 API

写法

按选项组织：data、methods、mounted

按逻辑组织，函数组合

使用 this

需要通过 this 访问状态和方法

不用 this，直接用变量和函数

模板访问

自动通过 this 暴露

<script setup> 顶层变量自动可用

适合

小中型项目、简单逻辑

大型项目、逻辑复杂或可复用性高

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。

选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。

组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

快速上手

创建一个 Vue 应用

前提条件

  • 已安装 ^20.19.0 || >=22.12.0 版本的 Node.js

在本节中，我们将介绍如何在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。

确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令 ：

npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name>
npm install
npm run dev

当你准备将应用发布到生产环境时，请运行：

npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。关于将应用上线生产环境的更多内容

npm run build 是将 Vue 项目，打包成“真正可以上线给别人用”的版本。

在平时开发时：

  • 用的是 npm run dev

  • 浏览器看到的是：

    • .vue 文件

    • ES 模块

    • 开发用的调试代码

  • 这些东西浏览器其实并不直接认识

当运npm run build Vue 的构建工具（通常是 Vite）会做这些事：

  1. 把 .vue 文件编译成普通的 HTML / JS / CSS(浏览器真正能看懂的那种)

  2. 压缩代码

    • 去掉空格

    • 变量名变短

    • 文件体积变小

  3. 合并、拆分资源

  4. 生成最终成品

    • 全部放到一个文件夹里：./dist

dist/
├── index.html
├── assets/
│   ├── xxx.js
│   ├── xxx.css
│   └── 图片等
可以直接部署到服务器上的最终版本

Vue开始
http://localhost:8090/archives/vue
作者
Zxy
发布于
更新于
许可