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

vue3 实现简单计数器示例——一个html文件展示vue3的效果

news 2026/5/21 10:57:34

目的：作为一个新手开发，我想使用 Vue 3 将代码封装在 HTML 文件中时，进行界面打开展示。

一、vue计数示例

学了一个简单计数器界面展示，代码如下：

<!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><div id="app"><h1>alllalalallalal 默认会被覆盖</h1>
</div>
<template id="why"><div><h2>{{message}}</h2><h2>{{counter}}</h2><button @click="increment">+1</button><button @click="decrement">-1</button></div>
</template><body><!-- 以下是引入vue依赖库三种的方式 --><!-- 方式一 cdn-->
<!-- 引入 Vue 3 的 CDN 资源网络加载不了 加载慢-->
<!-- <script src="https://unpkg.com/vue@next"></script> --><!-- 引入 Vue 3 的 CDN 资源 公司网络加载不了  无用-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>--><!-- 引入 Vue 3 的 CDN 资源 公司网络能加载  有用 -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.12/vue.global.min.js"></script>--><!-- 方式二 本地-->
<!-- 引入 Vue 3 的本地js 有用 -->
<!-- 把cdn远程vue.global.min.js文件复制到本地，命名，接着真实路径引用-->
<script src="vue3.2.12global.js"></script><!-- 方式三 电脑全局vue.js引入 不需要再文件引用，就可以打开了 -->
<!-- 下载安装node.js,使用node命令 `npm install vue -g`下载安装vue.js 到电脑全局，检查是否安装成功 `npm list vue` 有用  -->
<script src="D:/html_project/vue_to_android/vue3.2.12global.js"></script>
<script>Vue.createApp({template: '#why',data: function() {return {message: "hello world!",counter: 100}},methods: {increment() {this.counter++;console.log("点击了+1");},decrement() {this.counter--;consloe.log("点击了-1");}}}).mount("#app")</script></body></html>

在 上述HTML 文件里,包含了文件头标题<title>,
接着定义了一个内容 <div id="app">
而后定义了一个内容，包含标题和数字,以及两个按钮的 <template>，
并在 <body> 中引入了 Vue 3 的库，通过使用 createApp 方法创建了一个 Vue 应用，并通过 template 设置了要使用的模板选择器为 #why。
最后，在 <script> 标签中使用 createApp 和 mount 方法启动 Vue 应用。

二、保存到html

把以上代码，手敲复制到一个文件中，我这边就复制到vue_demo.html
在这里插入图片描述

其中可以使用 Vue 3 的 CDN 引入 Vue 库和相关的依赖,但是对网络有限制，有的加载太慢了；
这边采用手动引用依赖库，把cdn远程https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.12/vue.global.min.jsvue.global.min.js文件全盘复制到本地，命名vue3.2.12global.js，再进行加载，这样就快很多了。

三、实际效果

在这里插入图片描述
其中标签 <div id="app"> 根据#app被vue使用，会主动使用vue中<template>内容覆盖已经有的文字alllalalallalal。

创造加载，乐哉分享！

相关文章：

vue3 实现简单计数器示例——一个html文件展示vue3的效果

目的&#xff1a;作为一个新手开发&#xff0c;我想使用 Vue 3 将代码封装在 HTML 文件中时&#xff0c;进行界面打开展示。 一、vue计数示例 学了一个简单计数器界面展示&#xff0c;代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head&…...

编程日记 2024/1/19 0:25:19

面试经典150题(88-89)

leetcode 150道题 计划花两个月时候刷完&#xff0c;今天&#xff08;第四十四天&#xff09;完成了2道(88-89)150&#xff1a; 88.(22. 括号生成) 题目描述&#xff1a; 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效…...

编程日记 2024/1/19 0:21:17

【设计模式-3.3】结构型——享元模式

说明&#xff1a;说明&#xff1a;本文介绍设计模式中结构型设计模式中的&#xff0c;享元模式&#xff1b; 游戏地图 在一些闯关类的游戏&#xff0c;如超级玛丽、坦克大战里面&#xff0c;游戏的背景每一个关卡都不相同&#xff0c;但仔细观察可以发现&#xff0c;其都是用…...

编程日记 2024/1/19 0:19:15

【征服redis6】Redis的内存淘汰详解

目录 1.redis的基本策略 2.Redis中的缓存淘汰策略 3.Redis内存不足的情况 4.几种淘汰策略的实现原理 5.项目实践与优化策略 5.1 配置案例 5.2 项目优化策略参考 数据库存储会将数据保存到磁盘中&#xff0c;而Redis的核心数据是在内存中的&#xff0c;而Redis本身主要用来…...

编程日记 2024/1/19 0:16:12

多文件转二维码的两种方式，有兴趣的了解一下

多个文件能一键生成二维码吗&#xff1f;二维码是现在很多人用来展示文件内容的一种手段&#xff0c;在制作二维码图片之后&#xff0c;其他人扫码就可以查看文件或者下载文件&#xff0c;有效的提升文件获取的效率。一般情况下&#xff0c;文件二维码分为多个文件生成一个二维…...

编程日记 2024/1/19 0:15:11

uniapp APP接入Paypal

1. 登录paypal开发者中心&#xff0c; 2. 选择 Apps & Credentials 点击 Create App创建应用&#xff0c;创建后点击编辑按钮&#xff0c;如图&#xff1a; 3. 进入应用详情&#xff0c;勾选Log in with PayPal点击 Advanced Settings 添加return URL等信息并保存。如图&a…...

编程日记 2024/1/19 0:13:09

QT-贪吃小游戏

QT-贪吃小游戏 一、演示效果二、关键程序三、下载链接 一、演示效果 二、关键程序 #include "Snake.h" #include "Food.h" #include "Stone.h" #include "Mushroom.h" #include "Ai.h" #include "Game.h" #inclu…...

编程日记 2024/1/19 0:12:08

HubSpot：如何设计和执行客户旅程？

在当今数字化时代&#xff0c;企业成功的关键之一是建立并优化客户旅程。HubSpot作为一体化市场营销平台&#xff0c;通过巧妙设计和执行客户旅程&#xff0c;实现了个性化决策&#xff0c;关键节点的精准引导&#xff0c;为企业带来了数字化转型的引领力。 一、HubSpot是如何设…...

编程日记 2024/1/19 0:11:07

【Go学习】macOS+IDEA运行golang项目，报command-line-arguments，undefined

写在前面的话&#xff1a;idea如何配置golang&#xff0c;自行百度 问题1&#xff1a;通过idea的terminal执行go test报错 ✘ xxxxxmacdeMacBook-Pro-3  /Volumes/mac/.../LearnGoWithTests/hello  go test go: go.mod file not found in current directory or any parent …...

编程日记 2024/1/19 0:10:06

优先看我的博客：工控机 Ubuntu系统 输入密码登录界面后界面模糊卡死，键盘鼠标失效（不同于其他博主的问题解决方案，优先看我的博客。）

工控机Ubuntu 输入密码登录界面后界面模糊卡死&#xff0c;键盘鼠标失效 &#xff08;不同于其他博主的问题解决方案&#xff0c;工控机Ubuntu的系统 优先看我的博客。&#xff09; 系统版本&#xff1a;ubuntu18.04 主机&#xff1a;工控机 应用场景&#xff1a;电力系统巡…...

编程日记 2024/1/19 0:08:04

SAP 中的外部接口：预扣税

文章目录 1 Introduction2 implementation3 Summary 1 Introduction We use BP create WTAX_TYPE ,I don’t find a bapi. We will update for it . We will impement WTax type , WTax code ,Subject in the ‘BP’. 2 implementation UPDATE lfbw SET witht gs_alv-wit…...

编程日记 2024/1/19 0:01:59

代码随想录算法训练营第二十三天| 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

669. 修剪二叉搜索树 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 解题思路&#xff1a;如果当前结点小于所给区间&#xff0c;那该节点及其左子树肯定不符合条件&#xff0c;返回其右子树作为上一结点子树&#xff1b;反之…...

编程日记 2024/1/18 23:59:57

设计模式——解释器模式

解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为型设计模式&#xff0c;它提供了一个框架&#xff0c;用于定义语言的语法规则&#xff0c;并通过这些规则来解析和解释特定语法结构表示的句子。这种模式主要应用于需要对简单语言进行解释或编译的小型系统中。…...

编程日记 2024/1/18 23:57:55

uniapp小程序当页面内容超出时显示滚动条，不超出时不显示---样式自定义

使用scroll-view中的show-scrollbar属性 注意:需要搭配enhanced使用 否则无效 <scroll-view class"contentshow" scroll-y :show-scrollbartrue :enhancedtrue><view class"content" :show-scrollbartrue><text>{{vehicleCartinfo}}<…...

编程日记 2024/1/18 23:56:55

开源28181协议视频平台搭建流程

最近项目中用到流媒体平台&#xff0c;java平台负责信令部分&#xff0c;c平台负责流媒体处理&#xff0c;找了评分比较好的开源项目 https://gitee.com/pan648540858/wvp-GB28181-pro 流媒体服务基于 c写的 https://github.com/ZLMediaKit/ZLMediaKit 说明文档&#xff1a;h…...

编程日记 2024/1/18 23:52:51

安全跟我学｜网络安全五大误区，你了解吗？

网络安全 尽管安全问题老生常谈&#xff0c;但一些普遍存在的误区仍然可能让企业随时陷入危险境地。为了有效应对当前层出不穷且不断变换的网络威胁&#xff0c;最大程度规避潜在风险&#xff0c;深入了解网络安全的发展趋势必不可少。即使部署了最新且最先进的硬件和解决方案…...

编程日记 2024/1/18 23:51:50

数据结构奇妙旅程之二叉树初阶

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …...

编程日记 2024/1/18 23:50:49

WebGL中开发VR（虚拟现实）应用

WebGL&#xff08;Web Graphics Library&#xff09;是一种用于在浏览器中渲染交互式3D和2D图形的JavaScript API。要在WebGL中开发VR&#xff08;虚拟现实&#xff09;应用程序&#xff0c;您可以遵循以下一般步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&a…...

编程日记 2024/1/18 23:49:48

elemeentui el-table封装

elemeentui el-table封装 <template><div style"height: 100%;"><el-table ref"sneTable" element-loading-text"加载中" element-loading-spinner"el-icon-loading"element-loading-background"rgba(45,47,79…...

编程日记 2024/1/18 23:47:46

openssl3.2 - 官方demo学习 - guide - quic-client-block.c

文章目录 openssl3.2 - 官方demo学习 - guide - quic-client-block.c概述笔记END openssl3.2 - 官方demo学习 - guide - quic-client-block.c 概述 在程序运行时, 要指定环境变量 SSL_CERT_FILErootcert.pem, 同时将rootcert.pem拷贝到工程目录下, 否则不好使 吐槽啊, 为啥不…...

编程日记 2024/1/18 23:44:43

突发！Karpathy 加入 Anthropic，重回一线搞研发

①就在刚刚不久&#xff0c;前 OpenAI 创始团队成员 Andrej Karpathy 发推宣布加入 Anthropic。我已加入 Anthropic。我认为未来几年大语言模型&#xff08;LLM&#xff09;领域的前沿发展将极具塑造性。我非常兴奋能加入这里的团队&#xff0c;重新投入研发工作。我对教育事业…...

编程新知 2026/5/21 9:39:08

港澳通行证照片怎么手机拍？2026 手机拍摄规格要求和实用方法全解

准备办理港澳通行证却被照片规格搞得不知所措&#xff1f;其实用手机就能拍出符合要求的证件照&#xff0c;关键是掌握正确的拍摄方法和规格标准。这篇文章将详细讲解港澳通行证照片的手机拍摄方法&#xff0c;包括规格要求、拍摄步骤&#xff0c;以及如何后期处理让照片完美达…...

编程新知 2026/5/21 7:43:32

Ccursor安装使用

首先进入官文 https://cursor.com/下载&#xff0c;然后按照步骤进行安装&#xff0c;一般都是直接默认安装&#xff08;修改软件位置的话可以修改下去&#xff0c;默认是在c盘&#xff0c;可能会后面用的多了造成卡顿&#xff09;&#xff0c;直到安装完成&#xff0c; 点击使…...

编程新知 2026/5/21 7:39:17

保姆级教程：在Windows上用Python连接CoppeliaSim远程API（附避坑指南）

从零开始掌握CoppeliaSim与Python的远程控制&#xff1a;Windows环境实战指南 在机器人仿真领域&#xff0c;CoppeliaSim&#xff08;原V-REP&#xff09;因其强大的功能和友好的用户界面而广受欢迎。对于希望将Python的灵活性与CoppeliaSim的仿真能力结合的研究者和工程师来说…...

编程新知 2026/5/21 5:19:23

如何用Sunshine打造家庭游戏云：免费开源的游戏串流终极指南

如何用Sunshine打造家庭游戏云&#xff1a;免费开源的游戏串流终极指南 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 你是否厌倦了被束缚在书房电脑前玩游戏&#xff1f;是否希望…...

编程新知 2026/5/21 4:57:40

搜索已死？不，它刚刚重生为Agent的“天眼”

前言2026年&#xff0c;AI Agent的能力正以月为单位狂飙突进。写代码、跑审计、做研报……曾经需要人类全程陪跑的任务&#xff0c;如今八成以上已被Agent自主接管。然而&#xff0c;一个看似微不足道的环节&#xff0c;却成了整个智能链条中最脆弱的一环——搜索。你让Agent查…...

编程新知 2026/5/21 4:28:37

Noisereduce的PyTorch实现：将降噪算法集成到神经网络中的完整教程

Noisereduce的PyTorch实现&#xff1a;将降噪算法集成到神经网络中的完整教程 【免费下载链接】noisereduce Noise reduction in python using spectral gating (speech, bioacoustics, audio, time-domain signals) 项目地址: https://gitcode.com/gh_mirrors/no/noisereduc…...

编程新知 2026/5/21 4:09:24

如何在Windows 11上快速安装Android应用？终极APK安装器完全指南 [特殊字符]

如何在Windows 11上快速安装Android应用&#xff1f;终极APK安装器完全指南 &#x1f680; 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 还在为Windows上安装Android…...

编程新知 2026/5/21 1:21:40

Langchain自定义LLM实战：我把一个简单的Python函数变成了AI模型接口

LangChain自定义LLM实战&#xff1a;从Python函数到智能接口的魔法变形记 在AI应用开发的世界里&#xff0c;大型语言模型(LLM)正以前所未有的速度改变着技术格局。但你是否想过&#xff0c;那些看似神秘的AI接口背后&#xff0c;其实隐藏着一个惊人的简单本质&#xff1f;今天…...

编程新知 2026/5/21 1:08:48

别再搞混了！SAP物料主数据、BOM、工艺路线里的三种损耗率（Scrap）到底怎么配？

SAP三大损耗率配置实战指南&#xff1a;从物料主数据到工艺路线的精准决策 在SAP PP模块实施过程中&#xff0c;物料损耗率的配置往往成为顾问团队争论的焦点。我曾参与过一个汽车零部件制造项目&#xff0c;由于初期对三种损耗率的理解偏差&#xff0c;导致MRP运算结果与实际情…...

编程新知 2026/5/20 23:36:01