h1>這是通過 template 元素,在外部定義的元件結構,這個方式,有**的智慧型提示和高亮
h1>
div>
template
>
<
template
id="tmpl2"
>
<
h1>這是私有的 login 元件,在外部定義的元件結構,這個方式,有**的智慧型提示和高亮
h1>
template
>
<
script
>
//如果使用 vue.component 定義全域性元件的時候，元件名稱使用了 駝峰命名，則在引用元件的時候，需要把 大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 - 鏈結；
//如果不使用駝峰,則直接拿名稱來使用即可;
//建立的第一種方式 使用 vue.extend 來建立全域性的vue元件
varcom1
=vue.extend()
vue.component(
'mycom1
', com1)
//建立的第二種方式 使用 vue.component('元件的名稱', 建立出來的元件模板物件)
'mycom1', com1)
第乙個引數:元件的名稱,將來在引用元件的時候,就是乙個 標籤形式 來引入 它的
//第二個引數: vue.extend 建立的元件 ,其中 template 就是元件將來要展示的html內容
//注意:不論是哪種方式建立出來的元件,元件的 template 屬性指向的模板內容,必須有且只能有唯一的乙個根元素
vue.component(
'mycom2
', vue.extend())
//建立的第三種方式 使用 vue.component('元件的名稱', 外部的html模板結構)
vue.component(
'mycom4
', )
//建立 vue 例項，得到 viewmodel
varvm
=new
vue(,
methods: {},
});varvm2
=new
vue(,
methods: {},
//filters 過濾器
filters: {},
//directives 生命週期函式
directives: {},
//components 定義例項內部私有元件
components:
},})
script
>
body
>
html
>
Vue建立元件的三種方式
1.1 使用vue.extend來建立元件模板物件 var com1 vue.extend 1.2 使用 vue.component完成元件的建立 vue.component 元件的名稱 建立出來的元件模板物件 注意 使用vue.component 定義全域性元件的時候，如果元件名稱使用了駝峰命名，...
Vue建立元件的三種方式
div id mycom1 mycom1 div script 使用 vue.extend 來建立全域性的vue元件 var com1 vue.extend 使用 vue.component 元件的名稱 建立出來的元件模板物件 mycom1 com1 如果使用 vue.component 定義全域性...
vue元件的建立
為了可重用性高，減少重複性開發，我們可以按照template style script的拆分方式，放置到對應的.vue檔案中。vue元件可以理解為預先定義好的viewmodel類。乙個元件可以預定義很多選項，最核心的有 模板template 模板反映了資料和最終展現給使用者的dom之間的對映關係，初...