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

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

news 2026/4/2 2:20:49

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

<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

如何解决Tokio项目中Windows平台TCP性能问题的完整指南

如何解决Tokio项目中Windows平台TCP性能问题的完整指南 【免费下载链接】tokio A runtime for writing reliable asynchronous applications with Rust. Provides I/O, networking, scheduling, timers, ... 项目地址: https://gitcode.com/GitHub_Trending/to/tokio To…...

编程新知 2026/4/2 0:59:55

STM32与LoRa实现高压线缆智能监控方案

1. 项目概述高压线缆间隔棒监控装置是一个典型的工业物联网应用案例&#xff0c;它完美展现了如何将嵌入式系统与无线通信技术结合解决传统行业的痛点问题。作为一名在电力监控领域工作多年的工程师&#xff0c;我深知人工巡检高压线路的种种不便——不仅效率低下&#xff0c;而…...

编程新知 2026/4/2 0:22:55

新手福音：用快马平台生成wsl安装ubuntu图文教程，轻松入门linux开发

最近在学Linux开发&#xff0c;发现Windows Subsystem for Linux&#xff08;WSL&#xff09;真是个神器&#xff0c;特别是搭配Ubuntu使用&#xff0c;既保留了Windows的便利性&#xff0c;又能体验原汁原味的Linux环境。不过刚开始安装配置时踩了不少坑&#xff0c;后来用Ins…...

编程新知 2026/4/1 23:32:19

Fiji图像处理软件更新故障排查指南：当科学工具遇到“升级烦恼“

Fiji图像处理软件更新故障排查指南&#xff1a;当科学工具遇到"升级烦恼" 【免费下载链接】fiji A "batteries-included" distribution of ImageJ :battery: 项目地址: https://gitcode.com/gh_mirrors/fi/fiji Fiji作为生物图像分析领域的瑞士军刀…...

编程新知 2026/4/1 22:59:45

快马AI助力：十分钟用Python搭建免费股票行情网站原型

最近想验证一个股票行情网站的原型&#xff0c;但作为独立开发者&#xff0c;从零搭建前后端实在太耗时。尝试用PythonFlask快速实现&#xff0c;结合InsCode(快马)平台的AI辅助功能&#xff0c;居然十分钟就完成了基础框架。记录下关键实现思路&#xff1a; 数据获取层设计 选…...

编程新知 2026/4/1 22:35:31

解决Python ssl模块与系统OpenSSL版本不一致的编译指南

1. 为什么Python的ssl模块会与系统OpenSSL版本不一致&#xff1f; 很多开发者都遇到过这样的困惑&#xff1a;明明系统已经升级了OpenSSL&#xff0c;为什么Python的ssl模块还在使用旧版本&#xff1f;这个问题其实源于Python的编译机制。Python在编译安装时&#xff0c;会将当…...

编程新知 2026/4/1 22:25:21

2026 年提词器 App 的新方向：AI 改稿 + 语速匹配，正在重新定义“读稿“这件事

核心结论&#xff1a;2026 年提词器 App 已经从"滚字幕"进化到"懂你怎么说"。AI 语速匹配、智能跟读、违禁词检测正在成为新标配&#xff0c;而在综合体验上&#xff0c;拍摄提词器是目前把这些能力整合得最完整的一款产品。一、提词器 App 正在经历一次代…...

编程新知 2026/4/1 21:38:33

OpenShamrock：零基础搭建QQ智能交互系统完全指南

OpenShamrock&#xff1a;零基础搭建QQ智能交互系统完全指南 【免费下载链接】OpenShamrock A Bot Framework based on Xposed with OneBot11 项目地址: https://gitcode.com/gh_mirrors/op/OpenShamrock 核心价值解析&#xff1a;为什么选择OpenShamrock构建QQ机器人&a…...

编程新知 2026/4/1 20:52:04

ABB机器人Profinet通信实战：如何正确传输Real类型数据（附完整代码示例）

ABB机器人Profinet通信实战&#xff1a;Real类型数据的高效传输与解析 在工业自动化领域&#xff0c;ABB机器人与PLC之间的实时数据交互是产线高效运行的关键。Profinet作为工业以太网标准协议&#xff0c;其通信性能直接影响着生产节拍和系统稳定性。而Real类型数据的传输&…...

编程新知 2026/4/1 20:50:04

避开这些坑！Mapbox图层管理实战：动态加载GeoJSON数据的正确姿势

Mapbox高级图层管理实战&#xff1a;GeoJSON动态加载与性能优化全解析 当处理省级以上GIS数据可视化时&#xff0c;Mapbox的图层管理能力直接决定了应用的流畅度和用户体验。许多开发者在使用GeoJSON数据源时&#xff0c;常遇到内存泄漏、渲染卡顿、交互延迟等问题。本文将深入…...

编程新知 2026/4/1 20:13:43