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>