山西农业大学20241025

06-VUE

- [一. 生命周期](#一. 生命周期)
- - [1. 概念](#1. 概念)
  - [2. 生命周期的钩子函数](#2. 生命周期的钩子函数)
- [二. 工程化开发和脚手架](#二. 工程化开发和脚手架)
- - [1. 开发vue的两种方式](#1. 开发vue的两种方式)
  - [2. 脚手架 Vue CLI](#2. 脚手架 Vue CLI)
  - [3. 使用步骤](#3. 使用步骤)
  - [4 . 项目目录介绍](#4 . 项目目录介绍)
  - - [4.1 项目目录](#4.1 项目目录)
    - [4.2 总结](#4.2 总结)

一. 生命周期

1. 概念

VUE生命周期: 就是vue实例从创建到销毁的整个

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

①创建: 创建响应式数据

②挂载: 渲染模板

③更新; 修改数据,更新模版

④销毁: 销毁VUE实例

2. 生命周期的钩子函数

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

js 复制代码

<div id="app">
      <h1>{{title}}</h1>
      <div>
        <button @click="count--">-</button>
        <span>{{count}}</span>
        <button @click="count++">+</button>
      </div>
      <a href="./00_Vue模版.html" target="_blank">跳转</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
      let app = new Vue({
        el: '#app',
        data: {
          title: '计数器',
          count: 100,
        },
        // 1.创建阶段(准备数据)
        beforeCreate() {
          console.log('beforeCreate响应式数据准备好之前:', this.count);
        },
        created() {
          console.log('created响应式数据准备好之后:', this.count);
          // this.数据名 = 请求回来的数据
          // 可以发送初始化渲染的请求
        },
        // 2. 挂载阶段(渲染模板)
        beforeMount() {
          console.log(
            'beforeMount 模板渲染之前:',
            document.querySelector('h1').innerHTML
          );
        },
        mounted() {
          console.log(
            'mounted 模板渲染之后:',
            document.querySelector('h1').innerHTML
          );
          // 可以开始操作DOM
        },
        // 3. 更新阶段(修改数据-更新视图)
        beforeUpdate() {
          console.log(
            'beforeUpdate 数据修改了,视图还没更新:',
            document.querySelector('span').innerHTML
          );
        },
        updated() {
          console.log(
            'Updateed 数据修改了,视图已经更新:',
            document.querySelector('span').innerHTML
          );
        },
        // 4. 卸载阶段
        beforeDestroy() {
          console.log('beforeDestory,卸载前');
          console.log('清除掉一些vue以外的资源占用, 定时器, 延时器...');
        },
        destroyed() {
          console.log('destoryed 卸载后');
        },
      });
      // 定时器 -- vue实例外
      setInterval(() => {
        app.$destroy();
      }, 1000);
    </script>

二. 工程化开发和脚手架

1. 开发vue的两种方式

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

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

工程化开发模式的优点:

提高编码效率, 比如使用js新语法, Less/sass,TypeScripte 等语句通过webpack编译成浏览器可以识别的ES3,ES5,CSS等
工程化开发模式的缺点:

webpack配置不简单

雷同的基础配置

缺乏统一标准

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

2. 脚手架 Vue CLI

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

可以帮助我们快速创建一个开发VUE项目的标准化基础架子; [集成webpack配置]

优势:

开箱即用, 零配置

内部babel的工具

标准化的webpack配置

3. 使用步骤

全局安装脚手架(只需要安装一次即可) npm i @vue/cli -g

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

创建项目框架: vue create project-name (项目名不能是中文)

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

4 . 项目目录介绍

4.1 项目目录

将整个项目作为根目录直接打开 : 直接就是项目名

虽然脚手架目录文件很多, 但是目前只需要认识三个文件即可

main.js : 入口文件

App.vue : App根组件

index.html : 模板文件

index.html

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>
    <div id="app">
      <!-- 工程化开发模式中, 这里不再直接编写模板语法, 通过App.vue提供结构渲染 -->
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

js 复制代码

// 此文件的核心作用:导入App.vue,基于App.vue创建的结构渲染index.html

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

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

// 创建实例,提供render方法, 基于App.vue创建结构,渲染index.html

new Vue({
  // el: '#app', //el也可以写, 与$mount('#app')作用一致,用于指定Vue所管理的容器
  render: h => h(App),

  // 完整写法:
  // createElement:形参
  // render:(createElement)=>{
  //   return createElement(App)
  // }
}).$mount('#app')

App.vue

js 复制代码

<template>
  <div class="box">我是首页</div>
</template>

<script>
export default {

}
</script>

<style>
.box {
  width: 450px;
  height: 200px;
  background: pink;
  font-size: 22px;

}
</style>

山西农业大学20241025

06-VUE

一. 生命周期

1. 概念

2. 生命周期的钩子函数

二. 工程化开发和脚手架

1. 开发vue的两种方式

2. 脚手架 Vue CLI

3. 使用步骤

4 . 项目目录介绍

4.1 项目目录

4.2 总结