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

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

news 2025/6/2 4:05:22

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

<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

CppCon 2014 学习第1天:An SQL library worthy of modern C++

sqlpp11 — 现代 C 应用值得拥有的 SQL 库 template<typename T> struct _member_t {T feature; };你提到的是一个 C 中的“成员模板&#xff08;Member Template&#xff09;”&#xff0c;我们来一步步理解&#xff1a; 基本代码分析&#xff1a; template<typena…...

编程新知 2025/6/2 3:59:47

NLP学习路线图（十三）：正则表达式

在自然语言处理&#xff08;NLP&#xff09;的浩瀚宇宙中&#xff0c;原始文本数据如同未经雕琢的璞玉。而文本预处理&#xff0c;尤其是其中至关重要的正则表达式技术&#xff0c;正是将这块璞玉转化为精美玉器的核心工具集。本文将深入探讨正则表达式在NLP文本预处理中的原理…...

编程新知 2025/6/2 3:17:47

SQL（Database Modifications）

目录 Insertion Specifying Attributes in INSERT Adding Default Values&#xff08;缺省值&#xff09; Inserting Many Tuples Creating a Table Using the SELECT INTO Statement Deletion Example: Deletion Semantics of Deletion Updates Example: Update Sev…...

编程新知 2025/6/2 3:07:29

深兰科技董事长陈海波受邀出席2025苏商高质量发展(常州)峰会，共话AI驱动产业升级

5月29日&#xff0c;2025苏商高质量发展峰会在常州隆重开幕。本次峰会聚焦新质生产力培育与产业创新转型&#xff0c;汇聚了众多江苏省内知名企业家、专家学者及政府代表。深兰科技创始人、董事长陈海波作为人工智能领域的领军企业代表&#xff0c;受邀出席盛会并参与重要活动环…...

编程新知 2025/6/2 2:09:55

图标变白，开始菜单栏无法打开程序（以jupyter为例）

不知道是本人删了一些东西导致的还是什么原因&#xff0c;总之现在本人的jupyter只能通过命令行打开&#xff0c;以往我是从开始菜单栏打开。琢磨了一段时间&#xff0c;发现是.ico文件没有了。重新在网上下载图片&#xff0c;用网站图片转 ico 图标 - 锤子在线工具 转换一下格…...

编程新知 2025/6/2 1:53:06

实时同步缓存，与阶段性同步缓存——补充理解《补充》

根据 Redis 缓存的数据与 DBMS 中数据的同步性划分&#xff0c;缓存一般可划分为两类&#xff1a;实时同步缓存&#xff0c;与阶段性同步缓存。 实时同步缓存是指&#xff0c;DBMS 中数据更新后&#xff0c;Redis 缓存中的存放的相关数据会被立即清 除&#xff0c;以促使再有对…...

编程新知 2025/6/1 22:57:48

Eclipse 插件开发 5.3 编辑器 监听输入

Eclipse 插件开发 5.3 编辑器监 听输入 1 插件配置2 添加监听3 查看效果 Manifest-Version: 1.0 Bundle-ManifestVersion: 2 Bundle-Name: Click1 Bundle-SymbolicName: com.xu.click1;singleton:true Bundle-Version: 1.0.0 Bundle-Activator: com.xu.click1.Activator Bundle…...

编程新知 2025/6/1 21:04:27

[春秋云镜] CVE-2023-23752 writeup

首先奉上大佬的wp表示尊敬&#xff1a;&#xff08;很详细&#xff09;[ 漏洞复现篇 ] Joomla未授权访问Rest API漏洞(CVE-2023-23752)_joomla未授权访问漏洞(cve-2023-23752)-CSDN博客 知识点 Joomla版本为4.0.0 到 4.2.7 存在未授权访问漏洞 Joomla是一套全球知名的内容管理…...

编程新知 2025/6/1 20:32:06

LeetCode 算 法 实 战 - - - 移 除 链 表 元 素、反 转 链 表

LeetCode 算 法 实 战 - - - 移 除 链 表 元 素、反 转 链 表 第 一 题 - - - 移 除 链 表 元 素方 法 一 - - - 原 地 删 除方 法 二 - - - 双 指 针方 法 三 - - - 尾 插 第 二 题 - - - 反 转 链 表方 法 一 - - - 迭 代方 法 二 - - - 采 用 头 插 创 建 新 链 表 总 结 &a…...

编程新知 2025/6/1 19:17:46

KWIC—Implicit Invocation

KWIC—Implicit Invocation ✏️ KWIC—Implicit Invocation 文章目录 KWIC—Implicit Invocation&#x1f4dd;KWIC—Implicit Invocation&#x1f9e9;KWIC&#x1f9e9;核心组件&#x1f9e9;ImplementationScheme⚖️ 隐式调用 vs 显式调用对比 &#x1f31f; 总结 &#x…...

编程新知 2025/6/1 19:09:24