Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)

01.生命周期

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

生命周期四个阶段:① 创建 挂载更新 销毁

1.创建阶段:创建响应式数据

2.挂载阶段:渲染模板

3.更新阶段:修改数据,更新视图

4.销毁阶段:销毁Vue实例

02.生命周期钩子

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

<!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">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      beforeCreate(){
        console.log('beforeCreate',this.count)        
      },
      // 创建响应数据之后,已经能获取到响应数据
      // ****** 进入页面就要请求数据的就放到这个钩子函数里面
      created(){
        console.log('beforeCreate',this.count)   
      },
      
      // 挂载阶段 - 相应数据挂载到标签之前
      beforeMount(){
        console.log('beforeMount',document.querySelector('h3'))
      },
      // 响应数据挂载到标签上面了
      // ****************** 操作标签
      mounted(){
        console.log('mounted',document.querySelector('h3'))
      },

      // 数据更新阶段
      // 修改了响应式数据,没有完全更新到视图
      beforeUpdate(){
        console.log('beforeUpdate',this.count,document.querySelector('h3'))
      },
      updated(){
        console.log('updated',this.count,document.querySelector('h3'))
      },

      // 销毁 → 关闭浏览器
      beforeDestory(){
        console.log('销毁前')        
      },
      destroyed(){
        console.log('销毁后') 
      }
    })
  </script>
</body>
</html>

 代码示例:

created应用

<!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">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .news {
      display: flex;
      height: 120px;
      width: 600px;
      margin: 0 auto;
      padding: 20px 0;
      cursor: pointer;
    }
    .news .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-right: 10px;
    }
    .news .left .title {
      font-size: 20px;
    }
    .news .left .info {
      color: #999999;
    }
    .news .left .info span {
      margin-right: 20px;
    }
    .news .right {
      width: 160px;
      height: 120px;
    }
    .news .right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>

  <div id="app">
    <ul>
      <li class="news" v-for="(item,index) in list" :key="item.id">
        <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/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 接口地址:http://hmajax.itheima.net/api/news
    // 请求方式:get
    const app = new Vue({
      el: '#app',
      data: {
        list: []
      },
     async created(){
       const res = await axios.get('http://hmajax.itheima.net/api/news')
       console.log(res)       
       this.list = res.data.data
      }
    })
  </script>
</body>
</html>

mounted应用


<!DOCTYPE html>
<html lang="zh-CN">

<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">
  <title>示例-获取焦点</title>
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
  <!-- 核心样式 -->
  <style>
    html,
    body {
      height: 100%;
    }
    .search-container {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
    .search-container .search-box {
      display: flex;
    }
    .search-container img {
      margin-bottom: 30px;
    }
    .search-container .search-box input {
      width: 512px;
      height: 16px;
      padding: 12px 16px;
      font-size: 16px;
      margin: 0;
      vertical-align: top;
      outline: 0;
      box-shadow: none;
      border-radius: 10px 0 0 10px;
      border: 2px solid #c4c7ce;
      background: #fff;
      color: #222;
      overflow: hidden;
      box-sizing: content-box;
      -webkit-tap-highlight-color: transparent;
    }
    .search-container .search-box button {
      cursor: pointer;
      width: 112px;
      height: 44px;
      line-height: 41px;
      line-height: 42px;
      background-color: #ad2a27;
      border-radius: 0 10px 10px 0;
      font-size: 17px;
      box-shadow: none;
      font-weight: 400;
      border: 0;
      outline: 0;
      letter-spacing: normal;
      color: white;
    }
    body {
      background: no-repeat center /cover;
      background-color: #edf0f5;
    }
  </style>
</head>

<body>
<div class="container" id="app">
  <div class="search-container">
    <img src="https://www.itheima.com/images/logo.png" alt="">
    <div class="search-box">
      <input type="text" v-model="words" id="inp">
      <button>搜索一下</button>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      words: ''
    },
    mounted(){
      document.querySelector('#inp').focus()
    }
  })
</script>

</body>

</html>

03.综合案例小黑记账本

思路分析:

1.基本渲染

  • 立刻发送请求获取数据 created

  • 拿到数据,存到data的响应式数据中

  • 结合数据,进行渲染 v-for

  • 消费统计 —> 计算属性

2.添加功能

  • 收集表单数据 v-model,使用指令修饰符处理数据

  • 给添加按钮注册点击事件,对输入的内容做非空判断,发送请求

  • 请求成功后,对文本框内容进行清空

  • 重新渲染列表

3.删除功能

  • 注册点击事件,获取当前行的id

  • 根据id发送删除请求

  • 需要重新渲染

4.饼图渲染

  • 初始化一个饼图 echarts.init(dom) mounted钩子中渲染

  • 根据数据试试更新饼图 echarts.setOptions({...})

<!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>{{ item.price }}</td>
              <td><a href="javascript:;" @click="del(item.id)">删除</a></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4">消费总计: 298.00</td>
            </tr>
          </tfoot>
        </table>
      </div>

      <!-- 右侧图表 -->
      <div class="echarts-box" id="main"></div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.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: ''
      },
      async created() {
        // 删除和添加都要调用拿最新数据渲染 → 封装个函数
        // const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{
        //   params:{
        //     creator:'ZKKK'
        //   }
        // })
        // console.log(res)
        // this.list = res.data.data  
        this.render()
      },
      methods: {
        // 定义请求函数
        async render() {
          const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
            params: {
              creator: 'ZKKK'
            }
          })
          console.log(res)
          this.list = res.data.data
          // 重现渲染饼图,使用最新的数据
          this.myChart.setOption(option = {
            series: [
              {
                data: this.list.map(item => ({
                  value: item.price,
                    name: item.name
                }))
              }
            ]
          })
        },
        // 删除函数
        async del(id) {
          await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
          this.render()
        },
        // 添加函数
        async add() {
          console.log(111)

          if (this.name.trim() == '' || this.price == '') {
            return
          }
          await axios.post('https://applet-base-api-t.itheima.net/bill', {
            creator: 'ZKKK',
            name: this.name,
            price: this.price
          })
          this.render()
          this.name = ''
          this.price = ''
        }
      },
      mounted() {
        this.myChart = echarts.init(document.querySelector('#main'))
        this.myChart.setOption(option = {
          title: {
            text: '消费账单',
            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)'
                }
              }
            }
          ]
        })
      }
    })
  </script>
</body>

</html>

04.工程化开发和脚手架

开发Vue的两种方式

  • 核心包传统开发模式:基于html / css / js 文件,直接引入核心包,开发 Vue。

  • 工程化开发模式:基于构建工具(例如:webpack)的环境中开发Vue。

工程化开发模式问题:

  • webpack配置不简单

  • 雷同的基础配置

  • 缺乏统一的标准

脚手架Vue CLI

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处:

  1. 开箱即用,零配置

  2. 内置babel等工具

  3. 标准化的webpack配置

使用步骤:

  1. 全局安装(只需安装一次即可) yarn global add @vue/cli 或者 npm i @vue/cli -g

  2. 查看vue/cli版本: vue --version

  3. 创建项目架子:vue create project-name(项目名不能使用中文)

  4. 启动项目:yarn serve 或者 npm run serve(命令不固定,找package.json)

主要使用三个文件:

  1. main.js 入口文件

  2. App.vue App根组件

  3. index.html 模板文件

运行流程

 05.组件化开发

组件化:一个页面可以拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。

​ 好处:便于维护,利于复用 → 提升开发效率。

​ 组件分类:普通组件、根组件。

06.根组件App.vue

组件是由三部分构成

  • 语法高亮插件

三部分构成

  • template:结构 (有且只能一个根元素)

  • script: js逻辑

  • style: 样式 (可支持less,需要装包)

让组件支持less

(1) style标签,lang="less" 开启less功能

(2) 装包: yarn add less less-loader -D 或者npm i less less-loader -D

07.普通组件的注册-局部注册 

1.特点:

只能在注册的组件内使用

2.步骤:

  1. 创建.vue文件(三个组成部分)

  2. 在使用的组件内先导入再注册,最后使用

3.使用方式:

当成html标签使用即可 <组件名></组件名>

4.注意:

组件名规范 —> 大驼峰命名法, 如 HmHeader

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default {  // 局部注册
  components: {
   '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader
  }
}

08.普通组件的注册-全局注册 

1.特点:

全局注册的组件,在项目的任何组件中都能使用

2.步骤

  1. 创建.vue组件(三个组成部分)

  2. main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

组件名规范 —> 大驼峰命名法, 如 HmHeader

5.语法

Vue.component('组件名', 组件对象)

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/940974.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安装SQL Server2019 Developer版本时出现“服务没有及时响应启动或控制请求”的问题

1. 异常描述 2. 异常分析 应该是数据库服务所属账户的权限不够&#xff0c;可以设置为Administrator&#xff1b; 3. 异常解决 参考资料&#xff1a;https://blog.csdn.net/zi_longh/article/details/130293081 注意&#xff1a;SQL Server代理和SQL Server数据库引擎的账户…

【系统移植】制作SD卡启动——将uboot烧写到SD卡

在开发板上启动Linux内核&#xff0c;一般有两种方法&#xff0c;一种是从EMMC启动&#xff0c;还有一种就是从SD卡启动&#xff0c;不断哪种启动方法&#xff0c;当开发板上电之后&#xff0c;首先运行的是uboot。 制作SD卡启动&#xff0c;首先要将uboot烧写到SD卡&#xff…

2. FPGA基础了解--全局网络

前言 引入扇出的概念介绍FPGA中的全局网络为后续时序优化埋下伏笔 扇出 在FPGA设计中扇出是一个重要的概念&#xff0c;所谓的扇出就是一个控制信号所能控制的数据信号的总个数&#xff0c;比如ctrl信号的扇出就是16 reg ctrl 0; reg [15:0] out 0; always (posedge c…

RAGFlow(3):VScode端口转发在在本机浏览(比内网穿透好用)

docker会在内网服务器上的80端口部署&#xff0c;然而内网Ip是无法访问到的&#xff0c;所以无法看到页面。所以之前想到的解决方法是利用zerotier工具做内网穿透&#xff0c;将内网服务器的公网ip和本机ip组成一个局域网&#xff0c;把内网Ip变成了192.168xxx&#xff0c;这样…

生成式AI大模型未来发展趋势:开启创造力无限可能

随着人工智能技术的不断突破&#xff0c;生成式AI大模型正逐渐成为业界关注的焦点。从文本生成、图像创作到音乐创作&#xff0c;生成式AI大模型在多个领域展现出惊人的创造力。展望未来&#xff0c;生成式AI大模型的发展趋势将呈现以下特点&#xff1a; 一、模型规模持续扩大&…

Mybatis增删改查(配置文件版)

准备环境 1、数据库表tb_brand 2、实体类Brand 3、测试用例 3、1在test包中的java包中创建测试类com.xyy.test.MybatisTest.java 4、安装MyBatisX插件 添加插件后&#xff0c;因为在Mapper代理开发时&#xff0c;Mapper接口要和Mapper.xml映射文件放在同一个报下&#xff0…

Activiti开启流程实例

开始绘流程图&#xff0c;首先右击鼠标可以看到一下图标&#xff0c;都有相对应的意思 画好一个简易的流程过后&#xff0c;可以看到xml文件中已经有了 右击生成png格式的图片 图片点击后就是一个视图的效果 将流程文件部署 Test public void testDeploy() {//1.创建流程引擎P…

12.19问答解析

概述 某中小型企业有四个部门&#xff0c;分别是市场部、行政部、研发部和工程部&#xff0c;请合理规划IP地址和VLAN&#xff0c;实现企业内部能够互联互通&#xff0c;同时要求市场部、行政部和工程部能够访问外网环境(要求使用OSPF协议)&#xff0c;研发部不能访问外网环境…

完全离线使用,效率直接拉满

现在越来越多的人使用OCR软件来提高自己的工作效率&#xff0c;今天给大家推荐一款电脑端的文字识别工具&#xff0c;对比以往的软件来说&#xff0c;功能更加丰富全面。 Umi-OCR 美术、舞蹈、音乐 打开软件之后需要安装一下。 软件主要有截图OCR识别、批量OCR识别、批量文档识…

UITableView实现通讯录效果

// // TableViewIndexViewController.m // study2024 // // Created by figo zhu on 2024/12/22. //#import "TableViewIndexViewController.h" //实现协议UITableViewDelegate,UITableViewDataSource interface TableViewIndexViewController ()<UITableView…

【HarmonyOs学习日志(14)】计算机网络之域名系统DNS

域名系统DNS 域名系统DNS——从域名解析出IP地址 文章目录 域名系统DNS概述域名到IP地址的解析 互联网的域名结构命名标准 域名服务器域名的解析过程 概述 域名系统DNS&#xff08;Domain Name System&#xff09;是互联网使用的命名系统&#xff0c;用来把便于人们使用的机器…

贪心算法【Lecode_HOT100】

文章目录 1.买卖股票的最佳时机No.1212.跳跃游戏No.553.跳跃游戏IINo.454.划分字母区间No.763 1.买卖股票的最佳时机No.121 class Solution {public int maxProfit(int[] prices) {if (prices null || prices.length 0) {return 0;}// 初始化买入价格为最大值&#xff0c;最大…

【PCIe 总线及设备入门学习专栏 4 -- PCIe四种地址空间介绍】

文章目录 Overview1. 配置空间2. IO 空间3. Memory 空间BAR空间示例 -- 32bit内存地址空间请求BAR空间示例 -- 64bit内存地址空间请求 4. message空间 转自&#xff1a;cpu_arch 芯片架构笔记 2024年08月03日 22:32 上海 Overview PCIe架构定义了4种地址空间&#xff1a;配置…

SAP HCM 成本分配涉及的表

导读 成本分配:在HCM模块在SAP模块中&#xff0c;核心就是成分如何与财务无缝衔接&#xff0c;今天介绍的是关于成本中心在HR模块中涉及的几张表&#xff0c;对精细化管理有相应的帮助。涉及的信息类型有0014、0015、0267等 作者&#xff1a;vivi&#xff0c;来源&#xff1a;o…

Java模拟Mqtt客户端连接Mqtt Broker

Java模拟Mqtt客户端基本流程 引入Paho MQTT客户端库 <dependency><groupId>org.eclipse.paho</groupId><artifactId>org.eclipse.paho.mqttv5.client</artifactId><version>1.2.5</version> </dependency>设置mqtt配置数据 …

Day13 用Excel表体验梯度下降法

Day13 用Excel表体验梯度下降法 用所学公式创建Excel表 用Excel表体验梯度下降法 详见本Day文章顶部附带资源里的Excel表《梯度下降法》&#xff0c;可以对照表里的单元格公式进行理解&#xff0c;还可以多尝试几次不同的学习率 η \eta η来感受&#xff0c;只需要更改学习率…

rk3568之mpp开发笔记怎么实现mpp编码摄像头实时码流?

前言&#xff1a; 大家好&#xff0c;今天给大家分享的内容是在rk3568上&#xff0c;通过mpp来进行实时对摄像头imx415采集的码流数据进行编码成h264或者h265,后期文章&#xff0c;会开发测试一下通过rtsp推流出去&#xff0c;然后电脑端拉流&#xff0c;看一下整个环路的延迟多…

Keil5 STM32库函数的工程

库函数来间接的操作寄存器 条件编译&#xff0c;如果你定义了USE_STDPERIPH_DRIVER &#xff08;使用标准外设驱动&#xff09;这个字符串&#xff0c;stm32f10x_conf.h才有效

单片机上电后程序不运行怎么排查问题?

1.电源检查。使用电压表测量单片机的电源电压是否正常&#xff0c;确保电压在规定的范围内&#xff0c;如常见的5V。 2.复位检查。检查复位引脚的电压是否正常&#xff0c;在单片机接通电源时&#xff0c;复位引脚通常会有一个高电平&#xff0c;按下复位按钮时&#xff0c;复位…

Linux快速入门-Linux的常用命令

Linux的常用命令 1. Linux的终端与工作区1.1 终端概述1.2 切换终端 2. Shell语言解释器2.1 Shell概述 3. 用户登录与身份切换3.1 su 命令3.2 sudo 命令 4. 文件、目录操作命令4.1 pwd 命令4.2 cd 命令4.3 ls 命令4.3.1 ls 指令叠加使用 4.4 mkdir 命令4.5 rmdir 命令4.6 cp 命令…