目錄
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)
