8天Vue2--第三天-CSDN博客

本文链接：https://blog.csdn.net/m0_62787705/article/details/133758976

文章目录

自用复习：

资料来源：黑马程序员Vue2

本文概要：黑马Vue2的笔记，补充了一些 例子的代码 和 知识点细节 利于理解。

一、今日目标

1.生命周期

生命周期介绍
生命周期的四个阶段
生命周期钩子
声明周期案例

2.综合案例-小黑记账清单

列表渲染
添加/删除
饼图渲染

3.工程化开发入门

工程化开发和脚手架
项目运行流程
组件化
组件注册

4.综合案例-小兔仙首页

拆分模块-局部注册
结构样式完善
拆分组件 – 全局注册

二、Vue生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

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

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

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

在创建响应式数据阶段。这个阶段创建容器和Vue实例未初始化完毕，html为容器，Vue为实例。

在这里插入图片描述

2.挂载阶段：渲染模板

可以渲染html容器中的数据了，如 {{item.id}}

3.更新阶段：修改数据，更新视图

修改数据，重新自动渲染，

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

消毁Vue实例

在这里插入图片描述

三、Vue生命周期钩子

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

生命周期四个阶段，每个阶段连接的时间间隙我们可以进行操作，这个时间段操作的函数叫做钩子，有8个钩子，每个阶段前后各一个

在这里插入图片描述

例子使用：

<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: '计数器'
      },
      // 1. 创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      },

      // 2. 挂载阶段（渲染模板）
      beforeMount () {
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以开始操作dom了
      },

      // 3. 更新阶段(修改数据 → 更新视图)
      beforeUpdate () {
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
      },
      updated () {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      },

      // 4. 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
      },
      destroyed () {
        console.log('destroyed，卸载后')
      }
    })
  </script>

在这里插入图片描述

四、生命周期钩子小案例

1.在created中发送数据

 <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>

 <div id="app">
    <ul>
      <li class="news">
        <div class="left">
          <div class="title">5G商用在即，三大运营商营收持续下降</div>
          <div class="info">
            <span>新京报经济新闻</span>
            <span>2222-10-28 11:50:28</span>
          </div>
        </div>
        <div class="right">
          <img src="http://ajax-api.itheima.net/public/images/0.webp" alt="">
        </div>
      </li>

      <li class="news">
        <div class="left">
          <div class="title">5G商用在即，三大运营商营收持续下降</div>
          <div class="info">
            <span>新京报经济新闻</span>
            <span>2222-10-28 11:50:28</span>
          </div>
        </div>
        <div class="right">
          <img src="http://ajax-api.itheima.net/public/images/0.webp" alt="">
        </div>
      </li>

      <li class="news">
        <div class="left">
          <div class="title">5G商用在即，三大运营商营收持续下降</div>
          <div class="info">
            <span>新京报经济新闻</span>
            <span>2222-10-28 11:50:28</span>
          </div>
        </div>
        <div class="right">
          <img src="http://ajax-api.itheima.net/public/images/0.webp" 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 () {
        // 1. 发送请求获取数据
        const res = await axios.get('http://hmajax.itheima.net/api/news')
        // 2. 更新到 list 中，用于页面渲染 v-for
        this.list = res.data.data
       console.log(app.list)
      }
    })
  </script>

2.在mounted中获取焦点

 <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>

<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: ''
    },
      // 核心思路：
    // 1. 等input框渲染出来 mounted 钩子
    // 2. 让input框获取焦点 inp.focus()
    mounted () {
      document.querySelector('#inp').focus()
    }
  })
</script>

在这里插入图片描述

五、案例-小黑记账清单

1.需求图示：

在这里插入图片描述

2.需求分析

1.基本渲染

2.添加功能

3.删除功能

4.饼图渲染

3.思路分析

1.基本渲染

立刻发送请求获取数据 created
拿到数据，存到data的响应式数据中
结合数据，进行渲染 v-for
消费统计 —> 计算属性

2.添加功能

收集表单数据 v-model，使用指令修饰符处理数据
给添加按钮注册点击事件，对输入的内容做非空判断，发送请求
请求成功后，对文本框内容进行清空
重新渲染列表

3.删除功能

注册点击事件，获取当前行的id
根据id发送删除请求
需要重新渲染

4.饼图渲染

初始化一个饼图 echarts.init(dom) mounted钩子中渲染
根据数据试试更新饼图 echarts.setOptions({…})

4.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  />
</head>
<body>
    <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>
  
  
    <div id="app">
        <div class="contain">
          <!-- 左侧列表 -->
          <div class="list-box">
  
            <!-- 添加资产 -->
            <form class="my-form">
              <input type="text" v-model.trim="name" class="form-control" placeholder="消费名称" />
              <input type="text" v-model.number="price" class="form-control" placeholder="消费价格" />
              <button type="button" @click="add" class="btn btn-primary">添加账单</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="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: {
            price:'',
            name:'',
            list:[]
          },
          computed:{
            totalPrice(){
                return this.list.reduce((sum,item)=>sum+item.price,0)
            }
          },
           created(){
             this.getList()  
          //    console.log('created')
          //   console.log(this.list)
          //  console.log(app.list)
          },
           
          mounted(){
                // 基于准备好的dom，初始化echarts实例
                this.myChart = echarts.init(document.getElementById('main'));
  
  // 指定图表的配置项和数据
 // var option = {} ;

  // 使用刚指定的配置项和数据显示图表。
  this.myChart.setOption({
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)'
  }
}
}
]
});        
      
          },
          methods:{

            async getList(){
                const res=await axios.get('https://applet-base-api-t.itheima.net/bill',
            {
                params:{creator:'小黑'}
            })

            this.list=res.data.data
                console.log(this.list)
             // 更新图表
             this.myChart.setOption({
              // 数据项
              series: [
                {
                  // data: [
                  //   { value: 1048, name: '球鞋' },
                  //   { value: 735, name: '防晒霜' }
                  // ]
                  data: this.list.map(item => ({ value: item.price, name: item.name}))
                }
              ]
            })

            },
            
            async add(){
                if (!this.name) {
                  alert('请输入消费名称')
                  return
                }
                console.log(typeof this.price)
                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
                    
                })
                this.getList()
                this.name = ''
                this.price = ''
            },
            async del(id){
            await axios.delete('https://applet-base-api-t.itheima.net/bill/'+id)
            this.getList()
        }
    }
        })
        
        
      </script>

</body>
</html>

六、工程化开发和脚手架

1.开发Vue的两种方式

核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。（就是vue2第一，二天学的东西）
工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

在这里插入图片描述

工程化开发模式优点：

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

webpack配置不简单
雷同的基础配置
缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

2.脚手架Vue CLI

基本介绍：

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

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

好处：

开箱即用，零配置
内置babel等工具
标准化的webpack配置

使用步骤：

利用cmd操作，注意选择管理员权限，不然会出错

全局安装：（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g（安装前需安装nodeJs，全局安装完之后重启cmd）
查看vue/cli版本： vue --version
创建项目架子：vue create project-name(项目名不能使用中文)
启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

七、项目目录介绍和运行流程

1.项目目录介绍

在这里插入图片描述

虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可

main.js 入口文件

入口文件，完成vue的初始化操作
App.vue App根组件

所有的组件都依靠它建立
index.html 模板文件

2.运行流程

在这里插入图片描述

3.APP和main初始化详解

main.js

基于根组件创建一个vue实例

 

// 1. 导入 Vue 核心包
import Vue from 'vue'

// 2.导入App.vue根组件，基于App.vue创建结构渲染index.html
import App from './App.vue'


  	// 编写导入的代码，往代码的顶部编写(规范)
import HmButton from './components/HmButton'


	// 提示：当前处于什么环境 (生产，开发环境)
Vue.config.productionTip = false
 


//3. Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html

	//3.1 第一种 
	new Vue({
     el: '#app', 
      // 简写：render: h => h(App),
     //（下面是完整写法），
  render: (createElement) => {
    // 基于App创建元素结构
    return createElement(App)
  }
})

	//3.2 第二种 
new Vue({
  // render: h => h(App),
  render: (createElement) => {
    // 基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app') 与el: '#app'一样，用于指定Vue所管理容器

App.vue

template：结构（有且只能一个根元素）
script: js逻辑
style：样式 (可支持less，需要装包)

<template>
  
</template>

<script>
// 导出的是当前组件的配置项
// 里面可以提供 data(特殊) methods computed watch 生命周期八大钩子
export default {
  created () {
    console.log('我是created')
  },
  methods: {
    fn () {
      alert('你好')
    }
  }
}
</script>

<style lang="less">
/* 让style支持less
   1. 给style加上 lang="less"
   2. 安装依赖包 less less-loader
      yarn add less less-loader -D (开发依赖)
*/
.App {
  width: 400px;
  height: 400px;
  background-color: pink;
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
}
</style>

八、组件化开发

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

好处：便于维护，利于复用 → 提升开发效率。

组件分类：普通组件、根组件。

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

在这里插入图片描述

总结：

组件化的好处是什么？

组件的分类？

九、根组件 App.vue

1.根组件介绍

整个应用最上层的组件，包裹所有普通小组件

在这里插入图片描述

2.组件是由三部分构成

语法高亮插件

在这里插入图片描述

三部分构成
- template：结构（有且只能一个根元素）
- script: js逻辑
- style：样式 (可支持less，需要装包)
让组件支持less

（1） style标签，lang=“less” 开启less功能

（2）装包: yarn add less less-loader -D 或者npm i less less-loader -D

3.总结

App组件包含哪三部分？

十、普通组件的注册使用-局部注册

1.特点：

只能在注册的组件内使用(就是说在哪个.vue里注册在哪个.vue里使用)

2.步骤：

在使用的组件内先导入再注册，最后使用

在这里插入图片描述

// 2.1 导入需要注册的组件

<script> 
    
//import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'
import HmFooter from './components/HmFooter'

export default { // 2.2局部注册
  components: {
   
    HmHeader:HmHeaer,  //'组件名': 组件对象,
   
     HmFooter    //组件名和组件对象一样可省略主键对象
  }
}
 </script>

3.使用方式：

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

4.注意：

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

5.语法：

在这里插入图片描述

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

export default {  // 局部注册
  components: {
   //'组件名': 组件对象,
    HmHeader:HmHeaer,
   //组件名和组件对象一样可省略主键对象
     HmFooter
  }
}

十一、普通组件的注册使用-全局注册

1.特点：

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

在main.js注册，所有.vue文件都可以使用

2.步骤

创建.vue组件（三个组成部分）
main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

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

5.语法

Vue.component(‘组件名’, 组件对象)

例：

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

十二.练习（全局，局部组件）

在以下3个局部组件中是展示一个通用按钮

在这里插入图片描述

HmButton.vue

<template>
  <button class="hm-button">通用按钮</button>
</template>

<script>
export default {

}
</script>

<style>
.hm-button {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #3bae56;
  border-radius: 5px;
  color: white;
  border: none;
  vertical-align: middle;
  cursor: pointer;
}
</style>

HmFooter.vue

<template>
  <div class="hm-footer">
    我是hm-footer
    <HmButton></HmButton>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-footer {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #4f81bd;
  color: white;
}
</style>

HmHeader.vue

<template>
  <div class="hm-header">
    我是hm-header
    <HmButton></HmButton>
  </div>
</template>

<script>
// import HmButton from './HmButton.vue'
export default {
  // 局部注册: 注册的组件只能在当前的组件范围内使用
  // components: {
  //   HmButton
  // }
}
</script>

<style>
.hm-header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #8064a2;
  color: white;
}
</style>

HmMain.vue

<template>
  <div class="hm-main">
    我是hm-main
    <HmButton></HmButton>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-main {
  height: 400px;
  line-height: 400px;
  text-align: center;
  font-size: 30px;
  background-color: #f79646;
  color: white;
  margin: 20px 0;
}
</style>

App.vue

<template>
  <div class="App">
    <!-- 头部组件 -->
    <HmHeader></HmHeader>
    <!-- 主体组件 -->
    <HmMain></HmMain>
    <!-- 底部组件 -->
    <HmFooter></HmFooter>

    <!-- 如果 HmFooter + tab 出不来 → 需要配置 vscode
         设置中搜索 trigger on tab → 勾上
    -->
  </div>
</template>

<script>
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {
  components: {
    // '组件名': 组件对象
    HmHeader: HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

<style>
.App {
  width: 600px;
  height: 700px;
  background-color: #87ceeb;
  margin: 0 auto;
  padding: 20px;
}
</style>

main.js

// 文件核心作用：导入App.vue，基于App.vue创建结构渲染index.html
import Vue from 'vue'
import App from './App.vue'
// 编写导入的代码，往代码的顶部编写(规范)
import HmButton from './components/HmButton'
Vue.config.productionTip = false

// 进行全局注册 → 在所有的组件范围内都能直接使用
// Vue.component(组件名，组件对象)
Vue.component('HmButton', HmButton)


// Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
new Vue({
  // render: h => h(App),
  render: (createElement) => {
    // 基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app')

7.总结

1.全局注册组件应该在哪个文件中注册以及语法是什么？

2.全局组件在项目中的任何一个组件中可不可以使用？

组件 -->

<!-- 如果 HmFooter + tab 出不来 → 需要配置 vscode
     设置中搜索 trigger on tab → 勾上
-->




main.js

```js
// 文件核心作用：导入App.vue，基于App.vue创建结构渲染index.html
import Vue from 'vue'
import App from './App.vue'
// 编写导入的代码，往代码的顶部编写(规范)
import HmButton from './components/HmButton'
Vue.config.productionTip = false

// 进行全局注册 → 在所有的组件范围内都能直接使用
// Vue.component(组件名，组件对象)
Vue.component('HmButton', HmButton)


// Vue实例化，提供render方法 → 基于App.vue创建结构渲染index.html
new Vue({
  // render: h => h(App),
  render: (createElement) => {
    // 基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app')