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

Vue框架的基本介绍

news 来源：原创 2025/7/5 19:05:59

一.Vue

1.概述

2.三大主流框架

3.优点:

二.Vue搭建

三.语法

1.基本框架

2.插值表达式

3.Vue指令

1.v-text:

2.v-html:

编辑3.v-model:

4.v-on:

5.v-show:

6.v-if:

7.v-else:

8.v-bind:

9.v-for:

一.Vue

1.概述

Vue是一款用于构建用户界面的渐进式的js框架,是一款前端javaScript框架,对javaScript进行封装,核心库只关心视图层,易上手,便于与既有项目整合

2.三大主流框架

vue.js和Angular.js,react.js一起并称为前端三大主流框架

3.优点:

1.体积小
2.效率高(不直接频繁的对网页上的标签进行操作),基于虚拟DOM技术(不需要我们每次手动绑定DOM对象)
3.实现数据双向绑定(同步更新)
4.生态丰富,学习成本低

构建用户界面:基于数据渲染出用户看见的界面

渐进式:使用部分vue或完整vue
框架:就是一套完整的项目解决方法,用于快速构建项目(提升开发效率)

二.Vue搭建

1.下载Vue.js,导入到对应文件的js目录下

2.在html文件中导入Vue.js

<script src="js/vue@2.js"></script>

这里需要注意的是,导入标签中不能有任何的内容,因为在<script></script>中有src属性时,浏览器默认不会读取其中的内容

三.语法

1.基本框架

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue@2.js"></script></head><body><!-- 将指定标签与Vue对象绑定绑定 --><div class="tmp"></div><script>let tmp = new Vue({// 与Vue对象绑定的标签选择器el:".tmp",// data中定义了使用的数据 键:值data:{},// 定义函数(要使用Vue的属性,函数必须定义在methods里),包装到Vue对象methods:{}});</script></body>
</html>

2.插值表达式

将Vue对象data域中定义的变量直接输出到标签中

<body><!-- 将指定标签与Vue对象绑定绑定 --><div class="tmp">{{message}}</div><script>let tmp = new Vue({// 与Vue对象绑定的标签选择器el:".tmp",// data中定义了使用的数据 键:值data:{message:"hellow,Vue",},// 定义函数(要使用Vue的属性,函数必须定义在methods里),包装到Vue对象methods:{}});</script>
</body>

那这样写在浏览器中会显示什么呢?

成功的显示了hellow,Vue,Vue框架帮助我们免去了频繁的获取Dom对象的操作

3.Vue指令

指令带有前缀v-开头,表示它们是vue提供的特殊属性

1.v-text:

将变量显示在标签体中,会解析message中的标签,例如下述代码中有<b></b>标签,在浏览器中这个表情会被解析

<div  v-html='message'></div>
//注意这里是简写
data:{message:'<b>hellow</b>'
}

2.v-html:

将变量显示在标签体中,把message当成一个字符串,如果meassage中有标签,不会解析执行,纯文本

<div  v-text='message'></div>
//注意这里是简写
data:{message:'<b>hellow</b>'
}

v-html和v-text在浏览器中的效果如下:

3.v-model:

可以将输入标签中的值,绑定到指定的属性上,将输入框的值与其他标签体绑定

<p>{{messages}}</p>
<input type="text" v-model="messages"/>
//注意这里是简写
data:{messages:''
}

4.v-on:

事件绑定

<input type="button" value="按钮1" v-on:click="text1()"/>
<!-- 简写方法 -->
<input type="button" value="按钮2" @click="text2()"/>methods:{text1(){// 想要使用data里面的数据,注意作用域(this表示Vue对象)alert(this.message);},

5.v-show:

根据真假显示或隐藏当前标签,通过display的值隐藏标签

<div v-show="isshow">123</div>data:{isshow:true,
}

6.v-if:

根据真假显示或隐藏当前标签,直接删除/创建标签,效率低

<div v-if="isshow">222</div>

7.v-else:

配合着v-if使用,v-if不成立执行v-else(if-else必须连续,中间不能隔标签)

<div v-else>345</div>

8.v-bind:

1.将动态的值和我们原来静态的值绑定
2.可以动态的改变class属性的值(通过一个boolean值)

<img v-bind:src="imgsrc"/>

<div v-bind:class="{active:isActive}">状态</div>
{类选择器:boolean值}

9.v-for:

循环,模拟从服务器后端响应的数据就是一个数组(json),把数据动态的显示在网页上

<ol><!-- 增强for循环 p是临时变量用于接收数组内容 --><li v-for="p in provinces">{{p}}</li>
</ol>data:{provinces:['北京','天津','上海','西安','汉中'],
}

效果如下:

Vue框架的基本介绍

目录一.Vue 1.概述 2.三大主流框架 3.优点: 二.Vue搭建三.语法 1.基本框架 2.插值表达式 3.Vue指令 1.v-text: 2.v-html: 编辑3.v-model: 4.v-on: 5.v-show: 6.v-if: 7.v-else: 8.v-bind: 9.v-for: 一.Vue 1.概述 Vue是一款用于构建用户界面的渐进式的…...

编程日记 2025/7/5 19:05:59

Web 架构之攻击应急方案

文章目录一、引言二、常见 Web 攻击类型及原理2.1 SQL 注入攻击2.2 跨站脚本攻击（XSS）2.3 分布式拒绝服务攻击（DDoS） 三、攻击检测3.1 日志分析3.2 入侵检测系统（IDS）/入侵防御系统（IPS&#x…...

编程日记 2025/6/28 23:01:50

xss-labs靶场基础8-10关（记录学习）

前言： 内容： 第八关关卡资源网站，html编码网站（两个网站，一个是实体编号转义（只对特殊字符有效，字母无效）、实体符号转义） 在线Html实体编码解码-HTML Entity Encodi…...

编程日记 2025/6/29 1:22:04

arctanx 导数泰勒展开式证明

你提供的推导内容非常清晰，条理分明。下面是对 d d x arctan ⁡ x 1 1 x 2 \frac{d}{dx} \arctan x \frac{1}{1 x^2} dxdarctanx1x21 的总结与适当补充： ✅ 结论 d d x arctan ⁡ x 1 1 x 2 \frac{d}{dx} \arctan x \frac{1}{1 x^2} dxda…...

编程日记 2025/6/28 23:01:49

基于Java的家政服务平台设计与实现(代码+数据库+LW)

摘要现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本家政服务平台就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息&a…...

编程日记 2025/6/28 23:02:21

SpringBoot的外部化配置

一、什么是外部化配置外部化配置是指把应用程序中各种可配置的参数、属性等信息，从代码内部提取出来，放置在外部的配置文件、数据库或配置中心等地方（比如使用.properties、.yml 或.xml 等格式的文件）进行管理。提高应用程序的可…...

编程日记 2025/6/28 23:01:53

Java鼠标事件监听器MouseListener、MouseMotionListener和MouseWheelListener

Java鼠标事件监听器MouseListener、MouseMotionListener和MouseWheelListener java中创建鼠标，键盘的事件行为监听器的几种方法这里以鼠标点击事件监听器为例，其他也是一样创建。常用的消息监听器对象 1:点击事件监听器 ActionListener 2:按键事件监…...

编程日记 2025/6/28 23:52:54

第三方支付公司如何代付和入账？

通俗来说，就是企业把钱打到第三方公司账户上，再由第三方公司把钱打入客户指定账户。那么第三方支付入账流程是怎样的呢？ 第一，企业向第三方支付公司指定账户充值打款；第二，企业提交代付银行卡信息后台操…...

编程日记 2025/6/29 0:26:11

.NET8关于ORM的一次思考

文章目录前言一、思路二、实现ODBC>SqlHelper.cs三、数据对象实体化四、SQL生成SqlBuilder.cs五、参数注入 SqlParameters.cs六、反射 SqlOrm.cs七、自定义数据查询八、总结前言琢磨着在.NET8找一个ORM，对比了最新的框架和性能。框架批量操作性能SQL控制粒…...

编程日记 2025/6/29 0:41:48

LlamaIndex 第八篇 MilvusVectorStore

本指南演示了如何使用 LlamaIndex 和 Milvus 构建一个检索增强生成（RAG）系统。 RAG 系统将检索系统与生成模型相结合，根据给定的提示生成新的文本。该系统首先使用 Milvus 等向量相似性搜索引擎从语料库中检索相关文档，然后使用生…...

编程日记 2025/6/29 1:07:30

记录为什么LIst数组“增删慢“,LinkedList链表“查改快“？

数组（Array） 增删慢：对于数组来说，增加或删除元素的操作可能会比较慢，特别是当你需要在数组的开头或中间进行这些操作时。这是因为这些操作通常需要移动数组中的其他元素以保持连续性。例如，如果你想要在数…...

编程日记 2025/6/28 23:02:05

【论文阅读】Dip-based Deep Embedded Clustering with k-Estimation

摘要近年来，聚类与深度学习的结合受到了广泛关注。无监督神经网络，如自编码器，能够自主学习数据集中的关键结构。这一思想可以与聚类目标结合，实现对相关特征的自动学习。然而，这类方法通常基于 k-means 框架&#x…...

编程日记 2025/6/28 23:02:19

ARFoundation 图片识别，切换图片克隆不同的追踪模型

场景搭建： 你可以把我的代码发给AI，去理解 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.XR; using UnityEngine.XR.ARFoundation; using UnityEngine.XR.ARSubsystems; using TMPro; using Unit…...

编程日记 2025/6/28 23:01:58

鸿蒙next播放B站视频横屏后的问题

（此文讨论范围为b站视频链接，且不包括b站直播链接；android/iOS的webview播放b站视频完全没有这么多问题） 1、竖屏播放没问题从一个竖屏页p1点击进入视频页p2，p2页仍为竖屏； p2页有一Web组件，…...

编程日记 2025/7/5 19:00:38

华为0507机试

题目二建设基站有一棵二叉树，每个节点上都住了一户居民。现在要给这棵树上的居民建设基站，每个基站只能覆盖她所在与相邻的节点，请问信号覆盖这棵树最少需要建设多少个基站 #include <bits/stdc.h> using namespace std;const int …...

编程日记 2025/6/28 23:02:09

apache2的默认html修改

使用127.0.0.1的时候，默认打开的是index.html，可以通过配置文件修改成我们想要的html vi /etc/apache2/mods-enabled/dir.conf <IfModule mod_dir.c>DirectoryIndex WS.html index.html index.cgi index.pl index.php index.xhtml index.htm <…...

编程日记 2025/6/29 1:09:00

EXCEL下拉菜单与交替上色设置

Excel/WPS 表格操作教程（双功能整合） 目录功能一：交替行上色 Excel 操作WPS 操作功能二：下拉菜单设置 Excel 操作WPS 操作组合效果示例注意事项功能一：交替行上色 Excel 操作选中数据区域拖动鼠标选择需要设置…...

编程日记 2025/6/28 23:52:38

list基础用法

list基础用法 1.list的访问就不能用下标[]了,用迭代器2.emplace_back()几乎是与push_back()用法一致，但也有差别3.insert(),erase()的用法4.reverse()5.排序6.合并7.unique()（去重）8.splice剪切再粘贴 1.list的访问就不能用下标[]了,用迭代器…...

编程日记 2025/6/28 23:59:13

鸿蒙PC版体验_画面超级流畅_具备terminal_无法安装windows、linux软件--纯血鸿蒙HarmonyOS5.0工作笔记017

鸿蒙NEXT和开源鸿蒙OpenHarmony现在已经开发实现统一,使用鸿蒙ArkTS开发的应用,可以直接在开源鸿蒙上. 鸿蒙的terminal是使用的linux的语法,但是有很多命令,目前还不能使用,常用的ifconfig等是可以用的. 鸿蒙终于出来PC版了,虽然,不像Windows以及mac等,开放的命令那么多,但…...

编程日记 2025/6/29 1:13:41

Spring 集成 SM4（国密对称加密）

Spring 集成 SM4（国密对称加密）算法主要用于保护敏感数据，如身份证、手机号、密码等。下面是完整集成步骤（含工具类使用示例），采用 Java 实现（可用于 Spring Boot）。一、依赖引…...

编程日记 2025/7/2 16:25:07

deepseek梳理java高级开发工程师微服务面试题

Java微服务高级面试题与答案一、微服务架构设计 1. 服务拆分原则 Q1：微服务拆分时有哪些核心原则？如何解决拆分后的分布式事务问题？ 答案： 服务拆分五大原则： 1. 单一职责原则（SRP）- 每个…...

编程日记 2025/6/28 23:02:22

人事管理系统8

员工管理（分页查询、查看详情页、修改）： 1. 分页查询 Staff.java 中加入部门名和岗位名两个属性以及对应的 get 和 set 方法。这两个属性没有数据库字段对应， 仅供前端显示用： private String departname; //部门名属…...

编程日记 2025/6/28 23:02:12

Stapi知识框架

一、Stapi 基础认知 1. 框架定位自动化API开发框架：专注于快速生成RESTful API 约定优于配置：通过标准化约定减少样板代码企业级应用支持：适合构建中大型API服务代码生成导向：显著提升开发效率 2. 核心特性自动CRUD端点…...

编程日记 2025/6/28 23:01:54

第三章初始化配置（一）

我们首先介绍配置Logback的方法，并提供了许多示例配置脚本。在后面的章节中，我们将介绍Logback所依赖的配置框架Joran。初始化配置在应用程序代码中插入日志请求需要大量的规划和努力。观察表明，大约4%的代码用于记录。因此，即…...

编程日记 2025/7/5 19:02:13

WebGIS 开发中的数据安全与隐私保护：急需掌握的要点

在 WebGIS 开发中，数据安全与隐私保护是绝对不能忽视的问题！随着地理信息系统的广泛应用，越来越多的敏感数据被存储和传输，比如个人位置信息、企业地理资产等。一旦这些数据泄露，后果不堪设想。然而，很多开…...

编程日记 2025/6/28 23:01:59

C语言 ——— 函数栈帧的创建和销毁

目录寄存器 mian 函数是被谁调用的通过汇编了解函数栈帧的创建和销毁转汇编后（Add函数之前的部分） 转汇编后（进入Add函数之前的部分） 转汇编后（正式进入Add函数的部分） 编辑总结局部变量…...

编程日记 2025/6/29 1:21:20

2025年真实面试问题汇总（二）

jdbc的事务是怎么开启的在JDBC中，事务的管理是通过Connection对象控制的。以下是开启和管理事务的详细步骤： 1. 关闭自动提交模式默认情况下，JDBC连接处于自动提交模式（auto-commit true），即每条SQL语…...

编程日记 2025/7/5 15:42:26

【用「概率思维」重新理解生活】

用「概率思维」重新理解生活：为什么你总想找的「确定答案」并不存在？ 第1层：生活真相——所有结果都是「综合得分」现象：我们总想找到“孩子生病是因为着凉”或“伴侣生气是因为那句话”的单一答案现实：每个结果背后…...

编程日记 2025/7/2 4:31:28

Redis——线程模型·

为什么Redis是单线程却仍能有10w/秒的吞吐量？ 内存操作：Redis大部分操作都在内存中完成，并且采用了高效的数据结构，因此Redis的性能瓶颈可能是机器的内存或者带宽，而非CPU，既然CPU不是瓶颈，自然…...

编程日记 2025/6/28 23:10:27

APS排程系统（Advanced Planning and Scheduling，高级计划与排程系统）

APS排程系统（Advanced Planning and Scheduling，高级计划与排程系统）是一种基于供应链管理和约束理论的智能生产管理工具，旨在通过动态优化资源分配和生产流程，解决制造业中的复杂计划问题。以下是其核心要点解析&…...

编程日记 2025/6/28 23:02:08

首个窗口级无人机配送VLN系统！中科院LogisticsVLN：基于MLLM实现精准投递

导读随着智能物流需求日益增长，特别是“最后一公里”配送场景的精细化，传统地面机器人逐渐暴露出适应性差、精度不足等瓶颈。为此，本文提出了LogisticsVLN系统——一个基于多模态大语言模型的无人机视觉语言导航框架，专为窗户级别…...

编程日记 2025/6/28 23:01:55

仓颉Magic亮相GOSIM AI Paris 2025：掀起开源AI框架新热潮

巴黎，2025年5月6日——由全球开源创新组织GOSIM联合CSDN、1ms.ai共同主办的 GOSIM AI Paris 2025 大会今日在法国巴黎盛大开幕。GOSIM 作为开源人工智能领域最具影响力的年度峰会之一，本届大会以“开放、协作、突破”为核心，汇聚了来自华为、…...

编程日记 2025/6/28 23:02:01

《Effective Python》第2章字符串和切片操作——深入理解Python 中的字符数据类型（bytes 与 str）的差异

引言本篇博客基于学习《Effective Python》第三版 Chapter 2: Strings and Slicing 中的 Item 10: Know the Differences Between bytes and str 的总结与延伸。在 Python 编程中，字符串处理是几乎每个开发者都会频繁接触的基础操作。然而，Python 中的…...

编程日记 2025/6/28 23:02:04

windows 强行终止进程，根据端口号

步骤1：以管理员身份启动终端‌ 右键点击开始菜单 → 选择 ‌终端（管理员）‌ 或 ‌Windows PowerShell（管理员）‌。 ‌步骤2：检测端口占用状态‌ # 查询指定端口（示例为1806） netst…...

编程日记 2025/6/28 23:02:02

PHP-FPM 调优配置建议

1、动态模式 pm dynamic; 最大子进程数（根据服务器内存调整） pm.max_children 100 //每个PHP-FPM进程大约占用30-50MB内存(ThinkPHP框架本身有一定内存开销)安全值：8GB内存 / 50MB ≈ 160，保守设置为100 ; 启动时创建的进程数&…...

编程日记 2025/6/29 0:50:14

我喜欢的vscode几个插件和主题

主题 Monokaione Monokai Python 语义高光支持自定义颜色为 self 将 class , def 颜色更改为红色为装饰器修复奇怪的颜色适用于魔法功能的椂光 Python One Dark 这个主题只在python中效果最好。我为我个人使用做了这个主题,但任何人都可以使用它。插件 1.Pylance Pylanc…...

编程日记 2025/7/3 17:03:40

openharmony 地图开发（高德sdk调用）

1.显示地图 2.利用sdk完成搜索功能，以列表形式展示，并提供定位和寻路按钮 3.利用sdk完成寻路，并显示路线信息和画出路线，路线和信息各自点击后可联动到对方信息显示 4.调用sdk 开始导航商务合作：...

编程日记 2025/6/29 1:03:10

Kotlin-类和对象

文章目录类主构造函数次要构造函数总结对象初始化类的继承成员函数属性覆盖(重写)智能转换类的扩展类 class Student { }这是一个类,表示学生,怎么才能给这个类添加一些属性(姓名,年龄…)呢? 主构造函数我们需要指定类的构造函数。构造函数也是函数的一种,但是它专门…...

编程日记 2025/6/28 23:02:29

LVS+keepalived实战案例

目录部署LVS 安装软件创建VIP 创建保存规则文件给RS添加规则验证规则部署RS端安装软件页面内容添加VIP 配置系统ARP 传输到rs-2 客户端测试查看规则文件实现keepalived 编辑配置文件传输文件给backup 修改backup的配置文件开启keepalived服务 …...

编程日记 2025/6/29 0:14:04

可视化+智能补全：用Database Tool重塑数据库工作流

一、插件概述 Database Tool是JetBrains系列IDE（IntelliJ IDEA、PyCharm等）内置的数据库管理插件。它提供了从数据库连接到查询优化的全流程支持，让开发者无需离开IDE即可完成数据库相关工作。核心价值： 统一工作环境&#xf…...

编程日记 2025/6/28 23:02:00

【认知思维】沉没成本谬误：为何难以放弃已投入的资源

什么是沉没成本谬误沉没成本谬误（Sunk Cost Fallacy）是指人们倾向于根据过去已经投入的资源（时间、金钱、精力等）而非未来收益来做决策的一种认知偏差。简单来说，它反映了"我已经投入这么多，不能就这…...

编程日记 2025/6/28 23:45:12

Linux 系统安全基线检查：入侵防范测试标准与漏洞修复方法

Linux 系统安全基线检查：入侵防范测试标准与漏洞修复方法在 Linux 系统的安全管理中，入侵防范是至关重要的环节。通过对系统进行安全基线检查，可以有效识别潜在的安全漏洞，并采取相应的修复措施，从而降低被入侵的风险…...

编程日记 2025/6/29 1:20:14

【HT周赛】T3.二维平面题解（分块：矩形chkmax，求矩形和）

题意需要维护 n n n \times n nn 平面上的整点，每个点 ( x , y ) (x, y) (x,y) 有权值 V ( x , y ) V(x, y) V(x,y)，初始都为 0 0 0。同时给定 n n n 次修改操作，每次修改给出 x 1 , x 2 , y 1 , y 2 , v x_1, x_2, y_1, y_2, v x…...

编程日记 2025/6/29 1:30:27

目标检测任务常用脚本1——将YOLO格式的数据集转换成VOC格式的数据集

在目标检测任务中，不同框架使用的标注格式各不相同。常见的框架中，YOLO 使用 .txt 文件进行标注，而 PASCAL VOC 则使用 .xml 文件。如果你需要将一个 YOLO 格式的数据集转换为 VOC 格式以便适配其他模型，本文提供了一个结构清晰、…...

编程日记 2025/6/29 0:06:25

2025深圳杯D题法医物证多人身份鉴定问题四万字思路

Word版论文思路和千行Python代码下载：https://www.jdmm.cc/file/2712074/ 引言法医遗传学中的混合生物样本分析，特别是短串联重复序列（Short Tandem Repeat, STR）分型结果的解读，是现代刑事侦查和身份鉴定领域的核心…...

编程日记 2025/6/29 1:20:15

利用自适应双向对比重建网络与精细通道注意机制实现图像去雾化技术的PyTorch代码解析

利用自适应双向对比重建网络与精细通道注意机制实现图像去雾化技术的PyTorch代码解析漫谈图像去雾化的挑战在计算机视觉领域，图像复原一直是研究热点。其中，图像去雾化技术尤其具有实际应用价值。然而，复杂的气象条件和多种因素干扰使得这…...

编程日记 2025/6/29 0:40:11

Focal Loss 原理详解及 PyTorch 代码实现

Focal Loss 原理详解及 PyTorch 代码实现介绍一、Focal Loss 背景二、代码逐行解析1. 类定义与初始化三、核心参数作用四、使用示例五、应用场景六、总结介绍一、Focal Loss 背景 Focal Loss 是为解决类别不平衡问题设计的损失函数，通过引入 gamma 参数降低易…...

编程日记 2025/6/28 23:51:53

VScode 的插件本地更改后怎么生效

首先 vscode 的插件安装地址为 C:\Users\%USERNAME%\.vscode\extensions 找到你的插件包进行更改想要打印日志，用下面方法 vscode.window.showErrorMessage(console.log "${name}" exists.); 打印结果找到插件，点击卸载然后点击重新启动 …...

编程日记 2025/6/29 0:11:00

这类物种组织heatmap有点东西

如果想知道研究对象（人、小鼠、拟南芥、恒河猴等）某个时候各个器官的fMRI信号强度、炎症程度等指标的差异，gganatogram可以以热图的形式轻松满足你的需求。数据准备以男性为例，数据包含四列， 每列详细介绍 org…...

编程日记 2025/6/28 23:09:57

通讯录程序

假设通讯录可以存放100个人的信息（人的信息：姓名、年龄、性别、地址、电话） 功能：1>增加联系人 2>删除指定联系人 3>查找指定联系人信息 4>修改指定联系人信息 5>显示所有联系人信息 6>排序（…...

编程日记 2025/6/29 1:29:45

一.Vue

1.概述

2.三大主流框架

3.优点:

二.Vue搭建

三.语法

1.基本框架

2.插值表达式

3.Vue指令

1.v-text:

2.v-html:

3.v-model:

4.v-on:

5.v-show:

6.v-if:

7.v-else:

8.v-bind:

9.v-for:

相关文章：