Vue入門 元件基礎

2021-08-20 20:55:15 字數 889 閱讀 3742

元件: 專案的開發,就是乙個元件樹,元件可以進行復用。

元件的名字

1.html標籤不區分大小寫

2.不能跟系統標籤重名

3.遵循 w3c 規範中的自定義元件名 (字母全小寫且必須包含乙個連字元)

4.支援駝峰命名.myheader,但是在引用的時候,需要使用my-header的方式元件支援兩種定義方式

全域性元件

語法:vue.component('my-component-name', )

方式一:在{}中寫入template模板結構

方式二:將template模板結構寫到元件外面,指定對應的模板名,即id屬性。

區域性元件

語法:在例項中新增components,注入即可。

方式一:在例項中新增components,注入子元件

方式二:將template模板結構寫到元件外面,宣告變數接收,當使用的時候,在components中注入即可。

**示例

我是my-cont元件中的內容

舉個栗子

購買			總計:}元		

效果圖

vue入門 元件基礎todolist

1.以下是 todolist 的例子,沒有用到元件 下面的3 會通過元件拆分todolist 1 doctype html 2 html lang en 3 head head 4 body 5 div id root 6 div 7 input v model inputvalue 8 butto...

Vue元件基礎

new vue 就可以認為是乙個大元件,但多個例項這樣太low了,vue為我們提供了component。1.全域性註冊的元件 要註冊乙個全域性元件,你可以使用vue.component tagname,options 例如 註冊 vue.component my component 建立根例項 va...

Vue元件基礎

vue.component button counter template you clicked me times.這裡的data必須是乙個function,不能是物件。因為如果是物件,多個元件引用的是相同的data。如果是function,那麼每次返回的都是不同的data物件,這樣元件之間引用的...