Vue之建立元件及新發現

2021-09-26 10:36:05 字數 1952 閱讀 8881

首先讓我們來認識一下什麼是元件,以及元件的作用。

元件的出現,就是為了拆分vue例項的**量的,能夠讓我們以不同的元件,來劃分不同的功能模組,將來我們需要什麼樣的功能,就可以去呼叫對應的元件。

元件化和模組化的不同

元件化:是從ui介面的角度進行劃分的

模組化,是從**邏輯的角度進行劃分的。

元件可以分為全域性元件和私有元件。

下面我們來試著了解一下全域性元件

我們來嘗試建立乙個全域性元件

第一種方法

//1.首先,我們使用vue.extend來建立全域性vue元件

var com1=vue.

extend()

//建立vue.例項

var vm=

newvue(,

methods:

})

然後再把建立好的元件扔到頁面中

效果如下圖所示

第二種方法

第二種方法我們可以把上面的兩步合併成一部

vue.

component

('mycom2'

,vue.

extend()

)

把mycom2丟進頁面中

效果如下

我們還可以繼續簡化,省去extend

vue.

component

('mycom1'

,)

效果不變

第三種方法

用id方法把template外丟擲去

vue.

component

('mycom1'

,)

然後再js外面用template標籤接收,同時,不要忘記把建立的元件名稱扔到例項中

效果如下所示

新發現在這裡我發現,js外接收時若不用template,而改用其他任何標籤,也可以達到同樣的效果,並且這樣做就不需要再往例項中新增元件名稱。

效果如下所示

效果看上去還行,在body裡的結構也沒有出現問題,可是這樣子的話

我發現我們建立元件時的元件名稱不就是沒用上嗎?

那我們把這個也拋棄了吧

效果還是沒變,照樣能打到想要的效果,我們沒通過標籤名呼叫元件,而是通過id來呼叫

看起來很方便,這是我自己偶然發現的,若什麼遺漏之處和不妥的地方,希望大家能夠指出問題。

我們來建立乙個私有元件

var vm=

newvue(,

methods:

, components:}}

)var vm2=

newvue(,

methods:

})

把元件加入頁面

pycon新發現之pipenv

安裝 just use pip pip install pipenvor,if you re using ubuntu 17.10 sudo apt install software properties common python software properties sudo add apt ...

使用antv及在model中新發現的問題小結

今天在打算使用viser圖來插入到自己的介面中時出現了一系列的問題,究其根本是自己還沒有掌握一步步去排查錯誤的方法,且對於dva中的model裡面的執行機制沒有做到透徹理解。viser是真的很好用,自己不需要去造輪子,呈現圖的時候也不需要自己去實現橫縱座標 圖例及提示框,完全都已經封裝好了直接呼叫就...

每天都有新發現之TCP IP 協議的種類介紹

tcp ip 是基於 tcp 和 ip 這兩個最初的協議之上的不同的通訊協議的大集合。tcp 用於從應用程式到網路的資料傳輸控制。tcp 負責在資料傳送之前將它們分割為 ip 包,然後在它們到達的時候將它們重組。ip 負責計算機之間的通訊。ip 負責在網際網路上傳送和接收資料報。http 負責 we...