Vue03

一、今日目标

1.生命周期

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

3.工程化开发入门

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

二、Vue生命周期

三、Vue生命周期钩子

四、生命周期钩子小案例

1.在created中发送数据

六、工程化开发模式和脚手架

1.开发Vue的两种方式

2.Vue CLI脚手架

基本介绍：

好处：

创建一个Vue项目的标准基础架子的步骤：

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

1.项目目录介绍

2.运行流程

八、组件化开发

九、根组件 App.vue

1.根组件介绍

2.全部组件都由三部分构成

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

1.特点：

2.步骤：

3.使用组件的方式：

4.注意：

5.案例

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

1.特点：

2.步骤

3.使用

4.注意

5.案例

十二、综合案例

1.小兔仙首页启动项目演示

2.小兔仙组件拆分示意图

3.开发思路

一、今日目标

1.生命周期

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

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

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

3.工程化开发入门

工程化开发和脚手架（之前都是引包开发）
项目运行流程
组件化
组件注册

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

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

二、Vue生命周期

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

初始化请求就是一进页面，就立即从后台拿数据，进行页面的渲染
当响应式数据创建好之后，才能发初始化渲染请求，才能对它修改和赋值
挂载完之后，才能操作dom

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

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

1.在创建阶段：创建响应式数据，将data中的普通数据转换为响应式数据

2.在挂载阶段：基于提供的数据，渲染模板

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

4.在销毁阶段：关闭浏览器就会，销毁Vue实例

三、Vue生命周期钩子

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

Vue生命周期钩子函数写的位置和data配置项同级

重点看created和mounted函数

created函数：在创建响应式数据之后执行，这时可以开始发送初始化渲染请求
mounted函数：在模板渲染完成之后执行，在这一刻开始DOM才算渲染完成，才能操作DOM了
beforeDestroy函数：在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: '计数器'
      },
      // 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>
</body>
</html>

浏览器控制台的效果：

四、生命周期钩子小案例

1.在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 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/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
      }
    })
  </script>
</body>
</html>

六、工程化开发模式和脚手架

1.开发Vue的两种方式

核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
工程化开发模式：基于构建工具（例如：webpack）开发Vue。

工程化开发模式优点：

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

工程化开发模式问题：

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

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

2.Vue CLI脚手架

基本介绍：

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

可以帮助我们快速创建一个Vue项目的标准基础架子，就是vue的项目目录。【集成了webpack配置】

好处：

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

创建一个Vue项目的标准基础架子的步骤：

全局安装Vue CLI（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
1. 前面那个命令安装可能会报找不到命令错误，直接换后面那个命令安装就可以了
查看vue/cli版本，确认是否安装成功： vue --version
创建项目架子：vue create project-name(项目名不能使用中文)
1. 在哪个目录下运行的这个命令，项目就创建在哪个目录下
运行项目：yarn serve 或者 npm run serve(命令不固定，看package.json文件中的scripts)
1. 进入到vue项目的根目录，执行上述命令

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

1.项目目录介绍

虽然脚手架中的文件有很多，目前咱们只需看下面标绿的三个文件和下面这四个即可

node_modules：存放第三方依赖的
public：存放html文件
src：写代码的文件夹
package.json：项目配置文件

index.html 模板文件

<!DOCTYPE html>
<html lang="">
  <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="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 用于兼容：给不支持js的浏览器一个提示 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <!-- Vue所管理的容器，将来创建结构动态渲染这个容器 -->
    <div id="app">
      <!-- 工程化开发模式中，这里不再直接编写模板语法，通过App.vue提供结构渲染 -->
      <!-- 将来在App.vue中提供模板，提供结构 -->
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js 入口文件

//main.js文件的核心作用：导入App.vue，基于App.vue创建结构渲染index.html

//1.导入vue核心包
import Vue from 'vue'
//2.导入App.vue根组件
import App from './App.vue'

//在console中提示当前处于什么环境（生产环境/开发环境）
Vue.config.productionTip = false

//3.实例化Vue，提供render方法，基于App.vue创建结构渲染index.html
new Vue({
  render: h => h(App),
}).$mount('#app')     //$mount('选择器')作用和 el:'#app' 一样，用于指定Vue要管理的容器

App.vue App根组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

所以整体的流程就是：基于App.vue来创建结构，最终渲染index.html里面的id属性为app的盒子

2.运行流程

八、组件化开发

组件化：可以将一个页面拆分成一个个的组件，每个组件都有自己独立的结构、样式、行为，在使用组件时，但组件使用的顺序来渲染。

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

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

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

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

九、根组件 App.vue

1.根组件介绍

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

2.全部组件都由三部分构成

语法高亮插件

三部分构成

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

<template>
	<!-- 这里面写HTML标签 -->
</template>


<script>
//export default中导出当前组件的配置项  
//里面可以提供data methods computed watch 生命周期八大钩子函数
export default {

}
</script>


<style>
	<!-- 这里面写CSS样式 -->
</style>

让组件支持less

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

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

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

1.特点：

局部注册的组件 只能在注册的组件内使用

2.步骤：

先在components目录下，创建.vue组件(文件)（三个组成部分）
在要使用的组件内，先导入组件（在script标签中导入组件），再注册组件（在components配置项中注册组件），最后使用组件（注册组件的时候如果组件名和组件对象同名，则只用写组件名即可）

3.使用组件的方式：

和使用html标签一样：<组件名></组件名>

4.注意：

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

5.案例

components目录下的HmHeader.vue文件：

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

<script>
export default {

}
</script>

<style>
.hm-header{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    background-color: rgb(196, 45, 207);
    color: white;
}
</style>

components目录下的HmMain.vue文件：

<template>
    <div class="hm-main">
      我是hm-main
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
  .hm-main{
      height: 400px;
      line-height: 400px;
      text-align: center;
      font-size: 30px;
      background-color: coral;
      color: white;
      margin: 20px 0;
  }
  </style>

components目录下的HmFooter.vue文件：

<template>
    <div class="hm-footer">
      我是hm-footer
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
  .hm-footer{
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 30px;
      background-color: rgb(20, 32, 211);
      color: white;
  }
  </style>

App.vue根组件：

<template>
  <div class="App">
    <!-- 头部组件 -->
    <HmHeader></HmHeader>
    <!-- 主体组件 -->
      <HmMain></HmMain>
    <!-- 底部组件 -->
     <HmFooter></HmFooter>
  </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: #459cc8;
  margin: 0 auto;
  padding: 20px;
}
</style>

运行vue项目：

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

1.特点：

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

通用的组件可以进行全局注册。

2.步骤

在components目录下，创建.vue组件(文件)（三个组成部分）
main.js中，全局注册组件

3.使用

当成HTML标签直接使用

<组件名></组件名>

4.注意

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

5.案例

1.先在components目录下创建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;
}
</style>

2.然后在main.js中进行全局注册

import Vue from 'vue'
import App from './App.vue'
import HmButton from './components/HmButton.vue'

Vue.config.productionTip = false

//全局注册组件
Vue.component('HmButton', HmButton)

new Vue({
  render: h => h(App),
}).$mount('#app')

3.最后在要使用的组件里面使用

<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: coral;
      color: white;
      margin: 20px 0;
  }
  </style>