前端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.自定义指令的钩子函数
