Vue单文件学习项目综合案例Demo，黑马vue教程

已于 2024-02-27 15:32:40 修改
阅读量718 收藏 12
点赞数 10
分类专栏： # Vue 文章标签： vue.js 学习 前端
于 2024-02-22 16:24:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46085118/article/details/136237131
版权

文章目录

前言

  • bilibili视频地址
  • 这里的代码直接运行会缺少样式，最好还是直接下载绑定的资源运行查看效果

一、小黑记事本

  • 效果图
    在这里插入图片描述

  • 主代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="./css/index.css"/>
    <title>记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
    <!-- 输入框 -->
    <header class="header">
        <h1>小黑记事本</h1>
        <input placeholder="请输入任务" v-model="inputTask" class="new-todo"/>
        <button class="add" @click="addTask()">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
        <ul class="todo-list" v-for="(item,index) in list" :key="item.id">
            <li class="todo">
                <div class="view">
                    <span class="index">{{ index + 1 }}</span> <label>{{ item.name }}</label>
                    <button class="destroy" @click="delTask(item.id)"></button>
                </div>
            </li>
        </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="list.length > 0">
        <!-- 统计 -->
        <span class="todo-count">合 计:<strong> {{ list.length }} </strong></span>
        <!-- 清空 -->
        <button class="clear-completed" @click="clearAll()">
            清空任务
        </button>
    </footer>
</section>

<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            list: [
                {id: 2, name: "我要吃饭"},
                {id: 1, name: "我要睡觉"}
            ],
            inputTask: ""
        },
        methods: {
            addTask() {
                let tempId;
                //生成一个不重复的id
                if (this.list[0] != null) {
                    tempId = this.list[0].id + 1
                } else {
                    tempId = 1
                }
                this.list.unshift({
                    id: tempId,
                    name: this.inputTask
                });
                this.inputTask = ""
            },
            delTask(id) {
                this.list = this.list.filter(item => item.id != id);
            },
            clearAll() {
                this.list = [];
            }
        }
    })

</script>
</body>
</html>

二、购物车

  • 效果图
    在这里插入图片描述

  • 主代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/inputnumber.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>购物车</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div class="app-container" id="app">
      <!-- 顶部banner -->
      <div class="banner-box"><img src="img/fruit.jpg" alt="" /></div>
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>🏠</span>
        /
        <span>购物车</span>
      </div>
      <!-- 购物车主体 -->
      <div class="main" v-if="fruitList.length > 0">
        <div class="table">
          <!-- 头部 -->
          <div class="thead">
            <div class="tr">
              <div class="th">选中</div>
              <div class="th th-pic">图片</div>
              <div class="th">单价</div>
              <div class="th num-th">个数</div>
              <div class="th">小计</div>
              <div class="th">操作</div>
            </div>
          </div>
          <!-- 身体 -->
          <div class="tbody">
            <div class="tr" :class="{ active:item.isChecked}" v-for="(item,index) in fruitList" :key="item.id" >
              <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
              <div class="td"><img :src="item.icon" alt="" /></div>
              <div class="td">{{ item.price }}</div>
              <div class="td">
                <div class="my-input-number">
                  <button class="decrease" @click="sub(item.id)"> - </button>
                  <span class="my-input__inner">{{ item.num }}</span>
                  <button class="increase" @click="add(item.id)"> + </button>
                </div>
              </div>
              <div class="td">{{ item.price*item.num }}</div>
              <div class="td"><button @click="del(item.id)">删除</button></div>
            </div>
          </div>
        </div>
        <!-- 底部 -->
        <div class="bottom">
          <!-- 全选 -->
          <label class="check-all">
            <input type="checkbox" v-model="isAll" />
            全选
          </label>
          <div class="right-box">
            <!-- 所有商品总价 -->
            <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span>
            <!-- 结算按钮 -->
            <button class="pay">结算( {{ totalCount }} )</button>
          </div>
        </div>
      </div>
      <!-- 空车 -->
      <div class="empty" v-else>🛒空空如也</div>
    </div>
    <script>
      const defaultFruitList = [
        {
          id: 1,
          icon: 'img/火龙果.png',
          isChecked: true,
          num: 2,
          price: 6,
        },
        {
          id: 2,
          icon: 'img/荔枝.png',
          isChecked: false,
          num: 7,
          price: 20,
        },
        {
          id: 3,
          icon: 'img/榴莲.png',
          isChecked: false,
          num: 3,
          price: 40,
        },
        {
          id: 4,
          icon: 'img/鸭梨.png',
          isChecked: true,
          num: 10,
          price: 3,
        },
        {
          id: 5,
          icon: 'img/樱桃.png',
          isChecked: false,
          num: 20,
          price: 34,
        },
      ]
      const app = new Vue({
        el: '#app',
        data: {
          // 水果列表
          fruitList: JSON.parse(localStorage.getItem("list")) || defaultFruitList
          // fruitList: defaultFruitList
        },
        computed: {
          isAll: {
            get() {
              return this.fruitList.every(item => item.isChecked);
            },
            set(value) {
              this.fruitList.forEach(item => item.isChecked = value);
            }
          },
          //计算选中的总数
          totalCount(){
            let count=this.fruitList.reduce((sum,item)=>{
              if (item.isChecked){
                sum+=item.num
              }
              return sum;
            },0)
            return count;
          },
          //计算选中的价格
          totalPrice(){
            let count=this.fruitList.reduce((sum,item)=>{
              if (item.isChecked){
                sum+=item.num*item.price
              }
              return sum;
            },0)
            return count;
          }
        },
        methods: {
          del(id) {
            this.fruitList = this.fruitList.filter(item => item.id != id);
          },
          sub(id) {
            const fruit = this.fruitList.find(item => item.id == id);
            fruit.num--;
            //数量为0，删除商品
            if (fruit.num == 0) {
              this.del(id)
            }
          },
          add(id) {
            const fruit = this.fruitList.find(item => item.id == id);
            fruit.num++
          }
        },
        watch: {
          fruitList:{
            deep:true,
            handler (newValue) {
              //当被删完的时候置空，方便初始化数据
              if (newValue.length == 0) {
                newValue=null
              }
              //需要将变化后的数据存入本地（转JSON）
              localStorage.setItem("list", JSON.stringify(newValue))
            }
          }
        }
      })
    </script>
  </body>
</html>

三、小黑记账清单

  • 效果图
    在这里插入图片描述
  • 主代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
      .red {
        color: red!important;
      }
      .search {
        width: 300px;
        margin: 20px 0;
      }
      .my-form {
        display: flex;
        margin: 20px 0;
      }
      .my-form input {
        flex: 1;
        margin-right: 20px;
      }
      .table > :not(:first-child) {
        border-top: none;
      }
      .contain {
        display: flex;
        padding: 10px;
      }
      .list-box {
        flex: 1;
        padding: 0 30px;
      }
      .list-box  a {
        text-decoration: none;
      }
      .echarts-box {
        width: 600px;
        height: 400px;
        padding: 30px;
        margin: 0 auto;
        border: 1px solid #ccc;
      }
      tfoot {
        font-weight: bold;
      }
      @media screen and (max-width: 1000px) {
        .contain {
          flex-wrap: wrap;
        }
        .list-box {
          width: 100%;
        }
        .echarts-box {
          margin-top: 30px;
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input type="text" class="form-control" placeholder="消费名称" v-model.trim="name" />
            <input type="text" class="form-control" placeholder="消费价格" v-model.number="price"/>
            <button type="button" class="btn btn-primary" @click="add()">添加账单</button>
          </form>

          <table class="table table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>消费名称</th>
                <th>消费价格</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in list" :key="item.id">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td :class="{ red: item.price>500}">{{item.price.toFixed(2)}}</td>
                <td><a href="javascript:;" @click="del(item.id)">删除</a></td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
        
        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
      </div>
    </div>
    <script src="../common/js/echarts.min.js"></script>
    <script src="../common/js/vue.js"></script>
    <script src="../common/js/axios.js"></script>
    <script>
      /**
       * 接口文档地址：
       * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
       * 
       * 功能需求：
       * 1. 基本渲染
       * 2. 添加功能
       * 3. 删除功能
       * 4. 饼图渲染
       */
      const app = new Vue({
        el: '#app',
        data: {
          list:[],
          name:'',
          price:'',
        },
        methods:{
          async getList(){
            const res = await axios.get("https://applet-base-api-t.itheima.net/bill", {
              params: {
                creator: '小黑'
              }
            })
            this.list=res.data.data;
            this.myChart.setOption({
              series: [
                {
                  //更新饼图数据项
                  data: this.list.map(item=>({value:item.price,name:item.name}))
                }
              ]
            });
          },
          async add(){
            if (!this.name){
              alert("请输入消费名称")
              return
            }
            if (typeof this.price !== 'number'){
              alert("请输入正确的消费价格")
              return
            }
            let param={
              creator: '小黑',
              name:this.name,
              price:this.price
            };
            const res = await axios.post("https://applet-base-api-t.itheima.net/bill",param);
            console.log(res)
            this.getList();
            this.name=''
            this.price=''
          },
          async del(id){
            const res=await axios.delete("https://applet-base-api-t.itheima.net/bill/"+id);
            this.getList();
          }
        },
        created() {
          this.getList()
        },
        mounted(){
          option = {
            title: {
              text: '消费账单列表',
              subtext: '',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '消费账单',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 1048, name: 'Search Engine' },
                  { value: 735, name: 'Direct' },
                  { value: 580, name: 'Email' },
                  { value: 484, name: 'Union Ads' },
                  { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          // 基于准备好的dom，初始化echarts实例
          this.myChart = echarts.init(document.getElementById('main'));
          // 绘制图表
          this.myChart.setOption(option);
        },
        computed:{
          totalPrice(){return this.list.reduce((sum,item)=>sum+=item.price,0)}
        }
      })
    </script>
  </body>
</html>
北风toto
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Java内部类实现一个简单的购物车系统.txt
08-17
这个代码实现了一个简单的购物车系统。首先定义了一个ShoppingCart类，其中有一个List类型的items属性和一个double类型的totalPrice属性。在ShoppingCart类的构造方法中初始化了items属性。然后定义了addItem()方法和removeItem()方法，分别用来向items列表中添加商品和移除商品，并更新totalPrice属性的值。最后定义了一个内部类Item，用来表示商品，包括商品名称和价格两个属性。在main方法中创建了一个ShoppingCart对象，并演示了如何添加商品、移除商品以及获取总价的操作。
vue项目demo
11-22
VUE项目的demo例子，便于自己随时可以下载下来学习和研究
通过一系列vue-demo入门vue2
xiuxialala的博客
04-18 426
【代码】通过一系列vue-demo入门vue2。
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局方法。例如，你可以使用这个文件来创建全局的 Vue 实例，定义全局组件，添加全局指令，以及访问全局的 mixin、过滤器、插件等。 具体来说，`vue.global.js` 文件定义了以下内容： 1. `Vue` 对象：全局范围的 Vue 构造函数，用于创建 Vue 实例。 2. 全局方法：如 `Vue.createApp`、`Vue.component`、`Vue.directive` 等，用于定义组件、指令等全局内容。 3. 全局属性：如 `Vue.config` 用于配置全局行为，`Vue.version` 用于获取 Vue 的版本号。 4. 全局混入：使用 `Vue.mixin` 可以在所有组件中混入指定的选项。 5. 全局过滤器：使用 `Vue.filter` 可以定义全局过滤器。 6. 全局插件：使用 `Vue.use` 可以注册
vue实现购物车的监听
10-15
主要为大家详细介绍了利用vue的监听事件实现一个简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
版本：v2.6.10 内容：vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common.js、vue.runtime.common.dev.js等14个资源
vue前端开发自学,透传属性的练习demo
yrldjsbk的博客
01-12 448
这是子组件内容，AttrComponent.vue的代码内容。可以看出来，它里面是有且仅有一个根元素，H3标签，如果多一个就不行了。透传属性就会失效了。必须是有且仅有一个根元素才行。vue前端开发自学,透传属性的练习demo！以上代码是，父组件的情况。也是App.vue的入口文件内容。我们还特意做了继承的设定，目前是true。所以可以看见，的确是透传属性class成功了。如果改成false.不允许继承的话，就无法透传那个class属性了。
vue的项目搭建demo
Hacker-Prince
09-11 2565
一、安装node环境 　　1、下载地址为：https://nodejs.org/en/ 　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功 　　 　　3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。 　　 　　检查是否安装成功：
vue项目流程demo示例
tang31415926的博客
03-07 1284
自己写从头做一个vue项目，没什么技术，主要是温故流程。 没写完，只写到创建完项目。
从零开始搭建一个vue项目（保姆级教程）
weixin_50989469的博客
07-23 3319
我这边在本地起了一个后台服务（建议后台服务做好跨域配置），模拟接口访问调用，一共测试了三种方式：①get无参请求 ②get有参请求 ③post请求json传参。新建api文件夹，放在api文件夹下，需要引入http文件，js文件地址：src/api/pageB.js。项目建好之后，就可以配置ui组件了，可以选择npm去装，也可以选择yarn安装，我把两个命令都列出来了。第二步，选择【Vue.js】，输入自己项目的名称，点击【Create】生成项目。在main.js中import之后，ui组件才正式生效。
07-Vue基础之综合案例——小黑记事本
weixin_46625500的博客
08-23 2749
案例 小黑记事本
wxapp_starbucks-仿星巴克微信小程序.zip
09-23
清凉一夏 来点一杯星巴克吧! 当我们还在家中吹着空调敲着代码吃着西瓜的时候，可能你的她还在炎炎夏日下大汗淋漓，打开这个小程序，为她点上一杯冰镇的星巴克，后续的故事就不用再说了把，作为还在起跑线上的全栈的学习者，初试微信小程序，花了四天左右的时间初步的完成了这个小程序，这个小程序吸引我的真的就是颜啊（身为颜控的我），有木有觉得很美观，下面我们就一起看下这个demo吧 如果各位看官觉得还行不妨点个赞哦项目源码： GitHub 求小星星鼓励项目工具及文档1.微信web开发者工具：微信小程序官网 一款很好用的小程序编辑软件2.开发文档：微信小程序必备无敌文档 你想要的都在里面页面注册 app.json {"pages":[    "pages/index/index",     星巴克用星说 主页    "pages/detail/detail",   @all 我想对你们说    "pages/giftcard/giftcard", 礼品卡详情页 ], }项目功能已实现的功能scroll-view等基础事件tab切换及其高亮事件添加购物车的显示隐藏功能付款的显示隐藏及其高亮的功能未实现的功能门店列表（显示最近30家门店）功能地图定位功能具体功能预览1.tab切换在tab切换上，做到了大图切换和小图高亮,是不是效果还不错具体效果图：如下 这里底部闪光是因为录屏软件的问题哦_实现代码：如下                                   选择卡面                                                                                                                                                                                             使用点击事件就可以实现这些功能啦，有没有很简单 2.giftcard在点击左边一部分的时候是跳转礼品卡详情3.购物付款功能在点击右边部分的➕和➖就会修改对应的数量了，当然哦，下面的结账也会显示你所购买的数量和总价哦，是不是觉得符合现代化简约美呀这是这个小程序最闪光点也最需要思考的地方啦，仔细一看发现是不是操作后有很多小的变化，也是这小小的变化让整个小程序更美观了这是选择礼品的布局样式             <tex
vue.js和vue.min.js
06-13
vue.js和vue.min.js
Vue实现购物车功能
12-29
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <link rel=stylesheet href=https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css rel=external nofollow /> </head> <body>
vue 实战项目demo
11-16
vue移动端实战app分享，使用最新版本vue2.6+vuerouter
Vue多文件学习项目综合案例Demo，黑马vue教程
03-04
可直接运行的demo文件，vue小项目
VUEVue基础教程、实战案例和实战项目讲解
最新发布
05-17
Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和...
vue2vue3项目案例
07-27
对于一个Vue2和Vue3项目的案例，你可以按照以下步骤进行操作： 1. 首先，安装Vue2和Vue3的脚手架。在你选择的系统盘上创建两个文件夹，分别用于存放Vue2和Vue3版本的项目。进入Vue2文件夹，在地址栏中输入cmd并按...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值