vue学习01简单的计数器实现

最新推荐文章于 2023-12-16 11:46:03 发布

天珩

最新推荐文章于 2023-12-16 11:46:03 发布

阅读量359

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41705396/article/details/103819381

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo03</title>
		<!-- 计数器 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>当前计数：{{counter}}</h2>
			
			<button id="add" v-on:click="add">+</button>
			<!--// 语法糖 -->
			<button id="reduce" @click="sub">-</button>
		</div>
		
	</body>
	
	
	<script>
		
		const app=new Vue({
			el:"#app",
			data:{
				counter:0
			},
			methods:{//定义方法
				add:function(){
					console.log("add 被执行");
					// 当前对象
					this.counter++;
				},
				sub:function(){
					console.log("sub 被执行");
					// 当前对象
					this.counter--;
					
				}
			}
			
		})
		
	</script>
</html>

效果
在这里插入图片描述
代码讲解
创建一个 vue对象；
el：挂载某个元素
data：存放的属性值
{{}} 输出属性的值

methods：需要执行的方法，可以有过个方法，用逗号隔开即可

this：可以类比面向对象；现在需要调用这个 vue（）里面本身的属性，可以使用 *** this. *** 的方式来调用

v-on:click 表示点击的时候调用的函数
@click 和v-on:click 一样的效果，写法更简洁

const 常量；let 变量

代码先写一个整体的结构

1）

<script>
		
		const app=new Vue({
		})
		
	</script>

el:"#app",   //控制那个元素
			data:{
				//放一些需要的属性
			},
			methods:{
			//放一些需要的方法
			}

3）在框架里面填充需要的逻辑，形成最终的代码

天珩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录