Vue学习之计数器

最新推荐文章于 2024-06-17 09:42:33 发布

不服输的小乌龟

最新推荐文章于 2024-06-17 09:42:33 发布

阅读量668

点赞数 1

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_61963074/article/details/126995634

版权

Vue学习之计数器

一、效果图
二、项目架构
三、代码实现

正在学Vue，记录每日所学，全当娱乐

一、效果图

在这里插入图片描述
点击+号计数增加1，点击-号计数减少1

二、项目架构

在这里插入图片描述

三、代码实现

1.下载vue.js

(1)进入Vue官网，点击起步

在这里插入图片描述

(2)点击安装

在这里插入图片描述

(3)往下滑，点击开发版本即可下载

在这里插入图片描述

2.导入vue.js

(1)项目中新建js文件夹，把下载好的vue.js复制粘贴即可

在这里插入图片描述

3.计数器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前计数</title>
</head>
<body>
<div id="app">
  <h2>当前计数：{{counter}}</h2>
<!--  <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<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>
</body>
</html>

4.点击右上角浏览器即可运行

在这里插入图片描述
非常简单的计数器就实现了，这只是开始，浅浅记录一下hhh,继续加油！！！

不服输的小乌龟

关注

1
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫