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

利用Vue和javascript分别编写一个“Hello World”的定时更新

news 2026/2/10 19:05:31

目录

  • 一、利用Vue编写一个“Hello World”的定时更新
    • （1）vue编码在Html文件中
    • （2）vue编码在js文件中
  • 二、利用javascript编写一个“Hello World”的定时更新

一、利用Vue编写一个“Hello World”的定时更新

（1）vue编码在Html文件中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 以cdn的方式引入开发版本的vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
</head>
<body><!-- 创建一个id为App的div标签 --><div id="app"><!-- 插值表达式{{}}用来输出Vue对象中的content的值。 -->{{content}}</div>    <script>// 在script标签内创建Vue实例对象，设置该对象下的俩属性：el和datavar app = new Vue({   // el属性（挂载元素）用于将vue实例绑定到id为app的dom中el:'#app',   // data属性（数据）用于数据存储data:{       content:"Hello world!"  }})// 使用vue的话，不需要再考虑DOM上的操作了，而是把精力集中到数据的管理上setTimeout(function(){app.$data.content = 'new Hello world'},2000)</script>  
</body>
</html>

代码执行结果如下：

在这里插入图片描述

（2）vue编码在js文件中

1、创建一个Html文件

<html>
<head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="app"><h1>{{message}}</h1></div><script src="main.js"></script>
</body>
</html>

2、创建一个main.js文件

var app = new Vue({el: '#app',data: {message: "Hello world!"}
})setTimeout(function () {app.$data.message = 'new Hello world'
}, 2000)

代码执行结果如下：
在这里插入图片描述

二、利用javascript编写一个“Hello World”的定时更新

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><script>var dom = document.getElementById('app');dom.innerHTML = 'hello world';// 让div中的数据，两秒后更换一次setTimeout(function(){dom.innerHTML = "new Hello world";},2000)</script> 
</body>
</html>

代码执行结果如下：
在这里插入图片描述

相关文章：

利用Vue和javascript分别编写一个“Hello World”的定时更新

目录 一、利用Vue编写一个“Hello World”的定时更新&#xff08;1&#xff09;vue编码在Html文件中&#xff08;2&#xff09;vue编码在js文件中 二、利用javascript编写一个“Hello World”的定时更新 一、利用Vue编写一个“Hello World”的定时更新 &#xff08;1&#xff…...

编程日记 2025/2/4 19:32:29

volatile变量需要减少读取次数吗

问题说明 本人在前期读Netty源码时看到这样一段源码和注释&#xff1a; private boolean invokeHandler() {// Store in local variable to reduce volatile reads.int handlerState this.handlerState;return handlerState ADD_COMPLETE || (!ordered && handlerS…...

编程日记 2025/2/4 19:24:21

bootstrap.yml文件未自动加载问题解决方案

在添加bootstrap.yml文件后,程序未自动扫描到,即图标是这样的: 查了一些资料,是缺少bootstrap相关依赖,虽然已经添加了spring-cloud-context依赖,但是这个依赖并未引入bootstrap依赖,可能是版本问题,需要手动引入 <dependency><groupId>org.springframework.cloud&…...

编程日记 2025/2/4 19:22:14

编程AI深度实战：AI编程工具哪个好? Copilot vs Cursor vs Cody vs Supermaven vs Aider

​ 系列文章： 编程AI深度实战：私有模型deep seek r1，必会ollama-CSDN博客 编程AI深度实战：自己的AI，必会LangChain-CSDN博客 编程AI深度实战：给vim装上AI-CSDN博客 编程AI深度实战：火的编程AI，都在用语法树（AST）-CSDN博客 编程AI深度实战：让verilog不再是 AI …...

编程日记 2025/2/4 19:20:11

前端知识速记--CSS篇：display

前端知识速记–CSS篇&#xff1a;display 一、什么是 display 属性&#xff1f; display 属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式&#xff0c;还对元素的布局、结构以及与其他元素之间的关系产生重要影响。 二、常用 display 属性值 1. block …...

编程日记 2025/2/4 19:19:10

51单片机 01 LED

一、点亮一个LED 在STC-ISP中单片机型号选择 STC89C52RC/LE52RC&#xff1b;如果没有找到hex文件&#xff08;在objects文件夹下&#xff09;&#xff0c;在keil中options for target-output- 勾选 create hex file。 如果要修改编程 &#xff1a;重新编译-下载/编程-单片机重…...

编程日记 2025/2/4 19:18:05

WPF进阶 | WPF 动画特效揭秘：实现炫酷的界面交互效果

WPF进阶 | WPF 动画特效揭秘&#xff1a;实现炫酷的界面交互效果 前言一、WPF 动画基础概念1.1 什么是 WPF 动画1.2 动画的基本类型1.3 动画的核心元素 二、线性动画详解2.1 DoubleAnimation 的使用2.2 ColorAnimation 实现颜色渐变 三、关键帧动画深入3.1 DoubleAnimationUsin…...

编程日记 2025/2/4 19:08:54

分页按钮功能

前言 在前端开发中&#xff0c;分页功能是一个常见的需求&#xff0c;特别是当需要展示大量数据时&#xff0c;它能有效提升用户体验。该文章结合运用了HTML&#xff0c;CSS&#xff0c;JS实现网页的分页按钮功能&#xff0c;并且可以选择每页显示的条数试试更新总页数及显示当…...

编程日记 2025/2/4 19:07:53

数据分析系列--⑦RapidMiner模型评价(基于泰坦尼克号案例含数据集)

一、前提 二、模型评估 1.改造⑥ 2.Cross Validation算子说明 2.1Cross Validation 的作用 2.1.1 模型评估 2.1.2 减少过拟合 2.1.3 数据利用 2.2 Cross Validation 的工作原理 2.2.1 数据分割 2.2.2 迭代训练与测试 ​​​​​​​ 2.2.3 结果汇总 ​​​​​​​ …...

编程日记 2025/2/4 19:06:52

集合通讯概览

集合通信概览 &#xff08;1&#xff09;通信的算法 是根据通讯的链路组成的 &#xff08;2&#xff09;因为通信链路 跟硬件强相关&#xff0c;所以每个CCL的库都不一样 芯片与芯片、不同U之间是怎么通信的 多卡训练&#xff1a;多维并行&#xff08;xxx并行在上一期已经讲述…...

编程日记 2025/2/4 18:56:41

【FreeRTOS 教程 八】直达任务通知

目录 一、FreeRTOS 直达任务通知&#xff1a; &#xff08;1&#xff09;直达任务通知基本介绍&#xff1a; &#xff08;2&#xff09;更新目标通知的值&#xff1a; &#xff08;3&#xff09;性能优势和使用限制&#xff1a; 二、直达任务通知 API&#xff1a; &#…...

编程日记 2025/2/4 18:52:35

Ubuntu 18.04安装Emacs 26.2问题解决

个人博客地址&#xff1a;Ubuntu 18.04安装Emacs 26.2问题解决 | 一张假钞的真实世界 no X development libraries were found checking for X... no checking for X... true configure: error: You seem to be running X, but no X development libraries were found. You …...

编程日记 2025/2/4 18:45:23

nodejs：js-mdict 的下载、安装、测试、build

js-mdict 项目的目录结构&#xff1a;js-mdict 项目教程 js-mdict 下载地址: js-mdict-master.zip 先解压到 D:\Source\ js-mdict 6.0.2 用了 ts (TypeScript) 和 Jest&#xff0c;增加了应用开发的难度&#xff0c;因为先要了解 ts 和 Jest。 参阅&#xff1a;测试与开发&a…...

编程日记 2025/2/4 18:38:13

CSS关系选择器详解

CSS关系选择器详解 学习前提什么是关系选择器&#xff1f;后代选择器&#xff08;Descendant Combinator&#xff09;语法示例注意事项 子代选择器&#xff08;Child Combinator&#xff09;语法示例注意事项 邻接兄弟选择器&#xff08;Adjacent Sibling Combinator&#xff0…...

编程日记 2025/2/4 18:29:00

Python在线编辑器

from flask import Flask, render_template, request, jsonify import sys from io import StringIO import contextlib import subprocess import importlib import threading import time import ast import reapp Flask(__name__)RESTRICTED_PACKAGES {tkinter: 抱歉&…...

编程日记 2025/2/4 18:27:55

蓝桥杯备考：高精度算法之除法

我们除法的高精度其实也不完全是高精度&#xff0c;而是一个高精度作被除数除以一个低精度 模拟我们的小学除法 由于题目中我们的除数最大是1e9&#xff0c;当它真正是1e9的时候&#xff0c;t是有可能超过1e9的&#xff0c;所以要用long long...

编程日记 2025/2/4 18:26:52

笔试-业务逻辑4

应用 小明在玩一个数字加减游戏&#xff0c;输入4个正整数&#xff1a;s、t、a、b&#xff0c;其中s>1&#xff0c;b<105&#xff0c;a!b。只使用加法或者减法&#xff0c;使得st。 每回合&#xff0c;小明用当前的数字&#xff0c;加上或减去一个数字&#xff1b;目前有…...

编程日记 2025/2/4 18:18:41

《Linux服务与安全管理》| 数据库服务器安装和配置

《Linux服务与安全管理》| 数据库服务器安装和配置 目录 《Linux服务与安全管理》| 数据库服务器安装和配置 任务一&#xff1a; 安装PostgreSQL数据库&#xff0c;设置远程登录&#xff0c;客户端可以成功登录并操作数据库。 任务二&#xff1a; 安装MySQL数据库&#xf…...

编程日记 2025/2/4 18:14:37

麦芯 (MachCore) 应用开发教程 6：一台设备中多台电脑主从机的设置

麦芯是构建在windows系统上的设备应用操作系统&#xff0c;利用该系统可以快速高效的开发一款设备专用软件。希望进一步了解请email: acloud163.com 黄国强 2025/02/03 在麦芯&#xff08;MachCore&#xff09;应用开发过程中&#xff0c;多机协同工作的场景十分常见&#xf…...

编程日记 2025/2/4 18:13:35

RAG 与历史信息相结合

初始化模型 # Step 4. 初始化模型, 该行初始化与 智谱 的 GLM - 4 模型进行连接&#xff0c;将其设置为处理和生成响应。 chat ChatZhipuAI(model"glm-4",temperature0.8, ) 此提示告诉模型接收聊天历史记录和用户的最新问题&#xff0c;然后重新表述问题&#x…...

编程日记 2025/2/4 18:12:34

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2026/2/8 4:37:01

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2026/2/10 1:20:48

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2026/1/27 5:01:54

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/2/5 12:11:18

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2026/2/4 12:52:32

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2026/1/31 6:20:15

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2026/2/3 19:38:38