山西农业大学20241025

06-VUE

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

一. 生命周期

1. 概念

VUE生命周期: 就是vue实例从创建到销毁的整个
生命周期经历了四个阶段: ①创建 ②挂载 ③ 更新 ④销毁

①创建: 创建响应式数据
②挂载: 渲染模板
③更新; 修改数据,更新模版
④销毁: 销毁VUE实例

2. 生命周期的钩子函数

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

<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

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

// 此文件的核心作用:导入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.htmlnew Vue({// el: '#app', //el也可以写, 与$mount('#app')作用一致,用于指定Vue所管理的容器render: h => h(App),// 完整写法:// createElement:形参// render:(createElement)=>{//   return createElement(App)// }
}).$mount('#app')

App.vue

<template><div class="box">我是首页</div>
</template><script>
export default {}
</script><style>
.box {width: 450px;height: 200px;background: pink;font-size: 22px;}
</style>