🚀 欢迎来到我的CSDN博客：Optimistic _ chen
✨ 一名热爱技术与分享的全栈开发者，在这里记录成长，专注分享编程技术与实战经验，助力你的技术成长之路，与你共同进步！
🚀我的专栏推荐：
| 专栏 | 内容特色 | 适合人群 |
|---|---|---|
| 🔥C语言从入门到精通 | 系统讲解基础语法、指针、内存管理、项目实战 | 零基础新手、考研党、复习 |
| 🔥Java基础语法 | 系统解释了基础语法、类与对象、继承 | Java初学者 |
| 🔥Java核心技术 | 面向对象、集合框架、多线程、网络编程、新特性解析 | 有一定语法基础的开发者 |
| 🔥Java EE 进阶实战 | Servlet、JSP、SpringBoot、MyBatis、项目案例拆解 | 想快速入门Java Web开发的同学 |
| 🔥Java数据结构与算法 | 图解数据结构、LeetCode刷题解析、大厂面试算法题 | 面试备战、算法爱好者、计算机专业学生 |
| 🔥Redis系列 | 从数据类型到核心特性解析 | 项目必备 |
🚀我的承诺：
✅ 文章配套代码：每篇技术文章都提供完整的可运行代码示例
✅ 持续更新：专栏内容定期更新，紧跟技术趋势
✅ 答疑交流：欢迎在文章评论区留言讨论，我会及时回复（支持互粉）
🚀 关注我，解锁更多技术干货！
⏳ 每天进步一点点，未来惊艳所有人！✍️ 持续更新中，记得⭐收藏关注⭐不迷路 ✨
📌 标签:#技术博客 #编程学习 #Java #C语言 #算法 #程序员
文章目录
什么是Vue
官方说明：Vue是一套构建用户界面的渐进式JavaScript框架。
Vue是一个框架，其本质是提供一套开发规范。学习Vue的核心在于理解和运用这些既定规则。相比之下，JavaScript是一种解释型的高级编程语言，主要用于实现网页交互功能。渐进式意味着可以逐步掌握其特性。Vue的核心功能是基于数据动态渲染生成用户界面(UI)。
我们需要下载VScode编辑器来准备Vue代码的编写环境，同时为了使我们编写代码时更加舒适和便捷，我们最好给vscode安装几个插件：Vue-Offical(提供vue语法高亮)，Vue 3 Snippets(提供Vue3相关的代码片段)，Path Intellisense(路径自动补全)等等
工程化开发模式
之前传统模式下，基于html文件开发Vue，通过 <script> 标签引入 Vue 的 CDN 链接。 所有的组件件、逻辑都写在一个或几个文件中，通过全局变量来交互。
- 优点：写完直接就能双击打开，代码无需构建
- 缺点：不能使用编译的Vue新特性，加载速度慢且不安全
现在工程化模式开发，使用单文件模块化： 每个组件都是一个独立的 .vue 文件（包含模板、脚本和样式）。项目结构清晰，组件可以复用，也更容易维护
- 优点：全面支持现代 JavaScript/TypeScript 语法；是团队协作的标准，因为有了 ES6 模块化，每人负责自己的组件，互不干扰。
- 缺点：必须依赖 Node.js 和 npm/yarn 等工具;通过 Vite 这样的脚手架来创建和运行项目，开发时需要一个终端来启动开发服务器。
创建Vue环境
首先准备环境：安装Node.js，因为Vue项目依赖其自带的npm包管理器,
打开终端，输入node -v / npm -v查看是否安装成功
创建项目：
- VScode打开终端( Ctrl + `)
- 执行创建命令
npm create vue@latest
- 配置项目功能:
npm i把项目需要的第三方库（如vue本身）下载到node_modules文件夹中
- 启动Vue项目
认识Vue文件和目录
Vue的骨架
在 Vue 3 项目里，main.js、App.vue 和 index.html 这三个文件共同构成了应用的骨架。可以把它们理解为一个容器、内容和挂载点的关系 ，理解源代码是如何通过浏览器展示出来的
- index.html：单页面容器，项目最终的 HTML 页面
javascript
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<!-- 这是一个挂载点，Vue应用会渲染到这里 -->
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<!-- 构建工具会自动引入main.js编译后的代码 -->
</body>
</html>- main.js：应用的入口，这是整个 Vue 应用的启动文件，负责创建 Vue 实例并将其挂载到 index.html 上
javascript
// main.js
import { createApp } from 'vue'
import App from './App.vue' // 引入根组件
import router from './router' // 引入路由
const app = createApp(App) // 创建应用实例，将App作为根组件
app.use(router) // 使用路由插件
app.mount('#app') // 将应用挂载到index.html中的#app元素上- App.vue：根组件是整个 Vue 应用的起点，作为容器，通过路由或组件引入来组装其他子组件。main.js 将它作为第一个组件引入，它渲染出来的内容，最终会被填充到 index.html 的
<div id="app">
javascript
<script setup>
// 这里以后放你的练习代码
</script>
<template>
<div>
<h1>🚀 Vue 学习模板</h1>
<p>欢迎开始新的练习！</p>
<!-- 这里以后放你的组件 -->
<router-view />
</div>
</template>
<style scoped>
/* 留空，以后按需添加 */
</style>总结：
- 用户在浏览器访问项目，index.html 被加载，页面显示了一个空的
<div id="app">容器。 - 浏览器加载 main.js 编译后的代码。
- main.js 启动，创建 Vue 实例，并引入 App.vue。
- Vue 将 App.vue 的模板内容（）解析并编译成最终的 HTML。
- Vue 通过 app.mount('#app') 命令，把编译好的 HTML 内容替换掉 index.html 中的
<div id="app">（或者填充进去）。 - 用户最终看到了由 App.vue 渲染出的完整页面。
- vue=script(JS)+template(HTML)+style(CSS)
Vue的入口 setup函数
setup 函数是在Vue3 特有的选项，是编写代码的起点，是一个组件的选项，也是组合式 API 的入口
javascript
//简写
<script setup>
// 这里以后放你的练习代码
</script>
//原始写法
<script>
export default{
setup(){
//在标签中用到的变量或者函数，需要在setup函数中声明并返回
const msg='hello Vue3'
return {
msg
}
}
}
</script>显而易见，我们倾向于使用简写形式，这实际上是在编译层面对原有 setup 函数进行的封装优化，写起来更加便捷
响应式数据
首先，推荐大家通过插件网站去下载一个开发者工具插件
通过该插件，我们可以通过数据变化直接导致视图一起改变。当然不是所有数据都有响应式特性，只有借助响应式函数的数据才有响应特性：数据变了，视图跟着变
响应式函数reactive
reactive 是 Vue 3 组合式 API 中最重要的函数之一，它只用于创建响应式对象。当这个对象的属性发生变化时，Vue 会自动更新使用这些属性的模板或计算属性。
javascript
import { reactive } from 'vue'
// 普通对象
const user = {
name: '张三',
age: 25
}
// 转换为响应式对象
const state = reactive(user)
// 现在 state 是响应式的了响应式函数ref
ref 是 Vue 3 组合式 API 中一个核心函数，它用于创建响应式的值，特别是处理原始类型（字符串、数字、布尔值）的响应式。
ref 接收一个内部值，返回一个响应式的、可变的 ref 对象。 这个对象只有一个 .value 属性，指向内部值。
javascript
import { ref } from 'vue'
// 创建一个响应式引用
const count = ref(0)
// count 是一个对象：{ value: 0 }
console.log(count.value) // 0
// 修改值
count.value++
console.log(count.value) // 1注意：在 JavaScript 中，原始类型（string、number、boolean）是按值传递的，它们本身没有响应式能力。ref 的作用就是给这些原始值包装一层对象，让它们能被 Vue 的响应式系统追踪，所以，在JS中使用ref，需要count.value
对比ref和reactive
| ref | reactive | |
|---|---|---|
| 适用情况 | 既可以接收基本类型，也可以接收引⽤类型 | 只接收对象作为参数 |
| 访问方式 | JS：count.value template：{{ count }} | JS：state.property template：{{ state.property }} |
| 重新赋值 | 支持直接替换整个值 | 不能直接替换整个对象 |
| 解构 | 解构后仍是响应式 | 解构后失去响应式 |
| 嵌套对象 | 内部值如果是对象，会自动用 reactive 包装 | 深层所有属性都是响应式的 |
插值渲染
插值渲染是 Vue 中最基础、最常用的功能，它让你能够将动态数据渲染到 DOM 树中。简单来说，就是在 HTML 中嵌入 JavaScript 表达式。
插值允许在模板中声明式地绑定数据。当数据变化时，视图会自动更新相当于一个变量，它可以根据数据的不同而改变
javascript
<template>
<div>
<!-- 最基本的文本插值 -->
<p>{{ message }}</p>
<!-- 可以包含表达式 -->
<p>{{ count + 10 }}</p>
<p>{{ isActive ? '激活' : '未激活' }}</p>
<p>{{ message.split('').reverse().join('') }}</p>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const message = ref('Hello Vue')
const count = ref(5)
const isActive = ref(true)
</script>
完结撒花！🎉
如果这篇博客对你有帮助，不妨点个赞支持一下吧！👍
你的鼓励是我创作的最大动力～
✨ 想获取更多干货？ 欢迎关注我的专栏 → optimistic_chen
📌 收藏本文，下次需要时不迷路！
我们下期再见！💫 持续更新中......
悄悄说：点击主页有更多精彩内容哦～ 😊
