前端Vue3基础教程超全——下载学习2026.2.5-2.9

一、Vue简介(什么是Vue,为什么选择Vue,开发前的准备)

1.Vue是一款优秀的前端渐进式框架，是目前企业主流的框架技术需求，并且学习难度低。

2.它基于标准的HTML、CSS、JS构建，并提供一套声明式、组件化的编程模型。

3.渐进式框架：是一个框架，也是一个生态。可以某个功能单个、模块中使用，甚至在完整的项目中使用。

4.Vue官方文档：

简介 | Vue.jshttps://cn.vuejs.org/guide/introduction5.Vue API风格：选项式API和组合式API（两种风格不一样但是实现的效果是一致的）

选项式API（Vue2）：

<script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, mounted() { console.log(`The initial count is ${this.count}.`) } } </script> <template> <button @click="increment">Count is: {{ count }}</button> </template>

组合式API（Vue3）:

<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>

6开发前的准备工作：

（1）已安装15.0以上版本的Node.js（具体的安装以及配置方法大家可以自行进行搜索，如果不是安装到C盘，就还需要进行系统的配置，不然在你的编程软件中没有办法使用相应的命令，作者配置了半天也没有成功（哭哭/(ㄒoㄒ)/~~），只能安装到C盘了，如果有哪位大佬看见了并且安装和成功了还请教教我）

Node.js — 在任何地方运行 JavaScripthttps://nodejs.org/zh-cn

（2）创建Vue项目：终端中打开存放Vue项目的文件夹,创建项目

npm init vue@latest

输入项目名称：不要存在大写其他的根据需要选择，根据提示运行

cd打开项目所在位置 npm install 下载 npm run dev运行项目

运行后会出现访问地址，直接访问即可，如果你是第一次使用Vue,需要安装插件，直接搜索Vue选择你所需要的即可，现在我们正式进行学习吧！

7.项目目录解读

二、模板语法（响应式API）

大家好，由于在这里面写代码太麻烦了，下面只是博主的一些简单笔记，因此博主将写好的代码上传到gihub大家可以自行下载观看。(●ˇ∀ˇ●)

[email protected]:Ruwen-Hu/Vue-study20260205.git

1.模板语法：不要再其中做任何逻辑操作

<template> <h1>模板语法</h1> <p>{{msg}}</p> <p>{{ok ? 'Yes' : 'No'}}</p> <p>{{message.split("").reverse().join("")}}</p><!-- 反转 --> </template> <script > export default{ data(){ return{ msg:"神奇的模板语法", ok:true, message:'Hello Vue!' } } } </script> <style scoped> </style> 

2.属性绑定：v-bind可以删除

<div v-bind:class="dynamicId">属性绑定</div>

<div v-bind="objectsOfArrys">多个属性绑定</div>

3.条件渲染

这里在组件中新加了一个页面写，如果想要看到显示效果，主意已定要在App.vue中引入文件

v-if：有较高的切换开销，是真实的渲染，条件区块的事件监听和子组件都会销毁与重建

v-show：有较高的初始渲染开销，始终都会初次渲染，只有CSS中display属性会被切换

4.列表渲染

v-for：更多复杂的列表渲染都是来自于网络请求的复杂数据

key:给每一个列表加上key属性，确保在更新数据时vue可以直接调换数据，不会再重新渲染，可以通过v-bind绑定特殊属性。推荐使用唯一的索引。

5.事件处理：内联事件处理器、方法事件处理器:较多使用

6.事件参数：事件传参

7.事件修饰符：可以将更多的关注放在逻辑本身（大家不要担心，可以去上面的Vue官方文档查看）

8.数组变化侦测：变更和替换数组

9.计算属性：将复杂的逻辑放在计算属性中。

10.Class绑定：数组和对象嵌套过程中，只能数组嵌套对象，不能反其道而行之。

11.Style绑定

12.侦听器：监听数据的变化

13.表单输入绑定

14.模板引用

15.组件组成：可复用性，将组建定义在单独的Vue中

<template> <h3>15.组件</h3> <!-- 第三步：显示组件 --> <MyComponent /> </template> <script> //第一步引入组件 import MyComponent from './MyComponent.vue' //第二步注册组件 export default{ components:{ MyComponent } } </script> <style> </style> 

16.组建的嵌套关系：可以将UI划分为独立的、可重复的部分，并且可以对每个部分进行单独的思考

17.组件注册方式：引入方式，一个Vue组件在使用前需要先被注册，这样才能被渲染模板时找到对应的实现，分为全局注册和局部注册（更推荐）

18.组件传递数据：组件之间有交集，Parent和Child之间传递数据

注意事项，props传递数据只能父级传递给子级；组件传递不同事件类型；组件传递props校验

19.组件事件：组件之间传递事件的方法：父传子：props;子传父：自定义事件（this.$emit）

20.组件事件配合v-model使用

21.组件数据传递：

22.插槽：组件接受模板内容

23.（1）组件的生命周期：从创建到销毁，牢记生命周期示意图

生命周期函数：

创建期：beforeCreate        created

挂载期：beforeMount        mounted渲染

更新期：beforeUpdate        updated

销毁期：beforeUnmount        unmounted 渲染完成

（2）生命周期的应用：通过ref获取元素DOM结构；模拟网络请求渲染数据

（3）动态组件：组件切换

（4）组件保持存活：

（5）异步组件：优化组件项目性能，需要时才会出现

24.依赖注入：

provide和inject，可以实现直接从爷爷到孙子，不需要经过父亲，一个父组件相对于其他所有的后代组件，会作为以来提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供整条链路的依赖。只能由上到下的传递

三、Vue的应用（组合式API）

[email protected]:Ruwen-Hu/Vue-study20260209.git

1.Vue的应用：

(1)应用实例：每个Vue应用都是通过createApp函数创建一个新的应用实例。

import { createApp } from 'vue' import App from './App.vue' //app:Vue的实例对象 //在一个Vue的项目中，有且只有一个Vue的实例对象

(2)跟组件：我们传入的createApp对象实际上是一个组件，每个应用都需要一个“跟组件”，其他组件将作为子组件。

const app = createApp(App) //APP跟组件

(3)挂载应用：应用实例必须在调用了.mount()方法后才会渲染出来，该方法接收一个“容器参数”

app.mount('#app')

(4)浏览器可执行文件：HTML、CSS、JS、Image,使用构建工具

(5)公共资源文件夹：src

2.组合式API：之前的几乎都都是选项式API的写法

ref：基本类型的响应式数据：String、Number、Boolean

和reactive：引用类型的响应式数据：Array、Object

3.组合式API的计算属性：注意：message在逻辑里面读取时script,必须通过.value读取到值

4.组合式API的事件处理

5.组合式API的监听器

6.生命周期：每个生命周期函数方法，都可以独立处理一个业务

7.模板引用：

8.自定义指令：全局注册和局部注册

9.自定义指令的钩子函数