[JavaScript知识库] vue3第三篇原生计数器和vue实现计数器

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue3第三篇原生计数器和vue实现计数器 -> 正文阅读

[JavaScript知识库]vue3第三篇原生计数器和vue实现计数器

在这里插入图片描述

写法1 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<h2>原生实现计时器</h2>
			<button class="add">+1</button>
			<font class="view">0</font>
			<button class="subtract">-1</button>
		</div>
		<div id="app"></div>
	</body>
	<script type="application/javascript">
		//1.获取元素
		const add = document.querySelector(".add");
		const view = document.querySelector(".view");
		const subtract = document.querySelector(".subtract");
		//2.定义初始值
		let count = 0;
		view.innerHTML = count;
		//3.监听按钮的点击事件
		add.addEventListener("click", () => {
			count = count + 1;
			view.innerHTML = count;
		});
		subtract.addEventListener("click", () => {
			count = count - 1;
			view.innerHTML = count;
		});
	</script>
	<script src="../js/vue.js"></script>
	<script>
		Vue.createApp({
			template: `<h2>vue实现计时器</h2>
		<button @click='add'>+1</button>
		<font>{{count}}</font>
		<button @click='subtract'>-1</button>`,
			data: function() {
				return {
					count: 0
				}
			},
			methods: {
				add(){
					this.count++;
					console.log('点击了+1');
				},
				subtract(){
					this.count--;
					console.log('点击了-1');
				}
			}
		}).mount('#app');
	</script>
</html>

写法2 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<h2>原生实现计时器</h2>
			<button class="add">+1</button>
			<font class="view">0</font>
			<button class="subtract">-1</button>
		</div>
		<div id="app"></div>
	</body>
	<script type="application/javascript">
		//1.获取元素
		const add = document.querySelector(".add");
		const view = document.querySelector(".view");
		const subtract = document.querySelector(".subtract");
		//2.定义初始值
		let count = 0;
		view.innerHTML = count;
		//3.监听按钮的点击事件
		add.addEventListener("click", () => {
			count = count + 1;
			view.innerHTML = count;
		});
		subtract.addEventListener("click", () => {
			count = count - 1;
			view.innerHTML = count;
		});
	</script>
	<script src="../js/vue.js"></script>
	
	<script type="x/template" id='tem'</script>
	<h2>vue实现计时器</h2>
	<button @click='add'>+1</button>
	<font>{{count}}</font>
	<button @click='subtract'>-1</button>
	<script>
		Vue.createApp({
			template: `#tem`,
			data: function() {
				return {
					count: 0
				}
			},
			methods: {
				add(){
					this.count++;
					console.log('点击了+1');
				},
				subtract(){
					this.count--;
					console.log('点击了-1');
				}
			}
		}).mount('#app');
	</script>
</html>

写法3 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<h2>原生实现计时器</h2>
			<button class="add">+1</button>
			<font class="view">0</font>
			<button class="subtract">-1</button>
		</div>
		<div id="app"></div>
		
		<template id="tem">
			<h2>vue实现计时器</h2>
			<button @click='add'>+1</button>
			<font>{{count}}</font>
			<button @click='subtract'>-1</button>
		</template>
	
	</body>
	<script type="application/javascript">
		//1.获取元素
		const add = document.querySelector(".add");
		const view = document.querySelector(".view");
		const subtract = document.querySelector(".subtract");
		//2.定义初始值
		let count = 0;
		view.innerHTML = count;
		//3.监听按钮的点击事件
		add.addEventListener("click", () => {
			count = count + 1;
			view.innerHTML = count;
		});
		subtract.addEventListener("click", () => {
			count = count - 1;
			view.innerHTML = count;
		});
	</script>
	<script src="../js/vue.js"></script>
	
	
	<script>
		Vue.createApp({
			template: `#tem`,
			data: function() {
				return {
					count: 0
				}
			},
			methods: {
				add(){
					this.count++;
					console.log('点击了+1');
				},
				subtract(){
					this.count--;
					console.log('点击了-1');
				}
			}
		}).mount('#app');
	</script>
</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-09-01 11:49:53 更:2021-09-01 11:52:25

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/23 13:14:27-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码