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

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

news 2026/2/9 22:39:50

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

<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/1/16 6:24:20

Inxpect毫米波安全雷达:精准检测与动态保护,工业自动化可靠选择

Inxpect毫米波安全雷达具备“精准检测、动态区域保护、环境适应性”三大核心功能。在工业自动化和机器人系统里&#xff0c;这些功能发挥着重要作用,有助于提升安全性与效率。Inxpect雷达运用毫米波技术&#xff0c;在诸如存在灰尘、烟雾或碎屑等复杂环境中&#xff0c;也能保持…...

编程日记 2025/1/16 6:22:19

基于禁忌搜索算法的TSP问题最优路径搜索matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于禁忌搜索算法的TSP问题最优路径搜索&#xff0c;旅行商问题&#xff08;TSP&#xff09;是一个经典的组合优化问题。其起源可以追溯到 19 世纪初&#xff0c;…...

编程日记 2025/1/16 6:21:18

C51交通控制系统的设计与实现

实验要求&#xff1a; 本题目拟设计一个工作在十字路口的交通信号灯控制系统&#xff0c;设东西方向为主干道A&#xff0c;南北方向为辅助干道B。要求&#xff1a;&#xff08;1&#xff09;用发光二极管模拟交通灯信号&#xff1b;&#xff08;2&#xff09;灵活控制主、辅干…...

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

深度学习的超参数

1. 引言 1.1 什么是超参数&#xff1f; 在机器学习和深度学习中&#xff0c;超参数&#xff08;Hyperparameter&#xff09; 是在模型训练前由开发者设置的参数&#xff0c;这些参数决定了模型的训练过程和模型的结构。例如&#xff1a; 神经网络的层数和每层神经元的数量。…...

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

网络安全面试题及经验分享

本文内容是i春秋论坛面向专业爱好者征集的关于2023年面试题目和答案解析&#xff0c;题目是真实的面试经历分享&#xff0c;具有很高的参考价值。 shiro反序列化漏洞的原理 Shiro反序列化漏洞的原理是攻击者通过精心构造恶意序列化数据&#xff0c;使得在反序列化过程中能够执…...

编程日记 2025/1/16 6:18:10

【Golang 面试题】每日 3 题（三十一）

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…...

编程日记 2025/1/16 6:17:08

微服务架构：挑战与机遇并存

微服务架构在提升系统灵活性、可扩展性和容错性的同时&#xff0c;也引入了一系列挑战。微服务带来的挑战主要有以下几点&#xff1a; 1. 系统复杂性增加&#xff1a;想象一下&#xff0c;你原本有一个大厨房&#xff08;单体应用&#xff09;&#xff0c;里面有几个大厨&…...

编程日记 2025/1/16 6:16:06

Vue语音播报功能

使用Web Speech API的SpeechSynthesis接口来实现文本转语音 Web Speech API可能不在所有浏览器中都能完美支持 特别是旧浏览器 在生产环境中&#xff0c;你可能需要添加功能检测和后备方案。<template><div><textarea v-model"text" placeholder&quo…...

编程日记 2025/1/16 6:15:05

【Java设计模式-4】策略模式，消灭if/else迷宫的利器

各位Java编程小伙伴们&#xff01;今天咱们要一起探索一个超级厉害的Java设计模式——策略模式&#xff0c;它就像是一把神奇的魔法剑&#xff0c;专门用来斩断那些让我们代码变得乱糟糟的if/else语句迷宫&#xff01; 一、if/else的烦恼 在编程的奇妙世界里&#xff0c;我们…...

编程日记 2025/1/16 6:13:03

citrix netscaler13.1 重写负载均衡响应头(基础版)

在 Citrix NetScaler 13.1 中&#xff0c;Rewrite Actions 用于对负载均衡响应进行修改&#xff0c;包括替换、删除和插入 HTTP 响应头。这些操作可以通过自定义策略来完成&#xff0c;帮助你根据需求调整请求内容。以下是三种常见的操作&#xff1a; 1. Replace (替换响应头)…...

编程日记 2025/1/16 6:12:02

【AI学习】地平线首席架构师苏箐关于自动驾驶的演讲

在地平线智驾科技畅想日上&#xff0c;地平线副总裁兼首席架构师苏箐&#xff08;前华为智驾负责人&#xff09;做了即兴演讲&#xff0c;以下是其演讲的主要内容&#xff1a; 对自动驾驶行业的看法 自动驾驶的难度与挑战&#xff1a;苏箐表示自动驾驶非常难&#xff0c;他做自…...

编程日记 2025/1/16 6:10:00

QILSTE H11-D212HRTCG/5M高亮红绿双色LED灯珠 发光二极管LED

型号&#xff1a;H11-D212HRTCG/5M&#xff0c;一款由QILSTE&#xff08;HongKong&#xff09;Technology Co., Ltd精心打造的高亮度红绿双色LED产品&#xff0c;其尺寸仅为2.01.251.1 mm&#xff0c;却蕴含着强大的光电特性。这款产品采用透明平面胶体封装&#xff0c;不仅外观…...

编程日记 2025/1/16 6:08:52

2️⃣java基础进阶——多线程、并发与线程池的基本使用

一、概念介绍 什么是线程&#xff0c;什么是进程&#xff0c;两者有什么关系&#xff1f; 进程是操作系统资源分配的独立单位&#xff1b;而线程是操作系统能够进行调度和分派的最小单位&#xff1b;线程包含于进程之中&#xff0c;是进程中的实际运作单位。 例如&#xff1a…...

编程日记 2025/1/16 6:06:50

RAG多路召回

什么是多路召回&#xff1f; 多路召回&#xff08;Multi-Route Retrieval&#xff09; 是指在信息检索系统中&#xff0c;为了提升检索的全面性和准确性&#xff0c;通过多条不同的检索路径或不同的检索策略来获取信息的技术。多路召回的核心思想是&#xff0c;单一的检索路径…...

编程日记 2025/1/16 6:05:49

复杂 C++ 项目堆栈保留以及 eBPF 性能分析

在构建和维护复杂的 C 项目时&#xff0c;性能优化和内存管理是至关重要的。当我们面对性能瓶颈或内存泄露时&#xff0c;可以使用eBPF&#xff08;Extended Berkeley Packet Filter&#xff09;和 BCC&#xff08;BPF Compiler Collection&#xff09;工具来分析。如我们在Red…...

编程日记 2025/1/16 6:04:47

网安——计算机网络基础

一、计算机网络概述 1、Internet网相关概念及发展 网络&#xff08;Network&#xff09;有若干结点&#xff08;Node&#xff09;和连接这些结点的链路&#xff08;link&#xff09;所组成&#xff0c;在网络中的结点可以是计算机、集线器、交换机或路由器等多个网络还可以通…...

编程日记 2025/1/16 6:03:41

ZCC1923替代BOS1921Piezo Haptic Driver with Digital Front End

FEATURES • High-Voltage Low Power Piezo Driver o Drive 100nF at 190VPP and 250Hz with 490mW o Drives Capacitive Loads up to 1000nF o Energy Recovery o Differential Output o Small Solution Footprint, QFN & WLCSP • Low Quiescent Current: SHUTDOWN; …...

编程日记 2025/1/16 6:02:39

Kutools for Excel 简体中文版 - 官方正版授权

Kutools for Excel 是一款超棒的 Excel 插件&#xff0c;就像给你的 Excel 加了个超能助手。它有 300 多种实用功能&#xff0c;现在还有 AI 帮忙&#xff0c;能把复杂的任务变简单&#xff0c;重复的事儿也能自动搞定&#xff0c;不管是新手还是老手都能用得顺手。有了它&…...

编程日记 2025/1/16 6:01:33

PostgreSQL和MySQL有什么区别？

一、数据存储与管理方面 数据类型支持 PostgreSQL&#xff1a; 提供了非常丰富的数据类型。除了基本的整数、浮点数、字符、日期等类型外&#xff0c;对复杂数据类型的支持很出色。例如&#xff0c;它原生支持数组&#xff08;Array&#xff09;类型&#xff0c;可以方便地存储…...

编程日记 2025/1/16 5:59:25

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2026/2/7 0:48:56

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2026/2/2 3:06:53

Java编程之桥接模式

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

编程新知 2026/1/23 10:28:48

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/12/11 0:27:15

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2026/2/2 11:58:16

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2026/2/9 9:22:40

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

编程新知 2026/2/6 5:43:28

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...

编程新知 2026/2/9 4:24:08

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...

编程新知 2026/2/4 13:49:32