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

【VUE】

news 2025/11/7 10:35:42

概念

VUE是一个用于构建用户界面的渐进式框架

构建用户界面：基于数据渲染出用户看到的界面

渐进式：声明式渲染->组件系统->客户端路由->大规模状态管理->构建工具

框架：一套完整的项目解决方案

VUE使用方式：

1.局部模块改造，用Vue核心包开发

2.整站开发，用Vue核心包&Vue插件&工程化开发

创建实例

1.创建Vue实例，初始化渲染

准备容器

<div id="app"></div>

引包

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

创建Vue实例

el：指定挂载点

data：提供数据

const app = new Vue({el: '#app',data: {msg: 'hello'}})

指定配置项

<div id="app">{{msg}}</div>

插值表达式

{{        }}：利用表达式进行插值，渲染到页面

注意点

1.使用数据必须存在

2.支持表达式，但不支持语句

3.不能在标签属性中使用{{}}插值

响应式特性

响应式：数据变化，视图自动更新

访问

app.msg

修改数据

app.msg="bye"

开发者工具

指令

带前缀的特殊标签属性

v-html

作用：设置元素的innerHTML

语法：v-html="表达式"

<body><div id="app"><div v-html="msg"></div></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {msg: '<a href="www.baidu.com">baidu</a>'}})</script>

v-show

作用：控制元素显示隐藏

语法：v-show="表达式"，表达式为true显示，false隐藏，但在源码中显现

场景：频繁切换显示隐藏的场景

v-if

作用：控制元素显示隐藏（条件渲染）

语法：v-if="表达式"，表达式为true显示，false隐藏，不在源码中显现

场景：要么显示，要么隐藏

v-on

作用：注册事件=添加监听+提供处理逻辑

语法：

1.v-on:事件名="内联语句" 或者@事件名="内联语句"

2.v-on:事件名="methods中的函数名" 或者@事件名="methods中的函数名"

v-else

作用：辅助v-if进行判断渲染

语法：v-else="表达式"，要紧挨v-if使用

v-else-if

见上

v-bind

作用：动态地设置html的标签属性

语法：v-bind:属性名="表达式"

v-for

作用：基于数据循环（数组，对象，数字~），多次渲染整个元素

语法：v-for="(item,index) in 数组"，要加key属性

v-model

作用：给表单元素使用，双向数据绑定，快速获取设置表单元素内容

语法：v-model="表达式"

Vue文件（.vue）

规范：

1.属性绑定，src="{{url}}升级为"src="url"

2.事件绑定，bindtap="eventName"升级为@tap="eventName"

3.支持Vue常用指令

相关文章：

【VUE】

概念 VUE是一个用于构建用户界面的渐进式框架 构建用户界面&#xff1a;基于数据渲染出用户看到的界面 渐进式&#xff1a;声明式渲染->组件系统->客户端路由->大规模状态管理->构建工具 框架&#xff1a;一套完整的项目解决方案 VUE使用方式&#xff1a; 1.…...

编程日记 2023/9/8 22:01:31

详解初阶数据结构之顺序表（SeqList）——单文件文件实现SeqList的增删查改

目录 一、线性表 二、顺序表 2.1概念及结构 2.2接口实现 2.3动态顺序表的创建 2.3动态顺序表的初始化 2.3.1传值初始化 2.3.2传址初始化 2.4动态顺序表的清空 2.5动态顺序表的扩容 2.6动态顺序表内容的打印 三、动态顺序表的使用 3.1尾插尾删 3.1.1尾插 3.1.2尾删…...

编程日记 2023/9/8 22:00:30

JavaScript中的深拷贝和浅拷贝

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 浅拷贝&#xff08;Shallow Copy&#xff09;&#xff1a;⭐深拷贝&#xff08;Deep Copy&#xff09;&#xff1a;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带…...

编程日记 2023/9/8 21:59:27

树形结构的节点作为查询参数业务

1、业务描述 有一个树结构&#xff0c;存在一个唯一的code和一个父节点的pcode&#xff0c;要求前端传入任意层的code匹配这个code对应的所有子节点对应的数据。 2、解决思路 因为无法判定传入的code到底在那层&#xff0c;so 直接递归调用查询判断&#xff0c;如果有子节点就…...

编程日记 2023/9/8 21:58:26

sql：SQL优化知识点记录（十二）

&#xff08;1&#xff09;读锁案例讲解 加读锁和写锁 查看是否上锁&#xff1a;In_use&#xff1a;变成了1 读写锁对我们数据产生哪些影响&#xff1a; 读锁&#xff1a;是共享锁&#xff0c;其他线程可以查看&#xff1a; 加了读锁&#xff1a;session1不能修改自己&#xf…...

编程日记 2023/9/8 21:57:24

一.使用qt creator 设计显示GUI

一.安装qt creator 二.创建项目 文件-》新建项目 三.使用设计 可以直接使用鼠标拖拽 四.转换为py文件 # from123.py 为导出 py文件的文件名 form.ui 为 qt creator创造的 ui 文件 pyuic5 -o x:\xxx\from123.py form.ui五.显示GUI from PyQt5.QtWidgets import * fr…...

编程日记 2023/9/8 21:56:23

sql：SQL优化知识点记录（八）

&#xff08;1&#xff09;索引面试题分析 所谓索引&#xff1a;就是排好序的快速查找数据结构&#xff0c;排序家查找是索引的两个用途 select * 在where使用到了索引&#xff0c;当select * 有模糊查询%在左边索引会失效 当select * where后面索引的顺序发生变化&#xff0…...

编程日记 2023/9/8 21:55:22

java笔试题，寻找多出来的元素

题目&#xff1a;有两个数组a和b&#xff0c;其中b有一个元素是a没有的&#xff0c;其他元素都相同&#xff0c;请找出b中这个多余的元素。 1 public class Test02 { 2 3 public static void main(String[] args) { 4 int[] a {11, 34, 9, -4, 100, 98}; 5 int[] b {34…...

编程日记 2023/9/8 21:54:20

docker笔记3 Docker常规安装

1.安装tomcat docker hub上面查找tomcat镜像 docker search tomcat 从docker hub上拉取tomcat镜像到本地 docker pull tomcat docker images查看是否有拉取到的tomcat 使用tomcat镜像创建容器实例(也叫运行镜像) docker run -it -p 8080:8080 tomcat -p 小写&#xff0c;主…...

编程日记 2023/9/8 21:53:19

阻止 NTLM后无法登录远程桌面的原因

阻止 NTLM(NT LAN Manager) 攻击设置二 之前郑州景安的服务器被攻击&#xff0c;没过几天阿里云的也被攻击&#xff0c;且都是 NTLM 攻击。 Operating System: Windows Server 2008(R2) Enterprise Service Pack 1 64bit 一、winr 输入 gpedit.msc 二、依次进入&#xff1a;…...

编程日记 2023/9/8 21:52:17

Docker网络功能

基本网络功能 Docker 允许通过外部访问容器或容器互联的方式来提供网络服务。使用docker network子命令来管理Docker网络。 外部访问容器可通过端口映射实现&#xff0c;启动容器时使用-p参数指定映射关系。-p可多次使用来绑定多个端口。使用docker port命令查看当前映射的端…...

编程日记 2023/9/8 21:51:16

如何入门 AI----如何确定学习目标

当确定学习人工智能&#xff08;AI&#xff09;的目标时&#xff0c;可以考虑以下具体的步骤&#xff1a; 兴趣和好奇心&#xff1a; 首先&#xff0c;问问自己&#xff0c;您对哪些 AI 领域感兴趣&#xff1f;是机器学习、自然语言处理、计算机视觉&#xff0c;还是其他领域&a…...

编程日记 2023/9/8 21:50:15

ABAP中加前导零和去前导零方法

文章目录 1 Introduction2 Method 1 Introduction In the sap there are two method for leading zero. We can use function or use the below the method . 2 Method SELECT * INTO TABLE DATA(IT_ITEM)FROM MARA .LOOP AT IT_ITEM ASSIGNING FIELD-SYMBOL(<FS_DATA&g…...

编程日记 2023/9/8 21:49:12

聊聊ShardingSphere是怎么进行sql重写的

序 本文主要研究一下ShardingSphere进行sql重写的原理 prepareStatement org/apache/shardingsphere/driver/jdbc/core/connection/ShardingSphereConnection.java public final class ShardingSphereConnection extends AbstractConnectionAdapter {Overridepublic Prepar…...

编程日记 2023/9/8 21:48:11

软件设计模式系列之二——抽象工厂模式

1 抽象工厂模式的定义 抽象工厂模式是一种创建型设计模式&#xff0c;它提供了一种创建一组相关或相互依赖对象的方式&#xff0c;而无需指定它们的具体类。该模式以一组抽象接口为核心&#xff0c;包括抽象工厂接口和一组抽象产品接口&#xff0c;每个具体工厂类负责创建特定…...

编程日记 2023/9/8 21:47:10

P2719 搞笑世界杯 (期望dp

#include <bits/stdc.h> using namespace std; using VI vector<int>;double dp[2000][2000]; int n; //求dp[2][0] //dp[0][2] //期望dp要从终末态&#xff0c;向起始态转移 //dp[a][b] - > dp[a][b-1] or dp[a-1][b] //dp[a][b] 1/2 * dp[a][b1] 1/2 * dp…...

编程日记 2023/9/8 21:46:08

spring cloud新版本使用loadbalancer替代Ribbon

Nacos 2021 不再集成 Ribbon&#xff0c;建议使用spring cloud loadbalancer 引入 一、简单使用 引入依赖spring cloud loadbalancer <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-loadbalancer<…...

编程日记 2023/9/8 21:45:07

【Git-Exception】Git报错：fatal: unable to auto-detect email address

报错信息&#xff1a; *** Please tell me who you are. Run git config --global user.email “youexample.com” git config –global user.name “Your Name” to set your account’s default identity. Omit --global to set the identity only in this repository. fatal…...

编程日记 2023/9/8 21:44:06

JVM性能优化 —— 类加载器,手动实现类的热加载

一、类加载的机制的层次结构 每个编写的”.java”拓展名类文件都存储着需要执行的程序逻辑&#xff0c;这些”.java”文件经过Java编译器编译成拓展名为”.class”的文件&#xff0c;”.class”文件中保存着Java代码经转换后的虚拟机指令&#xff0c;当需要使用某个类时&#…...

编程日记 2023/9/8 21:43:06

SSH连接MobaXterm

IT常用软件的安装 ssh连接MobaXterm详细使用教程 数据库Navicat安装&#xff1a;https://www.jianshu.com/p/2494e02caf63 java SE安装 https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html windows安装pip https://www.cnblogs.com/NanShan2016/…...

编程日记 2023/9/8 21:42:05

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/10/19 16:25:32

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/10/25 19:33:15

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/11/6 7:05:17

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/10/25 12:40:33

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/10/21 3:16:48

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/10/31 17:33:24

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/10/23 16:56:42

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/11/2 8:56:05