`E:\song\threejs_learn\vite-project\index.html`

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

`E:\song\threejs_learn\vite-project\src\counter.ts`

 /**
 * 1. 计数器
 * @param element html元素
 */
export function setupCounter(element: HTMLButtonElement) {
  // 计数器初始值
  let counter = 0;
  // 回调函数
  const setCounter = (count: number) => {
    counter = count;
    element.innerHTML = `count is ${counter}`;
  };
  // 添加click事件
  element.addEventListener("click", () => setCounter(counter + 1));
  setCounter(0);
}

`E:\song\threejs_learn\vite-project\src\main.ts`

 /**
 * 1. vanilla + typescript
 * 2. 原生加ts大法
 * 3. 这是使用vite创建的模板
 */
import "./style.css";
import { setupCounter } from "./counter";
 
document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" target="_blank">
      <img src="/typescript.svg" class="logo vanilla" alt="TypeScript logo" />
    </a>
    <h1>Vite + TypeScript</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite and TypeScript logos to learn more
    </p>
  </div>
`;
 
setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);

posted on 2022-11-17 09:34 超级无敌美少男战士阅读(30) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vu_vuex_计数器

· vi_viteLearnNote

· lit动态修改样式

· Vue-示例

· Vue03-组件化

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

怪物奇妙物语

最新随笔

我的标签

积分与排名

随笔分类 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

`E:\song\threejs_learn\vite-project\index.html`

`E:\song\threejs_learn\vite-project\src\counter.ts`

`E:\song\threejs_learn\vite-project\src\main.ts`

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<link rel="icon" type="image/svg+xml" href="/vite.svg" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Vite + TS</title>
	</head>
	<body>
	<div id="app"></div>
	<script type="module" src="/src/main.ts"></script>
	</body>
	</html>

	/**
	* 1. 计数器
	* @param element html元素
	*/
	export function setupCounter(element: HTMLButtonElement) {
	// 计数器初始值
	let counter = 0;
	// 回调函数
	const setCounter = (count: number) => {
	counter = count;
	element.innerHTML = `count is ${counter}`;
	};
	// 添加click事件
	element.addEventListener("click", () => setCounter(counter + 1));
	setCounter(0);
	}

	/**
	* 1. vanilla + typescript
	* 2. 原生加ts大法
	* 3. 这是使用vite创建的模板
	*/
	import "./style.css";
	import { setupCounter } from "./counter";

	document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
	<div>
	<a href="https://vitejs.dev" target="_blank">
	<img src="/vite.svg" class="logo" alt="Vite logo" />
	</a>
	<a href="https://www.typescriptlang.org/" target="_blank">
	<img src="/typescript.svg" class="logo vanilla" alt="TypeScript logo" />
	</a>
	<h1>Vite + TypeScript</h1>
	<div class="card">
	<button id="counter" type="button"></button>
	</div>
	<p class="read-the-docs">
	Click on the Vite and TypeScript logos to learn more
	</p>
	</div>
	`;

	setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);