当前位置： 首页 > news >正文

快速入门Vue

news 2025/11/7 16:23:37

Vue是什么

Vue.js（通常简称为Vue）是一个开源的JavaScript框架，用于构建用户界面和单页应用程序（SPA）。它由尤雨溪（Evan You）在2014年开发并发布。Vue的核心库只关注视图层，易于上手且便于与第三方库或既有项目整合。Vue的设计初衷是使开发者能够更容易地构建界面丰富的Web应用，同时保持应用的性能和可维护性。

Vue的主要特点：

  1. 响应式数据绑定：Vue通过“数据绑定”和“组件系统”两个核心特性简化了前端开发的复杂性。开发者只需在JavaScript中修改数据，视图就会自动更新。

  2. 组件化开发：Vue鼓励开发者将界面分割成可复用的组件，每个组件都包含了自己的模板、逻辑和样式，这样做不仅提高了开发效率，也使得代码更加模块化和易于维护。

  3. 易于学习：Vue的API设计得简洁明了，学习曲线相对较低，即使是前端新手也能较快地掌握并用于项目开发。

  4. 灵活的生态系统：Vue拥有庞大的社区和丰富的生态系统，包括Vue CLI（官方脚手架工具）、Vue Router（官方路由管理器）、Vuex（状态管理模式库）、Vue Test Utils（测试工具）等，为开发者提供了全方位的解决方案。

  5. 高效性能：Vue通过虚拟DOM技术优化了DOM操作，实现了高效的页面渲染和更新。

Vue的应用场景：

Vue.js可以应用于各种规模的项目中，从简单的个人博客到复杂的企业级应用。由于它的轻量级和灵活性，Vue特别适合于构建单页应用程序（SPA），如Web应用、管理界面、原型开发等。同时，Vue也可以与其他库或框架（如React、Angular）配合使用，以实现更丰富的功能。

结论：

Vue.js是一个功能强大且易于上手的JavaScript框架，它通过响应式数据绑定和组件化开发等特性，简化了前端开发的复杂性，提高了开发效率和应用的性能。随着Vue生态系统的不断完善和社区的日益壮大，Vue已成为前端开发者们不可或缺的工具之一。

为什么要学Vue

学习Vue（Vue.js）有许多原因，这些原因涵盖了前端开发的需求、Vue自身的优势以及行业趋势等多个方面。以下是一些主要的原因：

  1. 现代前端开发的需求：随着Web应用的日益复杂，传统的页面刷新方式已经无法满足用户对流畅性和即时性的需求。Vue等现代前端框架通过组件化、数据绑定和虚拟DOM等技术，使得构建快速响应、动态交互的Web应用变得更加容易和高效。

  2. 提高开发效率：Vue的组件化开发模式鼓励开发者将UI拆分成独立的、可复用的组件。这种方式不仅降低了代码的冗余度，还提高了代码的可维护性和复用性。同时，Vue提供了丰富的API和生态系统，如Vue CLI、Vue Router、Vuex等，这些工具可以进一步加速开发流程，提高开发效率。

  3. 易于学习和使用：Vue的API设计简洁明了，学习曲线相对较低。即使是前端新手，也能在较短时间内掌握Vue的基本用法，并将其应用于实际项目中。此外，Vue的文档也非常完善，提供了丰富的示例和教程，有助于开发者快速上手。

  4. 适应多种项目规模：Vue不仅适用于小型项目，也完全能够胜任大型企业级应用的开发。Vue的灵活性和可扩展性使得它可以根据项目的需求进行定制和优化，从而满足不同规模和复杂度的项目要求。

  5. 强大的社区支持：Vue拥有庞大的社区和活跃的开发者群体。这意味着你可以很容易地找到关于Vue的问题解答、教程、插件和库等资源。此外，Vue的官方团队也非常活跃，经常发布新的功能和更新，以满足开发者的需求。

  6. 与现有技术的兼容性：Vue可以很容易地与其他前端库和框架（如React、Angular）以及后端技术栈（如Node.js、Django、Spring等）进行集成。这使得Vue成为了一个非常灵活和适应性强的前端解决方案。

  7. 行业趋势和就业前景：随着Vue的普及和受欢迎程度的不断提高，越来越多的企业和项目开始采用Vue作为前端框架。因此，掌握Vue不仅有助于你更好地适应行业趋势和发展需求，还能为你的职业发展和就业前景带来积极的影响。

综上所述，学习Vue对于前端开发者来说是非常有价值和必要的。它不仅能够提高你的开发效率和技能水平，还能帮助你更好地适应行业趋势和发展需求。

Vue怎么使用

第一步，复制自己需要生成代码片段的代码；

<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h2>{{message}}</h2></div><script type="text/javascript" src="./js/vue.global.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata: function() {return {message: "Hello Vue"}},})// 2.挂载appapp.mount("#app")</script>
</body>
</html>

第二步，snippet generator在该网站中生成代码片段；

第三步，在VSCode中配置代码片段；

打开左上角文件>>下面点击首选项>>配置代码片段

学习Vue之前要注意

2.1.4 注意事项

注意:

1) 所有的Vue方法和属性都必须在对应挂载根标签的内部使用

2) 所有Vue的数据都应该在date函数返回的对象中

3) 我们要遵循一个原则:由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了.

我们要更好的学习Vue，要熟悉MVVM模型：

MVVM是软件架构设计模式，用于构建用户界面应用。其由Model、View和ViewModel组成，实现数据模型与界面的分离，提升代码解耦性、可测试性和可维护性。MVVM支持双向数据绑定、事件驱动和命令绑定，简化视图与模型的交互。

Vue虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑.

M: 模型(Model),数据模型，负责存储应用程序的数据。它独立于视图（View）和视图模型（ViewModel），可以在不同的视图间共享。对应data中的数据,

V: 视图(View): 模板 用户界面，负责数据的展示。通常使用HTML、CSS和JavaScript（或特定框架的模板语言）来实现。

VM:视图模型(ViewModel):是View和Model之间的桥梁。它负责处理View和Model之间的交互，比如将Model的数据转换为View可以展示的格式，或者将用户在View上的操作转换为Model的数据更新。 Vue对象实例

还有基础的指令：

指令：

1.v-bind：属性名 绑定属性 简写为 “：属性名”

语法：<div v-bind="objectOfAttrs"></div>

2.v-text：插值语法

<div id="box"><h1 v-test="type"></h1><h1>{{type}}</h1>
</div>

3.v-html    :数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 v-html 指令

语法：

<div id="box"><p v-html="type"></p><p>{{type}}</p>
</div>

4.类操作： ：class  语法：:class=’xxx’   

    style操作：style={样式属性名:值，......}  语法：        :style=”{样式属性名1:变量,样式属性名2:变量2,....}”;

5..v-if:

v-if=“boolean值”

true: 对应标签就会渲染, false: 不渲染

  1. v-if

与 v-else

  1. v-if

v-else-if …. v-else

v-show:控制标签显示隐藏, 控制标签display样式属性

6..v-for：

  • {{name}}

arr:["张三","李四","王五"]；

  • {{i}--{name}}

arr:["张三","李四","王五"]；

  • {{name}}

arr:["张三","李四","王五"]；

stuArr{

}

7.v-show：v-show指令: 根据表达式的值来显示或隐藏HTML元素,当v-show表达式的值为false时,元素将被隐藏,查看DOM时,会发现元素上多了一个行内样式style=”display:none”.

语法：

<div id="box"><h1 v-show="false"></h1>
</div>

v-if与v-show的比较:

  1. 首先，在用法上的区别：

  • v-show是不支持template；

  • v-show不可以和v-else一起使用；

  1. 其次，本质的区别：

  • v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；

  • v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；

  1. 开发中如何进行选择呢？

  • 如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；

  • 如果不会频繁的发生切换，那么使用v-if；

8..v-model

1.文本类型：和<>

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：

  • 比如用户在登录、注册时需要提交账号密码；

  • 比如用户在检索、创建、更新信息时，需要提交一些数据

9..v-on:可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。

v-on:事件类型

1.鼠标事件：常用，单机事件

相关文章：

快速入门Vue

Vue是什么 Vue.js&#xff08;通常简称为Vue&#xff09;是一个开源的JavaScript框架&#xff0c;用于构建用户界面和单页应用程序&#xff08;SPA&#xff09;。它由尤雨溪&#xff08;Evan You&#xff09;在2014年开发并发布。Vue的核心库只关注视图层&#xff0c;易于上手…...

编程日记 2024/9/18 7:04:19

ubuntu系统服务器离线安装python包

一、根据工程需要本地下载所需python包 1. 下载环境requirements.txt pip freeze > requirements.txt2. 根据requirements.txt下载python包 注意&#xff1a;查看服务器属于x_86架构还是arm架构、cpython还是pypy 2.1 确定服务器架构&#xff08;终端输入&#xff09; …...

编程日记 2024/9/18 7:03:18

re题(30)BUUCTF-[HDCTF2019]Maze

BUUCTF在线评测 (buuoj.cn) 查一下壳&#xff0c;32位upx壳 脱完壳放到ida&#xff0c;shiftF12看一下字符串&#xff0c;是个迷宫&#xff0c;maze&#xff08;迷宫&#xff09; 这里有一个经典的花指令 (导致找不到main函数) 下方有个奇怪的jnz指令&#xff0c;它跳转到了下…...

编程日记 2024/9/18 6:59:14

day36+day37 0-1背包

### 9.9 01背包问题&#xff08;一维二维&#xff09; 背包问题分类&#xff1a;01背包&#xff08;一种物品只有一个&#xff09;&#xff0c;完全背包&#xff08;一种物品有无数个&#xff09;&#xff0c;多重背包&#xff08;不同物品有不同数量&#xff09; 46. 携带研究…...

编程日记 2024/9/18 6:57:12

PostMan使用变量

环境变量 使用场景 当测试过程中&#xff0c;我们需要对开发环境、测试环境、生产环境进行测试 不同的环境对应着不同的服务器&#xff0c;那么这个时候我们就可以使用环境变量来区分它们 避免切换测试环境后&#xff0c;需要大量的更改接口的url地址 全局变量 使用场景 当…...

编程日记 2024/9/18 6:55:10

多线程同步

多线程 程序中默认只有一个线程&#xff0c;pthread_create()函数调用后就有2个线程。 pthread_create() #include <pthread.h> #include <string.h> #include <unistd.h> #include <iostream> using namespace std; //线程函数 void * callback(vo…...

编程日记 2024/9/18 6:54:09

第159天：安全开发-Python-协议库爆破FTPSSHRedisSMTPMYSQL等

案例一: Python-文件传输爆破-ftplib 库操作 ftp 协议 开一个ftp 利用ftp正确登录与失败登录都会有不同的回显 使用ftplib库进行测试 from ftplib import FTP # FTP服务器地址 ftp_server 192.168.172.132 # FTP服务器端口&#xff08;默认为21&#xff09; ftp_po…...

编程日记 2024/9/18 6:51:07

软件测试 | APP测试 —— Appium 的环境搭建及工具安装教程

大家应该都有同一种感觉&#xff0c;学习appium最大的难处之一在于环境的安装&#xff0c;安装流程比较繁琐&#xff0c;安装的工具和步骤也较多&#xff0c;以下是基于Windows系统下的Android手机端的安装流程。就像我们在用Selenium进行web自动化测试的时候一样&#xff0c;我…...

编程日记 2024/9/18 6:49:05

计算机人工智能前沿进展-大语言模型方向-2024-09-13

计算机人工智能前沿进展-大语言模型方向-2024-09-13 1. OneEdit: A Neural-Symbolic Collaboratively Knowledge Editing System Authors: Ningyu Zhang, Zekun Xi, Yujie Luo, Peng Wang, Bozhong Tian, Yunzhi Yao, Jintian Zhang, Shumin Deng, Mengshu Sun, Lei Liang, Z…...

编程日记 2024/9/18 6:47:03

衡石分析平台使用手册-替换衡石minio

替换衡石minio​ 在使用HENGSHI SENSE服务过程中&#xff0c;可以根据业务需要替换HENGSHI自带的minio。本文讲述使用Aws S3和Aliyun OSS替代衡石minio的过程。 准备工作​ 在进行配置前&#xff0c;请在aws s3或aliyun oss完成如下准备工作。 创建access_key和secret_acces…...

编程日记 2024/9/18 6:46:02

怎么将几个pdf合成为一个？把几个PDF合并成为一个的8种方法

怎么将几个pdf合成为一个&#xff1f;将多个PDF文件合并成一个整体可以显著提高信息整合的效率&#xff0c;并简化文件的管理与传递。例如&#xff0c;将不同章节的电子书合成一本完整的书籍&#xff0c;或者将多个部门的报告整合成一个统一的文档&#xff0c;可以使处理流程变…...

编程日记 2024/9/18 6:42:59

明明没有程序占用端口，但是启动程序却提示端口无法使用，项目也启动失败

明明没有程序占用端口&#xff0c;但是启动程序却提示端口无法使用&#xff0c;项目也启动失败 win10、端口占用、port、netstat、used背景 曾在springboot中遇到过&#xff0c;新建spring cloud时又遇到这个问题&#xff0c;如果不从根本上解决&#xff0c;就需要改端口&…...

编程日记 2024/9/18 6:41:58

ClickHouse的安装配置+DBeaver远程连接

1、clickhouse的下载&#xff1a; 先去clickhouse官网进行下载&#xff0c;继续往下翻找文档&#xff0c;将DBeaver也下载下来 下载地址&#xff1a;https://packages.clickhouse.com/rpm/stable/ 下载这个四个rpm包 2、上传rmp文件到Linux中 自己创建的一个clickhouse-ins…...

编程日记 2024/9/18 6:40:57

UVM仿真的运行（四）—— objection 机制

目录 0. 引言 1. uvm_phase::execute_phase line 1432~1470 2. uvm_objection 2.1 get_objection_total 2.2 raise_objection 2.3 drop_objection 2.4 m_execute_scheduled_forks 2.5 wait_for 3. 小结 0. 引言 前面介绍了uvm仿真的启动，按照domain中指定的DAG的pha…...

编程日记 2024/9/18 6:39:56

【ShuQiHere】算法分析：揭开效率与复杂度的神秘面纱

【ShuQiHere】 &#x1f680; 引言 在计算机科学的世界中&#xff0c;算法 是每一个程序背后的隐形支柱。从简单的排序到复杂的人工智能&#xff0c;算法无处不在。然而&#xff0c;编写一个能运行的程序只是开始&#xff0c;当程序面对庞大的数据集时&#xff0c;算法的效率…...

编程日记 2024/9/18 6:37:54

记忆化搜索专题——算法简介力扣实战应用

目录 1、记忆化搜索算法简介 1.1 什么是记忆化搜索 1.2 如何实现记忆化搜索 1.3 记忆化搜索与动态规划的区别 2、算法应用【leetcode】 2.1 题一&#xff1a;斐波那契数 2.1.1 递归暴搜解法代码 2.1.2 记忆化搜索解法代码 2.1.3 动态规划解法代码 2.2 题二&#xff1…...

编程日记 2024/9/18 6:35:53

【Java】【力扣】83.删除排序链表中的重复元素

题目 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,1,2] 输出&#xff1a;[1,2]示例 2&#xff1a; 输入&#xff1a;head [1,1,2,3,3] 输出&#…...

编程日记 2024/9/18 6:32:49

vue3项目实现全局国际化

本文主要梳理vue3项目实现全项目格式化&#xff0c;例如在我前面文章使用若依创建vue3的项目中&#xff0c;地址&#xff1a;若依搭建vue3项目在导航栏中切换&#xff0c;页面中所有的组件的默认语言随之切换&#xff0c;使用的组件库依旧是element-plus&#xff0c;搭配vue-i1…...

编程日记 2024/9/18 6:31:49

Oracle 19c异常恢复—ORA-01209/ORA-65088---惜分飞

由于raid卡bug故障,导致文件系统异常,从而使得数据库无法正常启动,客户找到我之前已经让多人分析,均未恢复成功,查看alert日志,发现他们恢复的时候尝试resetlogs库,然后报ORA-600 kcbzib_kcrsds_1错误 2024-09-15T17:07:32.55321508:00 alter database open resetlogs 2024-09-…...

编程日记 2024/9/18 6:25:43

【Webpack--000】了解Webpack

&#x1f913;&#x1f60d;Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主 &#x1f431;‍&#x1f409;若此文你认为写的不错&#xff0c;不要吝啬你的赞扬&#xff0c;求收藏&#xff0c;求评论&#xff0c;求一个大大的赞&#xff01;&#x1f44d;* &#x…...

编程日记 2024/9/18 6:22:40

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/11/7 3:05:08

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/11/6 0:52:38

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2025/11/3 19:15:14

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/3 19:02:52

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/11/3 2:51:56

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2025/10/29 3:16:46

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50