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

Vue实现简单小案例

news 2026/3/29 6:17:13

一、创建文件夹

二、引用vue.js

<script src="../js/vue.js"></script>

三、准备一个容器

<div id="app"><h1>Hello,{{name}}</h1>
</div>

四、创建实例

<script>new Vue({el:"#app",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串data:{  //data中用于存储数据，数据供el所指定的容器去使用name:'小田'}})
</script>

五、效果图

六、整体代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>tian</title><script src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="app"><h1>Hello,{{name}}</h1>
</div><script>//创建Vue实例new Vue({el:"#app",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串data:{  //data中用于存储数据，数据供el所指定的容器去使用name:'小田'}})
</script>
</body>
</html>

七、总结

  1. 想让vue工作，必须创建一个vue实例，且传入一个配置对象
  2. app容器代码依然符合html规范
  3. app容器代码被称为Vue模板

相关文章：

Vue实现简单小案例

一、创建文件夹 二、引用vue.js <script src"../js/vue.js"></script> 三、准备一个容器 <div id"app"><h1>Hello,{{name}}</h1> </div> 四、创建实例 <script>new Vue({el:"#app", //el用于指…...

编程日记 2024/7/29 12:26:07

【MATLAB APP】建立独立桌面APP

背景&#xff1a;已有MATLAB APP的.mlapp文件&#xff0c;但客户提出需要可以直接使用的exe文件。 要求&#xff1a;点开即用&#xff0c;无需下载MATLAB。使用者无法修改APP的代码。 一、环境配置 APP创建者&#xff1a;安装MATLAB R2023a&#xff0c;配置Application Compile…...

编程日记 2024/7/29 12:25:06

Spring的优缺点？

Spring的优缺点 直接回答相关的Spring的特点&#xff1a; IOC AOP 事务 简化开发&#xff1a; 容易集成JDBCTemplateRestTemplate&#xff08;接口远程调用&#xff09;邮件发送相关异步消息请求支持 更加深入就讲源码了 优点&#xff1a; 方便解耦&#xff0c;简化开发…...

编程日记 2024/7/29 12:24:05

第一百八十三节 Java IO教程 - Java目录事件、Java异步I/O

Java IO教程 - Java目录事件 当文件系统中的对象被修改时&#xff0c;我们可以监听watch服务以获取警报。 java.nio.file包中的以下类和接口提供watch服务。 Watchable接口WatchService接口WatchKey接口WatchEvent接口WatchEvent.Kind接口StandardWatchEventKinds类 可监视对…...

编程日记 2024/7/29 12:23:04

【设计模式】（万字总结）深入理解Java中的创建型设计模式

1. 前言 在软件开发的世界里&#xff0c;设计模式是一种被广泛接受并应用的解决方案。它们不仅仅是代码的设计&#xff0c;更是对问题的思考和解决的方法论。在Java开发中&#xff0c;特别是在面向对象的编程中&#xff0c;设计模式尤为重要。创建型设计模式&#xff0c;作为设…...

编程日记 2024/7/29 12:22:03

【全面讲解下Docker in Docker的原理与实践】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者，CSDN实力新星，CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共同学习、交流进步！ 👉目录 👉前言👉原理👉实践👉安全和最佳实践👉前言 🦛…...

编程日记 2024/7/29 12:21:02

Android Settings增加多击事件，增加开发者模式打开难度

软件平台&#xff1a;Android11 硬件平台&#xff1a;QCS6125 需求来源&#xff1a;用户通过系统异常崩溃&#xff0c;进入原生Settings页面&#xff0c;通过默认的多击版本号方式打开开发者模式&#xff0c;继而打开adb调试开关&#xff0c;安装三方apk。 对付这种需求本来有…...

编程日记 2024/7/29 12:20:01

【相机与图像】1. 相机模型的介绍：内参、外参、畸变参数

想着整理下相机模型&#xff08;内容上参考 slam十四讲&#xff09;、相机的内外参标定。方便自己的使用和回顾。 不过&#xff0c;内外参标定啥时候记录随缘 -_- 概述 【构建相机模型】 相机将三位世界中的坐标点&#xff08;单位为米&#xff09;映射到二维图像平面&#xff…...

编程日记 2024/7/29 12:17:59

Linux内核netlink机制 - 用户空间和内核空间数据传输

简介&#xff1a; Netlink socket 是一种Linux特有的socket&#xff0c;用于实现用户空间与内核空间通信的一种特殊的进程间通信方式(IPC) &#xff0c;也是网络应用程序与内核通信的最常用的接口。 Netlink 是一种在内核和用户应用间进行双向数据传输的非常好的方式&a…...

编程日记 2024/7/29 12:16:58

Node.js自动化处理TOML文件

在软件开发过程中&#xff0c;自动化处理配置文件是一种常见的需求。TOML&#xff08;Tom’s Obvious, Minimal Language&#xff09;是一种用于配置文件的简单易读的格式。本文将展示如何使用Node.js和一些流行的库来自动化读取、修改并写入TOML文件。 1. 准备工作 在开始之前…...

编程日记 2024/7/29 12:12:55

Spring boot 后端向前端发送日期时间发现少了8小时

问题 数据库 后端的控制台输出 前端控制台输出 可以发现少了8小时 问题 springboot 向前端响应数据是默认 Json 格式&#xff0c;所以会有类型转换&#xff0c;springboot 就通过 Jackson 来对 data 类型数据进行转换&#xff0c;但是Jackson 类型的时区是 GMT&#xff0c;与…...

编程日记 2024/7/29 12:11:54

MySQL数据库（基础篇）

&#x1f30f;个人博客主页&#xff1a;心.c 前言&#xff1a;今天讲解的是MySQL的详细知识点的&#xff0c;希望大家可以收货满满&#xff0c;话不多说&#xff0c;直接开始搞&#xff01; &#x1f525;&#x1f525;&#x1f525;文章专题&#xff1a;MySQL &#x1f63d;感…...

编程日记 2024/7/29 12:10:53

ffmpeg ffplay.c 源码分析二：数据读取线程

本章主要是分析 数据读取线程read_thread 中的工作。如上图红色框框的部分 从ffplay框架分析我们可以看到&#xff0c;ffplay有专⻔的线程read_thread()读取数据&#xff0c; 且在调⽤av_read_frame 读取数据包之前需要做&#xff1a; 1.例如打开⽂件&#xff0c; 2.查找配置解…...

编程日记 2024/7/29 12:08:51

国科大作业考试资料《人工智能原理与算法》2024新编-第十三次作业整理

1、假设我们从决策树生成了一个训练集&#xff0c;然后将决策树学习应用于该训练集。当训练集的大小趋于无穷时&#xff0c;学习算法将最终返回正确的决策树吗&#xff1f;为什么是或不是&#xff1f; 本次有两个参考&#xff1a; 参考一&#xff1a; 当训练集的大小趋于无穷…...

编程日记 2024/7/29 12:06:48

Netdevops入门之Telnetlib语法案例

1、Telnetlib模块&#xff1a; 支持telnet/ssh远程访问的模块很多&#xff0c;常见的有telnetlib、ciscolib、paramiko、netmiko、pexpect,其中telnetlib和ciscolib对应telnet协议&#xff0c;后面3个对应SSH协议。 ①-通过ENSP环境搭建实验环境 ②-基础语法-telnetlib案例1&…...

编程日记 2024/7/29 12:05:47

永辉“爆改”续命

2024年&#xff0c;在线下零售一片哀嚎之下&#xff0c;胖东来似乎活成了国内零售业的密码&#xff0c;同时也变身成为各大零售企业的咨询公司&#xff0c;四处帮助“友商”救火&#xff0c;就连一直名声在外的永辉超市&#xff0c;也成了救火对象。 作为曾经国内生鲜超市的“…...

编程日记 2024/7/29 12:01:42

IEEE双一区Top“饱受诟病”！曾上医院黑名单，国人占比高达82.405%，目测即将拉下神坛？

本周投稿推荐 SCI&EI • 1区计算机类&#xff0c;3.5-4.0&#xff08;1个月录用&#xff09; • CCF推荐&#xff0c;1区-Top&#xff08;3天初审&#xff09; EI • 各领域沾边均可&#xff08;2天录用&#xff09; 知网&#xff08;CNKI&#xff09;、谷歌学术 •…...

编程日记 2024/7/29 11:59:40

Hive环境搭建（Mysql数据库）

【实验目的】 1) 了解hive的作用 2) 熟练hive的配置过程&#xff08;Mysql数据库&#xff09; 【实验原理】 Hive工具中默认使用的是derby数据库&#xff0c;该数据库使用简单&#xff0c;操作灵活&#xff0c;但是存在一定的局限性&#xff0c;hive支持使用第三方数据库&…...

编程日记 2024/7/29 11:54:35

【ESP32 IDF SPI硬件驱动W25Q64】

目录 SPISPI介绍idf配置初始化配置通信 驱动代码 SPI SPI介绍 详细SPI介绍内容参考我之前写的内容【ESP32 IDF 软件模拟SPI驱动 W25Q64存储与读取数组】 idf配置 初始化配置 spi_bus_initialize() 参数1 &#xff1a;spi几&#xff0c;例如spi2,spi3 参数2&#xff1a;…...

编程日记 2024/7/29 11:50:29

太原高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

随着科技的不断进步&#xff0c;智能制造已经成为推动制造业转型升级的重要力量。太原高校大学智能制造实验室紧跟时代步伐&#xff0c;积极推进数字孪生可视化系统平台的建设&#xff0c;并于近日圆满完成了项目的验收工作。这一里程碑式的成果&#xff0c;不仅标志着实验室在…...

编程日记 2024/7/29 11:49:28

Windows环境下SpringBoot Jar包热更新实战：从配置文件到Class文件的动态替换

1. Windows下SpringBoot Jar包热更新核心原理 SpringBoot应用打包成Jar后&#xff0c;本质上是个压缩文件。在Windows环境下&#xff0c;我们可以利用JDK自带的jar命令直接操作这个压缩包。热更新的本质就是在不重启服务的情况下&#xff0c;通过替换Jar包内部文件来实现配置或…...

编程新知 2026/3/29 5:34:00

从草图到文档：我用这5个Miro/PlantUML模板，高效搞定团队架构设计评审

从草图到文档&#xff1a;5个高效架构设计模板与团队协作实战指南 在敏捷开发环境中&#xff0c;架构设计往往陷入两难困境——既要快速响应需求变化&#xff0c;又要保证设计文档的准确性与可维护性。Tech Lead们经常面临这样的场景&#xff1a;在白板前与团队激情讨论出的架构…...

编程新知 2026/3/29 5:01:45

XUnity.AutoTranslator：打破Unity游戏语言壁垒的开源解决方案

XUnity.AutoTranslator&#xff1a;打破Unity游戏语言壁垒的开源解决方案 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 当你面对一款内容精彩但语言不通的Unity游戏时&#xff0c;是否曾因语言障碍而错…...

编程新知 2026/3/29 4:33:19

3大革新性功能！VoiceFixer全方位语音修复工具让受损音频焕发新生

3大革新性功能&#xff01;VoiceFixer全方位语音修复工具让受损音频焕发新生 【免费下载链接】voicefixer General Speech Restoration 项目地址: https://gitcode.com/gh_mirrors/vo/voicefixer 你是否遇到过珍贵录音因噪音模糊不清的窘境&#xff1f;是否因会议录音质…...

编程新知 2026/3/29 3:50:48

别再只用Dice Loss了！结合Focal Loss解决钢材缺陷分割中的小目标难题（附PyTorch代码）

突破小目标分割瓶颈&#xff1a;Focal Loss与Dice Loss的黄金组合实践 在工业质检领域&#xff0c;钢材表面缺陷分割任务常面临两个核心挑战&#xff1a;毫米级点状缺陷的漏检与复杂纹理背景下的误报。传统Dice Loss虽能缓解类别不平衡问题&#xff0c;但当遇到像素占比不足0.1…...

编程新知 2026/3/29 3:40:46

用Python和OpenCV复现经典去雾算法：暗通道先验从理论到实战（附完整代码）

用Python和OpenCV实现暗通道去雾算法&#xff1a;从原理到调参全指南 清晨的山景照片总是被薄雾笼罩&#xff0c;远处的细节模糊不清——这是每个摄影爱好者都会遇到的困扰。传统图像处理技术对这种物理现象束手无策&#xff0c;直到2009年何恺明提出的暗通道先验理论为单幅图像…...

编程新知 2026/3/29 3:22:36

MongoDB时间戳转换实战：从数字到标准时间格式的完整指南

1. MongoDB时间戳转换的核心概念 第一次接触MongoDB时间戳转换时&#xff0c;我也被各种时间格式搞得晕头转向。简单来说&#xff0c;MongoDB中的时间戳主要有三种存储形式&#xff1a;数字类型&#xff08;如1655448286502&#xff09;、字符串类型&#xff08;如"165544…...

编程新知 2026/3/29 3:18:34

从二极管到MOS管：工程师实测对比三种防反接电路的效率与成本（含数据）

从二极管到MOS管&#xff1a;三种防反接电路的全维度工程评估手册 当你的电路板因为电源反接冒出一缕青烟时&#xff0c;那种混合着焦味和绝望的体验&#xff0c;相信每个硬件工程师都记忆犹新。防反接电路看似简单&#xff0c;却直接影响着产品的可靠性、成本和能效表现。本文…...

编程新知 2026/3/29 3:12:34

【限时技术白皮书首发】：《边缘Python量化工具实战手册》V2.1——涵盖TVM 0.14 + MLIR + 自定义OP全流程

第一章&#xff1a;边缘Python量化工具概览与V2.1核心升级边缘Python量化工具是一套面向嵌入式AI场景的轻量级模型压缩与部署框架&#xff0c;专为资源受限设备&#xff08;如RISC-V MCU、Cortex-M7、ESP32-S3等&#xff09;设计&#xff0c;支持从PyTorch/TensorFlow模型无缝转…...

编程新知 2026/3/29 1:27:24

TXS0104EPWR双向电平转换器实战指南：从4通道设计到50mA高效应用

1. TXS0104EPWR双向电平转换器入门指南 第一次接触TXS0104EPWR时&#xff0c;我也被这个复杂的型号名称吓到了。但实际用起来才发现&#xff0c;这个4通道双向电平转换器简直是嵌入式开发的"翻译官"——专门解决不同电压器件之间的"语言不通"问题。想象一下…...

编程新知 2026/3/29 1:15:20