vue3第三篇原生计数器和vue实现计数器

最新推荐文章于 2024-07-25 11:00:49 发布
最新推荐文章于 2024-07-25 11:00:49 发布
阅读量567 收藏
点赞数
分类专栏： vue3 文章标签： vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40247570/article/details/120026624
版权

在这里插入图片描述

写法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>
EOPG
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vite+vue3动态模块化导入并使用pinia
03-25
通过这样的结构，开发者可以在Vue3和Vite的现代化开发环境中充分利用Pinia进行状态管理，实现动态模块化的加载，提升应用的性能和可维护性。这种技术组合不仅简化了代码结构，也提高了开发效率。
vue3-presentation:在Vue3上的演示
04-08
响应式系统在Vue3中也得到了重构，现在基于Proxy对象实现，提供了更细粒度的依赖跟踪和更好的性能。此外，Vue3的ref和reactive API让声明响应式状态变得更直观。ref用于创建响应式的原生JavaScript值，而reactive则...
[Vue]分别原生JS和Vue实现计数器功能
qq_44742090的博客
11-06 379
题目 用vue实现计数器功能，其中vue实现的代码黑马程序员vue教程给出，这里对其CSS代码进行了注释，并且用原生JS重新实现了一次。 效果 不能大于10 不能小于0 vue实现 实现步骤 确定el挂载点（id = "app"的div） data中定义数据（num,min,max） methods添加两个方法sub(-)和add(+) 使用v-text将num设置给span标签 使用v-on分别将sub和add绑定给-和+ 设置num的范围，即min = 0,max=10 <!DOCTYPE
如何在Vue3中使用组合API创建一个简单的计数器？
有我更精彩的博客
06-03 1182
在 Vue 2 中，我们通常使用选项 API（Options API）来定义组件的逻辑和数据。然而，随着项目的复杂度增加，这种方式可能会导致代码变得难以维护，特别是当我们需要重用逻辑时。组合 API 的引入就是为了应对这些问题，它允许我们以更模块化的方式组织代码，使逻辑复用变得更加简单。组合 API 的核心是setup函数，它是 Vue 3 组件的一个新生命周期钩子，用于定义组件的状态和行为。通过setup函数，我们可以访问组合 API 提供的各种功能。
Vue的引入方式，属性和计数器案例
在写作的路上持续输出。
03-24 633
邂逅vue 基础 引入方式，属性和计数器案例 【新人基础】
01：实用至上主义学VUE3 - 单击计数器
qq_59516928的博客
07-03 355
通过口语化的方式结合实战场景，详细讲解vue3执行中的每一步。希望能帮助大家理解基础的vue3运行逻辑和其中运用的方式方法。
vue实现计数器，2024年最新学前端程序开发
2201_75609177的博客
04-16 707
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？document load和document DOMContentLoaded两个事件的区别。引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？如何判断一个变量是Array类型？如何判断一个变量是Number类型？跟C,Java中的this有什么区别？如何改变this的值？js的基本类型有哪些？事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？显示原型和隐式原型，手绘原型链，原型链是什么？
Vue自定义InputNumber 计数器组件
weixin_43882265的博客
08-03 2098
因为原始的el-element的el-input-number组件有问题： 1. 原生组件能输入英文，不能限制只能输入数值； 2. 原始组件能通过键盘上的删除按钮，将数据全部删除，若提交表单的话，就会将一个空值提交给后端，这是错误的，所以前端还要给组件做非空校验，比较麻烦； 3. 原始组件必须要失焦才能触发数据更新，若我们在更改数值后，没有点击失焦，而是直接点击确认提交表单，此时我们以为我们已经将数值改变了，其实数值没有改变，数值还是改变之前的值，若此时刷新页面的话，就能看到数值没有更新，所以必须要在更改数
vue3的props和defineProps
热门推荐
pscool的博客
04-29 1万+
可以将组件中定义的属性值（响应式数据）传给子组件，当这些属性值发生变化时，子组件也会更新重新渲染。看上去跟vue2没什么区别，就是先引入组件，然后注册组件，然后就使用组件。
vue2 与 vue3 虚拟列表实现
qq_45770253的博客
03-16 5576
文章目录1、概述2、计时3、JavaScript线程4、分片加载5、vue-virtual-scroll-list6、自己实现vue虚拟列表① vue2Ⅰ. 项目搭建Ⅱ. 虚拟列表制作② vue3Ⅰ. 项目搭建Ⅱ. 虚拟列表制作 1、概述 一般长列表用在后端传递大量数据，要求前端进行展示的情况 先来看看原生的一个加载大量数据的一个情况： <div id="container"></div> <script> // 演示大量 DOM 加载时的缓慢问题，也就是“
从Vue2到Vue3 Vue3知识点
m0_59250071的博客
01-04 1103
Vue 3 是当前 Vue 的最高主版本。它提供了更好的性能和更好的 TypeScript 支持，并拥有诸如 Teleport、Suspense 和模板语法可多个根元素等 Vue 2 中没有的新特性。
Vue.js_06_计数器案例
魏宇轩
04-27 719
本系列博客汇总在这里：Vue.js 汇总 计数器案例一、功能说明二、methods 和 v-on:click1、methods2、v-on:click 源码工程文件为： 一、功能说明 点击加号实现计数器增一，点击减号实现计数器减一。 上图中的代码已经实现了计数器的功能，但是如果行的需求出现，例如我们需要在加一的时候输出一句话，那该怎么实现呢？这就需要我们要说的属性 methods 了。其实...
Vue3-demo 示例代码
10-08
Vue3 支持原生 TypeScript 编写，提供了更好的类型检查和工具支持。这有助于编写更健壮的代码，并在开发过程中发现潜在错误。 8. **Fragment 和 Portal**： Vue3 允许在模板中使用 `Fragment`，这意味着组件可以...
02_Vue3.zip
11-28
Vue3 是一款由尤雨溪开发的前端JavaScript框架的最新版本，它在Vue2的基础上进行了大量的优化和改进，旨在提供更高效、更灵活的开发体验。这个"02_Vue3.zip"压缩包包含了用于Vue3基础入门的一些实例，帮助初学者快速...
Vue开发之封装分页组件与使用示例
10-17
在Vue.js应用中，封装分页组件是一种常见的做法，它能提高代码的可复用性和模块化程度。这里我们将深入探讨如何在Vue中封装一个基于Element UI库的分页组件，并展示其使用方法。 首先，Element UI是一个流行的前端...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 395
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）
最新发布
m0_71835253的博客
07-25 519
vue单页面 全屏 使用 screenfull 实现全屏（左侧菜单栏隐藏）_vue在打开一个界面的时候隐藏侧边栏-CSDN博客
VUE中的重点*
qq_61132537的博客
07-22 1091
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue3计数器的实现
05-19
Vue3计数器的实现可以通过以下步骤来完成： 1. 在Vue组件中定义一个data属性，用于存储计数器的值。 2. 在模板中使用插值表达式将计数器的值显示出来。 3. 定义两个方法：一个用于增加计数器的值，另一个用于减少计数器的值。在方法中更新data属性的值即可。 4. 在模板中绑定按钮的点击事件，使其调用对应的方法。 以下是一个简单的Vue3计数器实现示例： ``` <template> <div> <p>当前计数值为: {{ count }}</p> <button @click="increment">增加</button> <button @click="decrement">减少</button> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const state = reactive({ count: 0 }); const increment = () => { state.count++; }; const decrement = () => { state.count--; }; return { count: state.count, increment, decrement }; } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

EOPG

你的鼓励是我创造的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值