前端（vue）学习笔记（CLASS 3）：生命周期&工程化开发入门

1、生命周期

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

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

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

2、挂载阶段：渲染模板

3、更新阶段：数据修改、更新视图（执行多次）

4、销毁阶段：销毁实例

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

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

每个阶段都有两个钩子函数，其中主要的为：beforeCreate、created、beforeMount、mounted

例如：

javascript 复制代码

        const app=new Vue({
            el:'#app',
            data:{
                num:100
            },
            methods:{
                add() {
                    this.num++
                },
                de() {
                    this.num--
                }
            },
            beforeCreate() {
                console.log('创建开始')
            },
            created() {
                console.log('创建结束')
            },
            beforeMount() {
                console.log('挂载开始')
            },
            Mounted() {
                console.log('挂载结束')
            }
        })

执行结果：

（代码中有个小错误，mounted函数不需要首字母大写，导致挂载结束的日志加载不出）

2、工程化开发&脚手架Vue CLI

开发Vue的两种方式：

1、核心包传统开发模式：基于html/css/js文件，直接引入核心包，开发Vue

2、工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue

基本介绍：

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

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

好处：开箱即用，零配置，内置babel等工具，标准化

使用步骤：

1、全局安装（一次）：yarn global add @vue/cli 或npm i @vue/cli -g

2、查看Vue版本：vue --version

3、创建项目架子：vue create project-name（项目名-不能用中文）

4、启动项目：yarn serve或npm run serve（找package.json）

* 脚手架目录文件介绍&项目运行流程

创建出来的包如下：

主要需要聚焦于index.html、main.js、APP.vue三个文件

其中app.vue文件用于进行编辑

* 组件化开发& 根组件

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

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

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

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

APP.vue文件（单文件组件）的三个组成部分：结构（html）、行为（js）、样式（css）

1、语法高亮插件：vetur

2、三部分组成：

template：结构（有且只能一个根元素）

script：js逻辑

style：样式（可支持less，需要装包）

3、让组件支持less

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

装包：yarn add less less-loader

例如：

html 复制代码

<template>
  <div @click="fn2" class="APP">
    <div @click.stop="fn1" class="box"></div>
  </div>
</template>

<script>
  export default {
    methods:{
      fn1(){
        alert('创建了一个vue项目')
      },
      fn2() {
        alert('冒泡了')
      }
    }
  }
</script>



<style>
.APP {
  width: 400px;
  height: 400px;

  background-color: pink;
}

.box {
  width: 200px;
  height: 200px;

  background-color: blue;
}
</style>

效果：

* 普通组件的注册使用

注册组件的两种方式：

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

创建.vue文件（三个组成部分）、在使用的组件内导入并注册

2、全局注册：所有组件内都能使用

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

使用：

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

注意：

组件名规范，大驼峰命名法

局部注册，例如：

html 复制代码

<template>
  <div class="App">
    <!-- 头部组件 -->
     <XxHeader></XxHeader>
    <!-- 主体组件 -->
     <XxMain></XxMain>
    <!-- 底部组件 -->
     <XxFooter></XxFooter>
  </div>
</template>

<script>
import XxHeader from'./components/XxHeader.vue'
import XxMain from './components/XxMain.vue'
import XxFooter from './components/XxFooter.vue'

export default {
  components:{
    XxHeader,
    XxMain,
    XxFooter
  }
}
</script>

<style>
.App {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  background-color: skyblue;
  padding-left: 50px;
  padding-top: 5px;
  padding-bottom: 5px;
  box-sizing: border-box;
}
</style>

省略其他组件的样式代码

效果为：

全局注册，例如，在以上代码的基础上添加一个按钮：

main.js代码：

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import XxButton from './components/XxButton.vue'

createApp(App).component('XxButton',XxButton).mount('#app')

组件代码：

html 复制代码

<template>
  <button class="xx-button">
    通用
  </button>
</template>

<script>
export default {

}
</script>

<style>
.xx-button {
    width: 50px;
    height: 20px;
    background-color: green;
}
</style>

html 复制代码

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

</template>

最终结果：