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

VUE学习笔记1__创建VUE实例

news 来源：原创 2025/6/8 2:22:48

核心步骤在这里插入图片描述

<div id="app"><!-- 这里存放渲染逻辑代码 --><h1>{{ msg }}</h1><a href="#">{{count}}</a>
</div><!-- 引入在线的开发版本核心包 -->
<!-- 引入核心包后全局可使用VUE构造函数 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>// 创建VUE实例const app = new Vue({el: '#app',//指定VUE管理的是哪个盒子//通过data提供数据data: {msg: 'helloWorld',count:666}})
</script>

预览效果
在这里插入图片描述
测试下el指定管理的盒子

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title>
</head><body>
<!-- 
创建VUE实例，初始化渲染
1 准备容器，VUE所管理的范围
2 引包
3 创建实例
4 添加配置项->完成渲染
-->
<!-- box1和box2并没有配置到el中，因此{{}}语法不生效 -->
<div class="box1">box1_{{msg}}</div>
<div class="box2">box2_{{count}}</div><div id="app"><!-- 这里存放渲染逻辑代码 --><h1>{{ msg }}</h1><a href="#">{{count}}</a>
</div><!-- 引入在线的开发版本核心包 -->
<!-- 引入核心包后全局可使用VUE构造函数 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>// 创建VUE实例const app = new Vue({el: '#app',//指定VUE管理的是哪个盒子//通过data提供数据data: {msg: 'helloWorld',count:666}})
</script></body>
</html>

预览效果
在这里插入图片描述

总结
在这里插入图片描述
TIP：
1，vscode需要安装open in browser才能使用alt+b预览当前html
2、每次更改代码后需要ctrl+s手动保存
3、vue的{{}}语法，用于拿到data中的数据

相关文章：

VUE学习笔记1__创建VUE实例

核心步骤 <div id"app"><!-- 这里存放渲染逻辑代码 --><h1>{{ msg }}</h1><a href"#">{{count}}</a> </div><!-- 引入在线的开发版本核心包 --> <!-- 引入核心包后全局可使用VUE构造函数 --> <…...

编程日记 2025/6/3 13:11:57

不用PLC和板卡，一台电脑就可以控制伺服

1、前言 大家好&#xff01;我是付工。 EtherCAT是运动控制领域使用最广泛的总线通信协议之一。 如果我们只有一台电脑&#xff0c;能不能直接控制EtherCAT总线伺服呢&#xff1f; 这个是完全可以的。 我们可以在电脑上安装实时运行环境&#xff0c;从而实现对伺服电机的总…...

编程日记 2025/6/4 10:40:41

vue2制作长方形容器，正方形网格散点图，并且等比缩放拖动

需求&#xff1a;有个长方形的容器&#xff0c;但是需要正方形的网格线&#xff0c;网格线是等比缩放的并且可以无线拖动的&#xff0c;并且添加自适应缩放和动态切换&#xff0c;工具是plotly.js,已完成功能如下 1.正方形网格 2.散点分组 3.自定义悬浮框的数据 4.根据窗口大小…...

编程日记 2025/6/4 16:18:34

鸿蒙-页面和自定义组件生命周期

页面生命周期&#xff0c;即被Entry装饰的组件生命周期&#xff0c;提供以下生命周期接口&#xff1a; onPageShow&#xff1a;页面每次显示时触发一次&#xff0c;包括路由过程、应用进入前台等场景。onPageHide&#xff1a;页面每次隐藏时触发一次&#xff0c;包括路由过程、…...

编程日记 2025/6/3 13:12:12

AD域学习

AD域学习 AD域一、什么是AD域二、概念三、疑问四、内容4.1、AD域的功能 五、应用实践 AD域 一、什么是AD域 AD域&#xff08;Active Directory Domain&#xff09;是微软Windows网络中的一个概念&#xff0c;它是一种计算机网络的形式&#xff0c;其中所有用户账户、计算机、…...

编程日记 2025/6/3 13:44:24

leetcode 3066. 超过阈值的最少操作数 II 中等

给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 一次操作中&#xff0c;你将执行&#xff1a; 选择 nums 中最小的两个整数 x 和 y 。将 x 和 y 从 nums 中删除。将 min(x, y) * 2 max(x, y) 添加到数组中的任意位置。 注意&#xff0c;只有当 nums 至少包含两个元…...

编程日记 2025/6/4 0:32:23

使用 WPF 和 C# 绘制覆盖网格的 3D 表面

此示例展示了如何使用 C# 代码和 XAML 绘制覆盖有网格的 3D 表面。示例使用 WPF 和 C# 将纹理应用于三角形展示了如何将纹理应用于三角形。此示例只是使用该技术将包含大网格的位图应用于表面。 在类级别&#xff0c;程序使用以下代码来定义将点的 X 和 Z 坐标映射到 0.0 - 1.…...

编程日记 2025/6/4 0:31:51

大数据学习(34)-mapreduce详解

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…...

编程日记 2025/6/3 13:53:25

源码编译安装httpd 2.4

方法一&#xff1a; 1、下载 Apache 源代码&#xff1a; wget https://archive.apache.org/dist/httpd/httpd-2.4.54.tar 2、解压源代码&#xff1a; tar -zxvf httpd-2.4.54.tar.gz 3、进入源代码目录&#xff1a; cd httpd-2.4.54 4、安装开发工具组&#xff1a; yum…...

编程日记 2025/6/3 22:43:20

1.15寒假作业

web&#xff1a;nss靶场ez_ez_php 打开环境&#xff0c;理解代码 使用个体传参的方法&#xff0c;首先代码会检查file参数的前三个字符是不是php&#xff0c;如果是就输出nice&#xff0c;然后用include函数包含file&#xff0c;绕过不是则输出hacker&#xff0c;如果没有file…...

编程日记 2025/6/4 1:12:35

Java中private和static同时使用会出现什么情况？

引言 这几天在学习单例设计模式&#xff08;后面会出一期包含23种设计模式介绍的博客&#xff09;的时候发现了一段代码 private static Single single; 当时我就在想&#xff0c;这个private和static一起用的话外界想要访问这个成员变量到底是能不能访问到呢&#xff1f;当…...

编程日记 2025/6/4 4:28:51

vue倒计时组件封装,根据每个循环项的倒计时是否结束添加新类名。

1.创建countdown.vue文件&#xff1a; <template><p style"font-size: 10px">{{time}}</p> </template> <script>export default{data () {return {time : ,flag : false}},mounted () {let time setInterval(() > {if (this.fla…...

编程日记 2025/6/3 7:31:25

nvim 打造成可用的IDE(2)

上一个 文章写的太长了&#xff0c; 后来再写东西 就一卡一卡的&#xff0c;所以新开一个。 主要是关于 bufferline的。 之前我的界面是这样的。 这个图标很不舒服有。 后来发现是在这里进行配置。 我也不知道&#xff0c;这个配置 我是从哪 抄过来的。 测试结果&#xff1…...

编程日记 2025/6/4 1:12:19

Spring Boot教程之五十五：Spring Boot Kafka 消费者示例

Spring Boot Kafka 消费者示例 Spring Boot 是 Java 编程语言中最流行和使用最多的框架之一。它是一个基于微服务的框架&#xff0c;使用 Spring Boot 制作生产就绪的应用程序只需很少的时间。Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序&#xff0c;您可…...

编程日记 2025/6/4 1:11:13

目标检测跟踪中的Siamese孪生网络与普通卷积网络(VGG、ResNet)有什么区别？

1、什么是Siamese网络&#xff1f; Siamese网络又叫孪生网络&#xff0c;是一种特殊的神经网络架构&#xff0c;由一对&#xff08;或多对&#xff09;共享参数的子网络组成&#xff0c;用于学习输入样本之间的相似性或关系。最早在 1994 年由 Bromley 等人提出&#xff0c;最…...

编程日记 2025/6/4 1:12:03

AIGC时代 | 探索AI Agent的奥秘：四种设计模式引领未来智能趋势

AIGC时代 | 探索AI Agent的奥秘&#xff1a;四种设计模式引领未来智能趋势 引言 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;AI Agent作为新一代的智能代理&#xff0c;正在引领工作流程的革新。AI Agent&#xff0c;即人工智能代理&#xff0c;是一种…...

编程日记 2025/6/4 16:36:24

PyTorch框架——基于深度学习YOLOv5神经网络水果蔬菜检测识别系统

基于深度学习YOLOv5神经网络水果蔬菜检测识别系统&#xff0c;其能识别的水果蔬菜有15种&#xff0c;# 水果的种类 names: [黑葡萄, 绿葡萄, 樱桃, 西瓜, 龙眼, 香蕉, 芒果, 菠萝, 柚子, 草莓, 苹果, 柑橘, 火龙果, 梨子, 花生, 黄瓜, 土豆, 大蒜, 茄子, 白萝卜, 辣椒, 胡萝卜,…...

编程日记 2025/6/3 7:27:02

【redis】redis-cli命令行工具的使用

redis-cli命令行工具是一个功能强大的Redis客户端&#xff0c;它允许用户与Redis数据库进行交互和管理。 以下是一些常用参数的使用说明&#xff1a; 基本连接参数 -h, --host <hostname>&#xff1a;指定要连接的Redis服务器的主机名或IP地址。如果未指定&#xff0c;…...

编程日记 2025/5/30 19:26:47

阿里云-Centos9-安装Docker-配置镜像拉取加速地址-开机自启

阿里云-Centos9-安装Docker-配置镜像拉取加速地址-开机自启 更新镜像源安装环境配置加速卸载安装pull拉取加速开机自启 更新镜像源 # dnf update&#xff1a;更新所有已安装的软件包。 sudo dnf update -y安装环境 # 安装环境 # yum-utils&#xff1a;提供了管理yum仓库的工具。…...

编程日记 2025/6/3 13:08:49

Grails应用http.server.requests指标数据采集问题排查及解决

问题 遇到的问题&#xff1a;同一个应用&#xff0c;Spring Boot(Java)和Grails(Groovy)混合编程&#xff0c;常规的Spring Controller&#xff0c;可通过Micromete Pushgateway&#xff0c; 采集到http.server.requests指标数据&#xff0c;注意下面的指标名称是点号&#…...

编程日记 2025/6/2 23:11:54

使用 WPF 和 C# 将纹理应用于三角形

此示例展示了如何将纹理应用于三角形，以使场景比覆盖纯色的场景更逼真。以下是为三角形添加纹理的基本步骤。 创建一个MeshGeometry3D对象。像往常一样定义三角形的点和法线。通过向网格的TextureCoordinates集合添加值来设置三角形的纹理坐标。创建一个使用想要显示的纹理的 …...

编程日记 2025/6/4 2:16:19

【vue3项目使用 animate动画效果】

vue3项目使用 animate动画效果 前言一、下载或安装npm 安装 二、引入组件三、复制使用四、完整使用演示总结 前言 提示&#xff1a;干货篇&#xff0c;不废话&#xff0c;点赞收藏&#xff0c;用到会后好找藕~ 点击这里&#xff0c;直接看官网哦 &#x1f449; 官网地址&#…...

编程日记 2025/6/4 2:16:51

C#中颜色的秘密

颜色的秘密: 颜色Color是一个调色板, 所有颜色都是由透明度Alpha,红Red,绿Green,蓝Blue按不同比例调色混合而成,如果不考虑透明度Alpha,颜色共有256*256*25616777216种 ColorARGB A,R,G,B都为byte型[8位],因此可以用整体的32个整数[Int32]来表示一种颜色 Color 所属命名空…...

编程日记 2025/6/4 2:17:23

Spring AI 从入门到实践

​Spring AI 从入门到实践 1.什么是Spring AI 2.使用Spring Boot&Spring AI快速构建AI应用程序 3.ChatClient&Chat Model简化与AI模型的交互 4.Spring AI Prompt:与大模型进行有效沟通 5.结构化输出大模型响应 6.实战:AI聊天机器人 Ben技术站关注Java技术&#x…...

编程日记 2025/6/4 2:16:35

服务器一次性部署One API + ChatGPT-Next-Web

服务器一次性部署One API ChatGPT-Next-Web One API ChatGPT-Next-Web 介绍One APIChatGPT-Next-Web docker-compose 部署One API ChatGPT-Next-WebOpen API docker-compose 配置ChatGPT-Next-Web docker-compose 配置docker-compose 启动容器 后续配置 同步发布在个人笔记服…...

编程日记 2025/6/4 16:20:39

milvus过滤功能

数据格式： [{"id": 0, "vector": [0.3580376395471989, -0.6023495712049978, 0.18414012509913835, -0.26286205330961354, 0.9029438446296592], "color": "pink_8682", "likes": 165},{"id": 1, "vecto…...

编程日记 2025/6/3 7:44:31

JavaScript系列（25）--性能优化技术详解

JavaScript性能优化技术详解 ⚡ 今天&#xff0c;让我们深入探讨JavaScript的性能优化技术。掌握这些技术对于构建高性能的JavaScript应用至关重要。 性能优化基础 &#x1f31f; &#x1f4a1; 小知识&#xff1a;JavaScript性能优化涉及多个方面&#xff0c;包括代码执行效…...

编程日记 2025/6/2 13:22:20

基于vite+vue3+mapbox-gl从零搭建一个项目

下面是基于 Vite、Vue 3 和 Mapbox GL 从零搭建一个项目的完整步骤&#xff0c;包括环境搭建、依赖安装、配置和代码示例。 1. 初始化项目 首先&#xff0c;使用 Vite 快速创建一个 Vue 3 项目&#xff1a; npm create vuelatest vue3-mapboxgl --template vue cd vue3-mapbo…...

编程日记 2025/6/3 0:42:55

驱动开发系列33 - Linux Graphics mesa Intel驱动介绍

一：概述 mesa 中的 Intel 驱动体系是为支持 Intel GPU 提供图形 API 的硬件实现部分，主要包括 OpenGL、Vulkan等图形接口，Intel驱动实现整体上分为四层： 第一层：API 层， 实现 OpenGL 和 Vulkan 接口, src/mesa/main、src/vulkan。 第二层：驱动层，实现 OpenGL 和 Vulkan…...

编程日记 2025/6/3 7:44:15

【git】-3 github创建远程仓库,上传自己的项目，下载别人的项目

一、如何使用Github 1、创建远程仓库 2、使用github拉取/推送代码 克隆仓库 向远程仓库推送代码-git push 二、上传我们自己的项目到github 方法一&#xff1a;直接上传 方法二&#xff1a;使用git命令 方法三&#xff1a; 将仓库拉取到本地上传 三、下载别人的项目 …...

编程日记 2025/6/3 7:45:03

[Qt]常用控件介绍-多元素控件-QListWidget、QTableWidget、QQTreeWidget

目录 1.多元素控件介绍 2.ListWidget控件 属性 核心方法 核心信号 细节 Demo&#xff1a;编辑日程 3.TableWidget控件 核心方法 QTableWidgetItem核心信号 QTableWidgetItem核心方法 细节 Demo&#xff1a;编辑学生信息 4.TreeWidget控件 核心方法 核心信号…...

编程日记 2025/6/3 7:45:22

_STM32关于CPU超频的参考_HAL

MCU: STM32F407VET6 官方最高稳定频率&#xff1a;168MHz 工具&#xff1a;STM32CubeMX 本篇仅仅只是提供超频&#xff08;默认指的是主频&#xff09;的简单方法&#xff0c;并未涉及STM32超频极限等问题。原理很简单&#xff0c;通过设置锁相环的倍频系数达到不同的频率&am…...

编程日记 2025/6/3 0:22:21

Flink链接Kafka

一、基于 Flink 的 Kafka 消息生产者 Kafka 生产者的创建与配置&#xff1a; 代码通过 FlinkKafkaProducer 创建 Kafka 生产者&#xff0c;用于向 Kafka 主题发送消息。Flink 执行环境的配置&#xff1a; 配置了 Flink 的检查点机制&#xff0c;确保消息的可靠性&#xff0c;支…...

编程日记 2025/6/3 7:44:47

Maven 配置本地仓库

步骤 1&#xff1a;修改 Maven 的 settings.xml 文件 找到你的 Maven 配置文件 settings.xml。 Windows: C:\Users\<你的用户名>\.m2\settings.xmlLinux/macOS: ~/.m2/settings.xml 打开 settings.xml 文件&#xff0c;找到 <localRepository> 标签。如果没有该标…...

编程日记 2025/6/3 7:43:43

【PHP】双方接口通信校验服务

请求方 使用 ApiAuthService::buildUrl($domain, [terminal => 1, ts => time()]); //http://域名/adminapi/login/platformLogin?sign=F7FE8A150DEC18BE8A71C5059742C81A&terminal=1&ts=1736904841接收方 $getParams = $this->request->get();$validate…...

编程日记 2025/5/30 17:00:06

mac 安装docker

1、下载docker 进入 /Applications/Docker.app/Contents/MacOS/Docker Desktop.app/Contents/Resources目录 把app.asar 文件备份 将下载的中文包复制进去。修改成一样的名字 [汉化包下载地址](https://github.com/asxez/DockerDesktop-CN)...

编程日记 2025/6/3 14:55:16

ANSYS Fluent学习笔记（七）求解器四部分

16.亚松弛因子 Controls面板里面设置&#xff0c;它能够稳定计算的过程。如果采用常规的迭代算法可能结果就会发生振荡的情况。采用亚松驰因子可以有助于残差的稳定。 他的取值范围是0-1&#xff0c;0代表没有亚松驰&#xff0c;1表示物理量变化很快&#xff0c;一般情况下取…...

编程日记 2025/6/3 14:55:01

【微服务】面试 3、 服务监控 SkyWalking

微服务监控的原因 问题定位&#xff1a;在微服务架构中&#xff0c;客户端&#xff08;如 PC 端、APP 端、小程序等&#xff09;请求后台服务需经过网关再路由到各个微服务&#xff0c;服务间可能存在多链路调用。当某一微服务挂掉时&#xff0c;在复杂的调用链路中难以迅速确定…...

编程日记 2025/6/3 16:00:53

llamafactory使用8张昇腾910b算力卡lora微调训练qwen2-72b大模型

说明 我需要在昇腾服务器上对Qwen2-72B大模型进行lora微调&#xff0c;改变其自我认知。 我的环境下是8张910B1卡。显存约512GB。 准备&#xff1a;安装llamafactory 请参考官方方法安装llamafactory&#xff1a;https://github.com/hiyouga/LLaMA-Factory 特别强调下&…...

编程日记 2025/6/3 14:56:39

在服务器上增加新网段IP的路由配置

在服务器上增加新网段IP的路由配置 前提条件步骤一：检查当前路由表步骤二：添加新路由步骤三：验证新路由步骤四：持久化路由配置脚本示例结论在网络管理中，路由配置是一项基本且重要的任务。它决定了数据包在网络中的传输路径。本文将详细介绍如何在服务器上增加新的路由配置…...

编程日记 2025/6/2 23:21:15

2Spark Core

2Spark Core 1.RDD 详解1) 为什么要有 RDD?2) RDD 是什么?3) RDD 主要属性 2.RDD-API1) RDD 的创建方式2) RDD 的算子分类3) Transformation 转换算子4) Action 动作算子 3. RDD 的持久化/缓存4. RDD 容错机制 Checkpoint5. RDD 依赖关系1) 宽窄依赖2) 为什么要设计宽窄依赖 …...

编程日记 2025/6/3 14:55:32

【ANGULAR网站开发】初始环境搭建（SpringBoot）

1. 初始化SpringBoot 1.1 创建SpringBoot项目 清理spring-boot-starter-test&#xff0c;有需要的可以留着 1.2 application.properties 将application.properties改为yaml&#xff0c;个人习惯问题&#xff0c;顺便设置端口8888&#xff0c;和前端设置的一样 server:por…...

编程日记 2025/6/3 14:56:04

Vue 页面布局组件-Vuetify、Semantic

在现代 Web 开发中&#xff0c;用户体验是关键&#xff0c;尤其是当我们利用 Vue.js 框架构建用户友好的界面时。今天&#xff0c;我们将深入探讨如何使用 Vuetify 和 Semantic UI 来创建高效、美观的页面布局组件。通过这项技术&#xff0c;你将能够为用户呈现一个流畅的交互体…...

编程日记 2025/6/3 14:56:55

小程序组件 —— 31 事件系统 - 事件绑定和事件对象

小程序中绑定事件和网页开发中绑定事件几乎一致&#xff0c;只不过在小程序不能通过 on 的方式绑定事件&#xff0c;也没有 click 等事件&#xff0c;小程序中绑定事件使用 bind 方法&#xff0c;click 事件也需要使用 tap 事件来进行代替&#xff0c;绑定事件的方式有两种&…...

编程日记 2025/6/3 14:55:48

23种设计模式

23种设计模式 创建型模式&#xff08;Creational Patterns&#xff09;结构型模式&#xff08;Structural Patterns&#xff09;行为型模式&#xff08;Behavioral Patterns&#xff09;总结 Java中的设计模式是解决特定问题的通用、可复用的解决方案。它们不是完成代码&#x…...

编程日记 2025/6/3 0:44:21

SIBR详细介绍：基于图像的渲染系统及3DGS实例展示【3DGS实验复现】

文章目录 什么是 SIBR&#xff1f;IBR 技术的优势SIBR 的核心组件SIBR 的应用场景如何使用 SIBR&#xff1f;3D Gaussian Splatting 实验实例展示1. 什么是 3D Gaussian Splatting (3DGS)&#xff1f;2. 实验运行环境步骤&#xff1a;简要说明如何使用 3DGS 的两种渲染方式 3. …...

编程日记 2025/5/31 23:08:28

每天五分钟深度学习框架pytorch：基于vgg块搭建VGG卷积神经网络

本文重点 前面我们使用pytorch搭建了vgg块，本文我们使用vgg块搭建卷积神经网络VGG16，我们先来看一下vgg16的模型结构是什么样的： 搭建vgg16 import torch from torch import nn def vgg_block(num_convs,in_channels,out_channels): net=[nn.Conv2d(in_channels,out_channe…...

编程日记 2025/6/4 12:23:26

【gin】中间件使用之jwt身份认证和Cors跨域，go案例

Gin-3 中间件编程及 JWT 身份认证 1. Gin 中间件概述 中间件是处理 HTTP 请求的函数&#xff0c;可以在请求到达路由处理函数之前或之后对请求进行处理。 在 Gin 框架中&#xff0c;中间件常用于处理日志记录、身份验证、权限控制等功能。 router : gin.Default() router.Us…...

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

探索 Vue.js 组件开发的新边界：动态表单生成技术

随着前端技术的飞速发展&#xff0c;Vue.js 作为一款灵活、易用且性能优异的框架&#xff0c;一直是开发者心中的不二之选。本文将深入介绍 Vue.js 组件开发中的最新技术之一&#xff1a;动态表单生成技术&#xff0c;并通过具体实例展示如何实现这一高效技术。 为什么选择动态…...

编程日记 2025/5/30 16:58:56

Android 调用系统服务接口获取屏幕投影(需要android.uid.system)

媒体投影 借助 Android 5&#xff08;API 级别 21&#xff09;中引入的 android.media.projection API&#xff0c;您可以将设备屏幕中的内容截取为可播放、录制或投屏到其他设备&#xff08;如电视&#xff09;的媒体流。 Android 14&#xff08;API 级别 34&#xff09;引入…...

编程日记 2025/6/3 18:43:02