🚀 欢迎来到我的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查看是否安装成功
在这里插入图片描述
创建项目：

  1. VScode打开终端( Ctrl + `)
  2. 执行创建命令npm create vue@latest
    在这里插入图片描述
  3. 配置项目功能: npm i把项目需要的第三方库（如vue本身）下载到node_modules文件夹中
    在这里插入图片描述
    在这里插入图片描述
  4. 启动Vue项目
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

认识Vue文件和目录

在这里插入图片描述

Vue的骨架

在 Vue 3 项目里，main.js、App.vue 和 index.html 这三个文件共同构成了应用的骨架。可以把它们理解为一个容器、内容和挂载点的关系，理解源代码是如何通过浏览器展示出来的
在这里插入图片描述

  • index.html：单页面容器，项目最终的 HTML 页面
<!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 上
// 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">
<script setup>
// 这里以后放你的练习代码
</script>

<template>
  <div>
    <h1>🚀 Vue 学习模板</h1>
    <p>欢迎开始新的练习！</p>
    <!-- 这里以后放你的组件 -->
    <router-view />
  </div>
</template>

<style scoped>
/* 留空，以后按需添加 */
</style>

总结：

  1. 用户在浏览器访问项目，index.html 被加载，页面显示了一个空的<div id="app">容器。
  2. 浏览器加载 main.js 编译后的代码。
  3. main.js 启动，创建 Vue 实例，并引入 App.vue。
  4. Vue 将 App.vue 的模板内容（）解析并编译成最终的 HTML。
  5. Vue 通过 app.mount(‘#app’) 命令，把编译好的 HTML 内容替换掉 index.html 中的 <div id="app">（或者填充进去）。
  6. 用户最终看到了由 App.vue 渲染出的完整页面。
  7. vue=script(JS)+template(HTML)+style(CSS)

Vue的入口 setup函数

setup 函数是在Vue3 特有的选项，是编写代码的起点，是一个组件的选项，也是组合式 API 的入口

//简写
<script setup>
 // 这里以后放你的练习代码
</script>

//原始写法
<script>
   export default{
     setup(){
        //在标签中用到的变量或者函数，需要在setup函数中声明并返回
        const msg='hello Vue3'
        return {
           msg
        }
     }
   }
</script>

显而易见，我们倾向于使用简写形式，这实际上是在编译层面对原有 setup 函数进行的封装优化，写起来更加便捷

响应式数据

首先，推荐大家通过插件网站去下载一个开发者工具插件
在这里插入图片描述
通过该插件，我们可以通过数据变化直接导致视图一起改变。当然不是所有数据都有响应式特性，只有借助响应式函数的数据才有响应特性：数据变了，视图跟着变

响应式函数reactive

reactive 是 Vue 3 组合式 API 中最重要的函数之一，它只用于创建响应式对象。当这个对象的属性发生变化时，Vue 会自动更新使用这些属性的模板或计算属性。

import { reactive } from 'vue'

// 普通对象
const user = {
  name: '张三',
  age: 25
}

// 转换为响应式对象
const state = reactive(user)
// 现在 state 是响应式的了

响应式函数ref

ref 是 Vue 3 组合式 API 中一个核心函数，它用于创建响应式的值，特别是处理原始类型（字符串、数字、布尔值）的响应式。

ref 接收一个内部值，返回一个响应式的、可变的 ref 对象。 这个对象只有一个 .value 属性，指向内部值。

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 表达式。
插值允许在模板中声明式地绑定数据。当数据变化时，视图会自动更新相当于一个变量，它可以根据数据的不同而改变

<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
📌 收藏本文，下次需要时不迷路！

我们下期再见！💫 持续更新中……

悄悄说：点击主页有更多精彩内容哦～ 😊

在这里插入图片描述

# vue.js # 前端 # javascript # 前端框架 # html
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

爬虫对抗：ZLibrary反爬机制实战分析

随着IPv6的普及，IP封禁效果减弱，服务商可能会转向更难伪造的硬件指纹，如通过WebRTC获取的内网IP、AudioContext的音频指纹，甚至显卡渲染能力的细微差别。维护互联网的公平性和稳定性，是技术人员应坚守的底线。ZLibrary（以下简称ZLib）作为全球知名的数字图书馆，拥有海量的元数据和资源文件，是爬虫工程师和技术爱好者研究对抗技术的绝佳“靶场”。未来的反爬系统将大量引入深度学习模

avatar AtomGit开源社区
cover

嘎嘎降AI使用教程：3步搞定论文降AI（附操作图）

avatar AtomGit开源社区
cover

降AI率工具技术原理对比：双引擎vs Pallas引擎vs DeepHelix

avatar AtomGit开源社区