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

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

news 2025/12/15 1:22:17

目的：作为一个新手开发，我想使用 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的效果

一、vue计数示例

二、保存到html

三、实际效果

相关文章：

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

面试经典150题(88-89)

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

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

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

uniapp APP接入Paypal

QT-贪吃小游戏

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

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

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

SAP 中的外部接口：预扣税

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

设计模式——解释器模式

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

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

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

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

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

elemeentui el-table封装

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

SpringBoot-17-MyBatis动态SQL标签之常用标签

龙虎榜——20250610

web vue 项目 Docker化部署

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

c++ 面试题(1)-----深度优先搜索（DFS）实现

C++中string流知识详解和示例

【JavaWeb】Docker项目部署

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

Android第十三次面试总结（四大组件基础）

LLMs 系列实操科普（1）