《Vue.js前端开发实战》学习笔记 第1章 初识Vue.js

滕青山
10 阅读1分钟

Vue3 核心知识点读书笔记

一、Vue 核心原理与架构

1. MVVM 核心模式（核心架构）

Vue 基于 MVVM 模式设计，核心是实现视图与数据的解耦，三者关系如下：

模块核心职责
Model数据层，负责业务数据处理（纯数据，无视图交互逻辑）
View视图层，即用户界面（仅展示内容，不处理数据逻辑）
ViewModel桥梁层，连接 View 和 Model，包含两个核心能力： ✅ DOM Listeners：监听 View 中 DOM 变化，同步到 Model ✅ Data Bindings：监听 Model 中数据变化，同步到 View

关键：View 和 Model 不能直接通信，必须通过 ViewModel 中转，实现解耦。

2. Vue 核心特性（四大核心）

特性具体说明示例/应用场景
数据驱动视图数据变化自动触发视图重新渲染，无需手动操作 DOM修改变量值 → 页面自动更新
双向数据绑定视图变化 ↔ 数据变化双向同步表单输入框内容自动同步到数据变量
指令分内置指令（Vue 自带）和自定义指令，以v-开头绑定到 DOM 元素v-bind（单向绑定）、v-if（条件渲染）、v-for（列表渲染）
插件支持扩展功能，配置简单VueRouter（路由）、Pinia（状态管理）

二、Vue 版本与开发环境

1. Vue2 vs Vue3 核心差异

维度Vue3 变化
新增功能组合式（Composition）API、多根节点组件、底层渲染/响应式逻辑重构（性能提升）
废弃功能过滤器（Filter）、$on()/$off()/$once() 实例方法
兼容性兼容 Vue2 绝大多数 API，新项目推荐直接使用 Vue3

2. 开发环境准备（必装）

  1. 编辑器：VSCode → 安装「Vue (Official)」扩展（提供代码高亮、语法提示）
  2. 运行环境：Node.js（官网下载安装，为包管理工具提供基础）
  3. 包管理工具：npm/yarn（管理第三方依赖，支持一键安装/升级/卸载，避免手动下载解压）

三、Vite 创建 Vue3 项目（核心操作）

1. 项目创建命令（适配 npm10 版本）

# Yarn 方式（推荐）
yarn create vite hello-vite --template vue

# 交互提示处理（关键步骤，不要遗漏）：
# 1. 提示 "Use rolldown-vite (Experimental)?" → 回车选 No（优先使用稳定版）
# 2. 提示 "Install with yarn and start now?" → 回车选 Yes（自动安装依赖并启动项目）

2. 手动创建命令（补充）

# npm 方式
npm create vite@latest
# yarn 方式
yarn create vite
# 后续需手动填写项目名称、选择框架（Vue）、选择变体（JavaScript）

四、Vue3 项目核心文件与目录

1. 项目目录结构（重点关注）

hello-vite/          # 项目根目录
├── node_modules/    # 第三方依赖包（自动生成）
├── dist/            # 构建产物（执行 yarn build 后生成，用于部署）
├── src/             # 源代码目录（开发核心）
│   ├── assets/      # 静态资源（图片、样式等）
│   ├── components/  # 自定义组件
│   ├── App.vue      # 根组件
│   ├── main.js      # 项目入口文件
│   └── style.css    # 全局样式
├── index.html       # 页面入口文件
└── package.json     # 项目配置（依赖、脚本命令）

2. 核心文件代码解析（带完整注释）

（1）index.html（页面入口）
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hello-vite</title>
  </head>
  <body>
    <!-- Vue 实例挂载容器：被 main.js 中的 Vue 实例控制 -->
    <div id="app"></div>
    <!-- type="module"：启用 ES6 模块化语法，引入项目入口文件 -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
（2）src/main.js（项目入口，创建 Vue 实例）
// 从 Vue 中导入创建应用实例的核心函数
import { createApp } from 'vue'
// 导入全局样式文件
import './style.css'
// 导入根组件（App.vue）
import App from './App.vue'

// 方式1：简洁写法（创建实例 + 挂载到 #app 容器）
createApp(App).mount('#app')

// 方式2：分步写法（更易理解，效果一致）
// const app = createApp(App) // 创建 Vue 应用实例
// app.mount('#app') // 挂载实例（仅可调用一次）
（3）src/App.vue（根组件，单文件组件核心）
<!-- script setup：Vue3 组合式 API 语法糖，简化组件编写 -->
<script setup>
// 导入子组件（HelloWorld.vue）
import HelloWorld from './components/HelloWorld.vue'
</script>

<!-- template：组件模板结构（视图部分） -->
<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <!-- 使用子组件，传递 msg 属性 -->
  <HelloWorld msg="Vite + Vue" />
</template>

<!-- style scoped：样式仅作用于当前组件（通过 Hash 隔离，不影响子组件） -->
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

五、核心知识点总结

1. 核心原理

  • Vue 基于 MVVM 模式，通过 ViewModel 实现视图与数据的双向驱动，核心是「数据驱动视图」，无需手动操作 DOM；
  • 双向数据绑定是 Vue 核心特性，表单场景下可自动同步视图与数据。

2. 项目开发

  • Vue3 推荐使用 Vite 创建项目（比 VueCLI 更快），npm10 版本下优先用 yarn create vite 项目名 --template vue 命令；
  • 项目核心文件：index.html（页面入口）→ main.js（创建 Vue 实例）→ App.vue（根组件），三者构成项目基础骨架。

3. 关键注意点

  • mount() 方法仅可调用一次，挂载目标可以是 DOM 元素或 CSS 选择器（#app/.app）；
  • <style scoped> 样式仅作用于当前组件，避免样式污染；
  • Vue3 废弃了过滤器、$on/$off/$once 等功能，开发时需避开。
avatar
文章
阅读
粉丝