【VUE2】第二期——生命周期及工程化
目录
1 生命周期
1.1 介绍
1.2 钩子
2 可视化图表库
3 脚手架Vue CLI
3.1 使用步骤
3.2 项目目录介绍
3.3 main.js入口文件代码介绍
4 组件化开发
4.1 组件
4.2 普通组件注册
4.2.1 局部注册
4.2.2 全局注册
1 生命周期
1.1 介绍
Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。
生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁
1.创建阶段：创建响应式数据
2.挂载阶段：渲染模板
3.更新阶段：修改数据，更新视图
4.销毁阶段：销毁Vue实例
1.2 钩子
Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码
示例：
<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>2 可视化图表库
官网：
Apache ECharts
饼图渲染:
(1) 在创建阶段后（created）初始化一个饼图 echarts.init(dom)
(2) 将更新饼图数据代码（echarts.setOption({ ... })）封装，每当更新列表时调用一次，根据数据实时更新饼图(3) 在挂载阶段后（mouted）调用函数，更新一次饼图数据
<body><div id="app"><div class="echarts-box" id="main"></div></div><script>const app = new Vue({el: '#app',data: {list: [],name: '',price: ''},created () {// const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {// params: {// creator: '小黑'// }// })// this.list = res.data.datathis.getList()},mounted () {//初始化this.myChart = echarts.init(document.querySelector('#main'))//第一次渲染（无数据渲染）this.myChart.setOption({// 大标题title: {text: '消费账单列表',left: 'center'},// 提示框tooltip: {trigger: 'item'},// 图例legend: {orient: 'vertical',left: 'left'},// 数据项series: [{name: '消费账单',type: 'pie',radius: '50%', // 半径data: [// { value: 1048, name: '球鞋' },// { value: 735, name: '防晒霜' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]})},methods: {async getList () {//更新数据const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {params: {creator: '小黑'}})this.list = res.data.data// 更新图表（后续渲染）this.myChart.setOption({// 数据项series: [{data: this.list.map(item => ({ value: item.price, name: item.name}))}]})},}})</script>
</body>⭐️注意（与以前不同的点）：
1.axios可以简写写成axios.请求方式("请求地址", 请求数据对象)
get请求方法需要在请求数据对象里面再挂载一个params对象，然后在里面写参数，而post直接在请求数据对象里面写参数就行了
2.typeof后可以不加小括号（typeof 是一个一元运算符，用于返回一个表示数据类型的字符串）但是还是推荐加括号，这样可读性高
3 脚手架Vue CLI
Vue CLI 是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】
3.1 使用步骤
全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
查看vue/cli版本： vue --version
创建项目架子：vue create project-name(项目名不能使用中文)
启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)
记录：使用npm源或淘宝镜像且用yarn命令报错
解决：切换腾讯镜像，并且使用npm命令下载
3.2 项目目录介绍
虽然脚手架中的文件有很多，目前咱们只需认识三个文件即可
-
main.js 入口文件
-
App.vue App根组件
-
index.html 模板文件
3.3 main.js入口文件代码介绍
//导入Vue模块
import Vue from 'vue'
//导入App根组件
import App from './App.vue'//设置控制台是否打印当前环境：生产环境or开发环境
Vue.config.productionTip = false//vue自动创建的实例化代码（简写）
new Vue({render: h => h(App),
}).$mount('#app')//完整写法
new Vue({//el指定Vue所管理的容器，与上述.$mount('#app')效果一样el:"#app",//render基于App.vue创建结构渲染index.htmlrender: (createElement) => {return createElement(App)}
})4 组件化开发
4.1 组件
语法高亮插件：
构成：
template：结构 （有且只能一个根元素）
script: js逻辑
style： 样式 (可支持less，需要装包)
让组件支持less：
（1） style标签，lang="less" 开启less功能
（2） 装包: yarn add less less-loader -D 或者npm i less less-loader -D
4.2 普通组件注册
4.2.1 局部注册
特点： 只能在注册的组件内使用
步骤：
1. 创建.vue文件（三个组成部分），可输入vue快速创建
组件名规范：大驼峰命名法， 如 HmHeader
2. 在使用的组件内先导入再注册，最后使用
注册语法：
// 导入需要注册的组件
import 组件对象 from '.vue文件路径'export default { // 局部注册components: {'组件名': 组件对象,}
}例：
// 导入需要注册的组件
import HmHeader from './components/HmHeader'export default { // 局部注册components: {HmHeader:HmHeaer,//或//HmHeader}
}使用方式：
当成html标签使用即可 <组件名></组件名>
4.2.2 全局注册
特点：全局注册的组件，在项目的任何组件中都能使用
步骤：
1. 创建.vue组件（三个组成部分）
与上述一样，此处不再赘述
2. 在main.js中进行全局注册
Vue.component('组件名', 组件对象)例：
// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)