Vue基础、API风格、项目初始化、DOM、工作目录解析、基本语法等，附详细图文

---

1 关于

本文主要记录Vue入门学习的基础知识，包括Vue基础、API风格、项目初始化、DOM、工作目录解析、基本语法等，附详细图文。参考教程为B站视频

---

2 关于Vue

2.1 一些特点

• 基于HTML、CSS、JavaScript
  • HTML：负责定义网页的结构和内容。它使用一系列的标签来创建文本、链接、图片、列表、表格等元素。
  • CSS：负责设置网页的视觉和版式。它控制元素的颜色、字体、间距、布局等样式属性。
  • JavaScript：负责网页的交互性。它允许用户与网页进行交互，如点击按钮、填写表单等。实现在客户端进行数据验证和处理。实现与服务器进行交互，发送请求和接收响应。
• 渐进式的JavaScript框架：意味着你可以在现有的项目中逐步引入Vue.js，而不需要一开始就完全重构整个项目。
• 声明式、组件化的编程模型
  • 声明式：这意味着开发者只需描述UI应该呈现的样子，而不是编写命令式的代码来操作DOM。Vue.js会自动将声明的模板映射到真实的DOM操作。
  • 组件化：允许开发者将界面拆分成独立、可复用的组件。每个组件负责应用程序的一部分功能，并且可以包含自己的标记、样式和逻辑，使得代码更加模块化和易于维护。

2.2 API风格

• 选项式API：选项式 API 是 Vue 2 中的传统方式，它以组件实例为中心，将组件的逻辑分散在 data、methods、computed、watch 等选项中。这种方式结构清晰，易于理解和上手，适合小型到中型应用。

<template><div><p>{{ count }}</p><button @click="increment">增加</button></div>
</template><script>
export default {data() {return {count: 0};},methods: {increment() {this.count++;}}
};
</script>

• 组合式API：组合式 API 是 Vue 3 引入的新特性，它基于函数的 API，允许开发者将组件逻辑拆分成多个独立的函数，每个函数负责处理特定的功能或逻辑。组合式 API 的核心思想是“组合”，即将复杂的组件逻辑拆分成小的、可复用的函数单元。这种方式提高了代码的可读性和可维护性，适合大型或复杂的应用。

<template><div><p>{{ count }}</p><button @click="increment">增加</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}return {count,increment};}
};
</script>

2.3 创建一个Vue项目

执行下列命令：

随后执行npm run dev可启动项目并通过本机的5173端口访问项目网页：

2.4 什么是DOM

• 在Vue.js中，DOM（Document Object Model）指的是文档对象模型，它是HTML和XML文档的编程接口。在Web开发中，DOM是JavaScript与页面上HTML元素交互的基础，允许开发者访问和修改页面的内容、结构和样式。
• Vue.js是一个基于JavaScript的前端框架，它提供了一套声明式的模板语法来高效地将数据绑定到DOM。Vue.js的核心功能之一是响应式和组件化的用户界面构建。在Vue中，DOM操作通常由框架自动处理，开发者不需要直接操作DOM元素，而是通过声明式的模板和Vue的数据绑定特性来实现界面的更新。

3 Vue项目工作目录解析

.vscode：			VSCode工具的配置文件夹
node_modules：		Vue项目运行所需要的依赖的文件夹
public：			资源文件夹（浏览器图标）
src：				源码文件夹
.gitignore：		git忽略文件，指定了哪些文件不进行git管理
index.html：		HTML入口文件
jsconfig.json：
package-lock.json：
package.json：		信息描述文件
README.md：			项目介绍文件
vite.config.js：	Vue配置文件

4 基础语法

4.1 文本插值：

语法：{{}}

4.2 使用JavaScript表达式

4.3 原始HTML

语法：v-html
双大括号会将数据插值为纯文本不进行HTML解析，若想插入HTML，则需要使用v-html指令

4.4 属性绑定

语法：v-bind
简写：直接使用一个冒号:
双大括号不能在HTML attributes中使用。想要响应式地绑定一个attribute应该使用v-bind指令

绑定多个值：

4.5 条件渲染

v-if：

v-else：

v-else-if：

v-show：
类似于v-if，但是在第一次就渲染，后续只是基于CSS的display进行展示与否，对于频繁切换渲染状态的组件建议使用v-show

4.6 列表渲染

• 普通列表
  
• 结构体列表
  
• 对象
  

4.7 事件处理

包括内联事件处理和方法事件处理

4.8 事件传参