使用echarts的vue項目第二天,vue子組件中引用echarts(適合沒接觸過的echarts的新手)

vue子組件套用echarts遇到的坑

首先道個歉,網購的劣質24k曲面顯示屏燒壞了電源,影響了更新進度,導致今天只能實現最基礎的一個聯動例子.

1. vue子組件
   首先,引入了vue和echarts,可以new 一個vue的對象和造出一個echarts的表格,這是昨天做到的.今天的目的就是用vue的組件功能和生命週期實現簡單聯動.
        目的是要點擊不同的按鈕,來切換不同的表格,如果點個按鈕造個dom元素放表格,那樣會成爲頁面卡頓,報錯的原因.
        vue的組件功能有一個很強的能力,那就是隻需一個dom元素和一段js數組,改變js數組,dom元素裏面內容自動跟着變.這個強無敵的dom元素就叫做vue組件,先把召喚echarts的js代碼註釋掉,來看vue的組件功能
   官網簡單粗暴的例子:
   
   具體怎麼運用,官方沒細說,但給了幾句邏輯性的幫助:
   
   老師教會了1+1,我們就要自己去學10+10,來看下常用組件例子:
   html:
   
       圖片很複雜,驅於良心在下只好分佈說明,
       ①,在"body"中創建template標籤模板.
   
       ②,創造組件按鈕,給每個按鈕配備自己需要展示組件的組件名稱.
   
       ③,定義展示組件的盒子
   
       ④,js中定義組件,定義組件名稱,必須和組件按鈕裏面的組件名稱一致
   
       ⑤,在app(最大的vue盒子)里加載自己定義的組件,最好設置默認展示的組件
   
2. vue生命週期
   這樣組件就造好了,而且可以根據四個按鈕來回變換四個組件內容,那接下來就要把echarts的表格放到組件裏了.
        解除echarts的封印你會發現,表格沒了.仔細一想才知道,你有四個組件,相當於四個獨立的盒子,也就是說,外部的js想要管教組件裏的內容有諸多的限制.
        那怎麼辦呢?其實很簡單,只要把外部的js複製到組件內部即可.vue強大的組件功能,爲我們提供了8個方法,也就是所謂的鉤子函數,也叫生命週期.
   先上官方圖片:
   
        在我看來,vue的生命週期和鬥地主有點像,以下均是個人看法(如有異同,純屬娛樂):
   
   他爲什麼又叫鉤子函數,舉個例子,發牌前,你突然發現不對勁,叫住發牌員,讓他先扣三張牌到桌子上當底牌,這個叫住發牌員讓他執行另外一個動作再發牌就像鉤子一樣,鉤過來一個函數再執行.
           就好比王者榮耀後期了,你們本來都在草裏蹲着,突然鍾馗勾過來一個人,你們只好先暫停打團,開始錘那個鍾馗勾過來的人.
   
   我們只需要在掛載結束(mounted,相當於頁面創建完畢,剛造好盒子)的時候,把準備好的echarts的js代碼調過來就行了.