目录
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.data
this.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.html
render: (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)
