VUE之旅—day2

已于 2024-05-15 22:00:49 修改
阅读量669 收藏 29
点赞数 29
分类专栏： 前端 文章标签： vue.js javascript 前端
于 2024-05-15 22:00:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L19541216/article/details/138924956
版权

文章目录

Vue生命周期和生命周期的四个阶段

思考：

什么时候可以发送初始化渲染请求？（越早越好）

什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期： 一个Vue实例从创建到销毁的整个过程

生命周期四个阶段： ①创建②挂载③更新④销毁

在这里插入图片描述

在这里插入图片描述

Vue生命周期函数（钩子函数）

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】—>让开发者可以在【特定阶段】运行自己的代码。

在这里插入图片描述

代码说明

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生命周期的四个阶段</title>
</head>

<body>
  <div id="app">
    <h1>{{title}}</h1>
    <button @click="sub">-</button>
    <span>{{count}}</span>
    <button @click="add">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1.创建阶段（准备数据）
      beforeCreate() {
        console.log('beforeCreate 响应式数据准备好之前', this.count);//undefined
      },
      created() {
        // created，这一阶段开始，就能发送初始化渲染请求
        console.log('Created 响应式数据准备好之后', this.count);// 100
      },

      // 2.挂载阶段（渲染模板）
      beforeMount() {
        console.log('beforeMount 模板渲染之前', document.querySelector('h1').innerHTML);// {{title}}
      },
      mounted() {
        // created，这一阶段开始，就能操作dom了
        console.log('mounted 模板渲染之后', document.querySelector('h1').innerHTML);// 计数器
      },

      // 3.更新阶段（修改数据 → 更新视图）
      beforeUpdate() {
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML);
      },
      updated() {
        console.log('Updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML);
      },
      //4.卸载阶段
      //Vue提供了一个语法 Vue对象名.$destroy()  用来查看卸载状态
      beforeDestroy() {
        console.log('beforeDestory 卸载前');
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...');
      },
      destroyed() {
        console.log('destroyed 卸载后');
      },
      methods: {
        add() {
          this.count++
        },
        sub() {
          this.count--
        }
      }
    })
  </script>
</body>

</html>
created应用—新闻列表渲染
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻列表渲染</title>
  <style>
    #app {
      width: 500px;
      margin: 0 auto;
    }

    #app ul {
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #app ul li.news {
      width: 100%;
      height: 120px;
      display: flex;
      background-color: rgb(252, 252, 252);
      margin: 20px 0;
      border: 1px solid #eee;
      border-left: none;
      border-right: none;
    }

    #app ul li.news .left {
      width: 70%;
      height: 100%;

    }

    #app ul li.news .left .title {
      width: 90%;
      height: 70%;
      font-size: 18px;
      font-weight: bold;
      margin: 5px 0;
      color: #292929;
    }

    #app ul li.news .left span {
      font-size: 14px;
      color: #454545;
      margin-right: 20px;
    }

    #app ul li.news .right {
      width: 30%;
      height: 100%;
    }

    #app ul li.news .right img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="(item,index) in list" :key="item.id" class="news">
        <div class="left">
          <div class="title">{{item.title}}</div>
          <div class="info">
            <span>{{item.source}}</span>
            <span>{{item.time}}</span>
          </div>
        </div>
        <div class="right">
          <img :src="item.img" alt="">
        </div>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    // 接口地址：http://hmajax.itheima.net/api/news
    // 请求方式 get 
    const app = new Vue({
      el: '#app',
      data: {
        list: []
      },
      async created() {
        // 1.发送请求，获取数据
        const res = await axios.get('http://hmajax.itheima.net/api/news')
        console.log(res);//查看获取到的数据
        // 2.将数据更新给data中的list
        this.list = res.data.data
      }
    })
  </script>
</body>

</html>
mounted应用—进入页面搜索框就获得焦点
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜索框一进入就获得焦点</title>
  <style>
    .container {
      width: 600px;
      height: auto;
      margin: 0 auto;
    }

    .container .seacher-container {
      width: 100%;
      height: 150px;
      text-align: center;
      background-color: aliceblue;
    }

    .container .seacher-container .search-box {
      width: 80%;
      height: 35px;
      margin: 20px auto;
      border: 1px solid #8b8b8b;
      display: flex;
      border-radius: 5px;
      justify-content: flex-end;
      align-items: center;
      background-color: #ffffff;
      border-right: none;
    }

    .container .seacher-container .search-box input {
      width: 78%;
      height: 90%;
      border: none;
      outline: none;
      background-color: #ffffff;

    }

    .container .seacher-container .search-box button {
      width: 20%;
      height: 106%;
      border: none;
      outline: none;
      background-color: #ea2704;
      color: #f5f5f5;
      border-radius: 5px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="container" id="app">
    <div class="seacher-container">
      <img src="http://www.itheima.com/images/logo.png" alt="">
      <div class="search-box">
        <input type="text" v-model="words" id="inp" autocomplete="off">
        <button>搜索一下</button>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        words: ''
      },
      // 核心思路：
      // 1.等输入框渲染出来
      // 2.让输入框获取焦点
      mounted() {
        document.querySelector('#inp').focus()
      }
    })
  </script>
</body>

</html>
账单统计（Echarts可视化图表渲染）
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #app {
      margin: 0 auto;
      width: 1100px;
      height: auto;
    }

    h3 {
      color: #8d5252;
    }

    /* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc- */
    .container {
      width: 1100px;
      display: flex;
      justify-content: space-between;
    }

    .container #tableArea {
      width: 50%;
      height: auto;
    }

    .container #tableArea .iptArea {
      width: 100%;
      height: 30px;
      margin-bottom: 10px;
    }

    .container #tableArea .iptArea input {
      width: 40%;
      height: 100%;
      border: 1px solid #e2e1e1;
      border-radius: 4px;
      text-indent: 5px;
      outline: none;
    }

    .container #tableArea .iptArea button {
      width: 15%;
      height: 110%;
      border: none;
      outline: none;
      background-color: rgb(9, 114, 206);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .container #tableArea table {
      width: 100%;
      height: auto;
      text-align: left;
      border-collapse: collapse;
      font-size: 14px;
    }

    .container #tableArea table tr {
      height: 40px;
      border-bottom: 1px solid #eee;
    }

    .container #tableArea table tr .red {
      color: red;
    }

    .container #tableArea table tr td a {
      color: rgb(42, 97, 238);
      text-decoration: none;
    }

    .container #chartArea {
      width: 45%;
      height: 330px;
      border: 1px solid #eee;
      padding: 10px;
    }

    @media (max-width: 768px) {
      .container {
        width: 600px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .container #tableArea {
        width: 90%;
      }

      .container #chartArea {
        width: 90%;
      }
    }

    @media (min-width: 1200px) {
      .container {
        width: 1100px;
        flex-wrap: wrap;
      }

      .container #tableArea {
        width: 50%;
      }

      .container #chartArea {
        width: 45%;
      }
    }
  </style>
</head>

<body>
  <div id="app">
    <h3>小黑记账清单</h3>
    <div class="container">
      <div id="tableArea">
        <div class="iptArea">
          <input type="text" placeholder="消费名称" v-model.trim="name">
          <input type="text" placeholder="消费价格" v-model.number="price">
          <button @click="addData">添加账单</button>
        </div>
        <table>
          <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}}</td>
              <td><a @click="delData(item.id)" href="javascript:;">删除</a></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th colspan="4">消费总计：<span>{{totalPrice}}</span></th>
            </tr>
          </tfoot>
        </table>
      </div>
      <div id="chartArea">
        <div id="main" style="width:550px;height:330px;"></div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <!-- 
  //接口地址
  // 查询我的账单列表 https://applet-base-api-t.itheima.net/bill get请求方式，请求参数creator
  // 删除账单明细 https://applet-base-api-t.itheima.net/bill/{id} delete请求方式，请求参数id
  // 添加账单 https://applet-base-api-t.itheima.net/bill post请求方式，请求参数creator、name、 price
  // 转换 https://applet-base-api-t.itheima.net/bill
   -->
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [],
        name: '',
        price: ''
      },
      computed: {
        totalPrice() {
          return this.list.reduce((sum, item) => sum + item.price, 0).toFixed(2)
        }
      },
      created() {
        this.getData()
      },
      mounted() {
        this.myChart = echarts.init(document.getElementById('main'));
        this.myChart.setOption({
          title: {
            text: '消费账单列表',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '消费账单',
              type: 'pie',
              radius: '50%',
              data: [

              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });

      },
      methods: {
        async getData() {
          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 addData() {
          // 优化
          if (!this.name) {
            alert("请输入消费名称")
            return
          }
          if (typeof this.price !== 'number') {
            alert("请输入正确的消费价格")
            return
          }
          //发送添加请求
          const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
            creator: '小黑',
            name: this.name,
            price: this.price
          })
          console.log(res);
          // 重新再渲染一次
          this.getData()
          // 清空输入框
          this.name = ''
          this.price = ''
        },
        async delData(id) {
          const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
          console.log(res);
          // 重新再渲染一次
          this.getData()
        }
      }

    })
  </script>
</body>

</html>
今日上上签-
关注
  • 29
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习Vue之旅：Day2——计算属性
qq_44139411的博客
09-02 170
计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。 所以，对于任何复杂逻辑，你都应..
学习Vue之旅：Day2——插槽
qq_44139411的博客
09-03 109
目录 一、插槽内容 二、编译作用域 三、后备内容 四、具名插槽 五、作用域插槽 独占默认插槽的缩写语法 解构插槽 Prop 一、插槽内容 官网的意思大概是： 如果<navigation-link>的template中没有包含一个<slot>元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。 意思就是：如果<navigation-link>模板 没有插槽<slot></slot>，模板就...
vue2-day3.zip
08-10
vue2-day3.zip
Vue2.0学习-2-深入了解组件--4--插槽
Small_sesame的博客
08-20 152
插槽内容 编译作用域
VUE之旅—day1
L19541216的博客
04-24 797
Vue 是一个用于的 。创建Vue实例，初始化渲染 插值表达式 利用表达式进行插值，将数据渲染页面中插值表达式的注意点:什么是响应式？数据改变，视图自动更新使用Vue开发---->更专注于业务核心逻辑如何访问或修改数据？data中的数据，最终会被添加到实例上安装vue工具指令就是带有v-前缀的特殊属性，不同属性对应不同的功能。学习不同的指令——>解决不同业务场景需求 v-show v-if v-show和v-if的区别 v-else和v-else-if v-on v-bind v-for
学习Vue之旅：Day1
qq_44139411的博客
09-01 56
一、关于Vue脚手架的安装 （①nrm ls一直报错/②脚手架安装得超级慢，则使用如下方法解决这两个问题） 在http://nodejs.cn/download/ 安装 node.js（因为下载的node.js会顺带下载好npm） 测试nodejs 是否安装 ----在cmd中输入node -v 测试npm是否自动安装---- npm -v npm install -g cnpm 在这里我们使用国内镜像，提高下载速度，所以安装cnpm，后面需要用到npm命令的，不要交替使用，一律改...
学习Vue之旅：Day2
qq_44139411的博客
09-02 64
目录 问题①：Vue报错：因为在此系统上禁止运行脚本 问题②：Command vue init requires a global addon to be installed. Please run yarn global add @vue/cli-init and try again. 问题③：如何创建Vue项目？ 问题①： vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本 解决方法： h...
基于Vue的旅游网站的设计与实现.rar
11-28
摘要：本套旅游系统是基于Vue和Element-ui来设计界面，以及Vuex状态机来管理数据，Vue是MVVM架构，开发和使用非常方便、快捷。旅游系统的后端是通过SpringBoot的SSM结构进行实现，SSM结构目前已经是Java语言的主流...
Day8 智慧商城 Vue2
08-27
Day8 智慧商城 Vue2
vue2-day8.zip
08-10
vue2-day8.zip
vue2-day7.zip
08-10
vue2-day7.zip
探索Web前端三大主流框架：React，Angular和Vue.js
Kimi2024的博客
06-01 764
其中，React，Angular和Vue.js是最受欢迎的三大主流前端框架，它们分别由Facebook，Google和前Google工程师尤雨溪（Evan You）创建。总的来说，React，Angular和Vue.js各有其独特的优势和特点，选择哪个框架取决于项目的具体需求和开发团队的偏好。不过，无论选择哪个框架，都可以确信，你将站在一个坚实的基础之上，构建出高性能，响应式的Web应用。Angular是一个由Google维护的开源Web应用框架，它提供了一个完整且丰富的功能集，用于构建跨平台的应用。
vue-router 源码分析——2. router-link 组件是如何实现导航的
最新发布
miyagiSimple的博客
06-04 742
vue-router中 router-link 组件是如何实现导航的。recolve返回的对象里面的内容主要为location, route , href。location是标准化后的to，并且打上了标记表示已标准化，防止多次标准化，提升效率。route是通过遍历pathList和pathMap，利用正则表达式找到的和to匹配的路由对象，里面包含很多需要的内容。href在默认的hash模式下，会在to的前面加上#号，例如这里的’#/foo’。
vue3 vue-draggable-next 实现拖拽穿梭框效果
游九尘的博客
06-01 416
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
基于Springboot + vue实现的火锅店管理系统
qq_38470315的博客
06-03 82
主营内容：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。文末获取源码。
vue-标签选择
zw899004的专栏
06-01 735
vue-标签选择
Vue中如何获取dom元素？
zhang20040217的博客
06-04 244
在Vue中，通常我们不直接操作DOM元素，因为Vue是一个声明式渲染的框架，它鼓励我们使用数据驱动视图的方式来更新UI。然而，在某些情况下，你可能需要直接访问DOM元素。在这种情况下，你可以使用Vue的。只在组件渲染完成后被填充，并且它是非响应式的。它仅仅作为一个直接访问子组件或DOM元素的逃生舱口。你应该避免在模板或计算属性中使用。获取了对应的DOM元素，并调用了它的。方法会被调用，输入框会获得焦点。在这个方法中，我们通过。然后，在Vue实例的。对象中，我们定义了一个。在这个例子中，我们在。
vue用vite配置代理解决跨域问题（target、rewrite和changeOrigin的使用场景）
weixin_44161385的博客
06-04 473
vue配置解决跨域
Vue踩坑之旅——Vuex
06-03
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库，它集中管理应用程序的所有组件的状态。在使用 Vuex 过程中，可能会遇到以下一些常见的问题和坑： 1. 不要在 mutations 中执行异步操作，因为 mutations 是同步...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值