Vue建立元件的三種方式

<

div 
id>
<
mycom1
>
mycom1
>
div>
<
script
>
使用 vue.extend 來建立全域性的vue元件
//var com1 = vue.extend()
使用 vue.component('元件的名稱', 建立出來的元件模板物件)
'mycom1', com1)
//如果使用 vue.component 定義全域性元件的時候，元件名稱使用了 駝峰命名，則在引用元件的時候，需要把 大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 - 鏈結；
//如果不使用駝峰,則直接拿名稱來使用即可;
'mycom1', com1)
第乙個引數:元件的名稱,將來在引用元件的時候,就是乙個 標籤形式 來引入 它的
//第二個引數: vue.extend 建立的元件  ,其中 template 就是元件將來要展示的html內容
vue.component(
'mycom1
', vue.extend())
//建立 vue 例項，得到 viewmodel
varvm 
=new
vue(,
methods: {}
});script
>

<

div 
id>
<
mycom2
>
mycom2
>
div>
<
script
>
//注意:不論是哪種方式建立出來的元件,元件的 template 屬性指向的模板內容,必須有且只能有唯一的乙個根元素
vue.component(
'mycom2
', )
//建立 vue 例項，得到 viewmodel
varvm 
=new
vue(,
methods: {}
});script
>

<

div 
id>
<
mycom3
>
mycom3
>
div>
<
div 
id>
<
mycom3
>
mycom3
>
<
login
>
login
>
div>
<
template 
id="tmpl"
>
<
div>
<
h1>這是通過 template 元素,在外部定義的元件結構,這個方式,有**的只能提示和高亮
h1>
<
h4>好用,不錯!
h4>
div>
template
>
<
template 
id="tmpl2"
>
<
h1>這是私有的 login 元件
h1>
template
>
<
script
>
vue.component(
'mycom3
', )
//建立 vue 例項，得到 viewmodel
varvm 
=new
vue(,
methods: {}
});varvm2 
=new
vue(,
methods: {},
filters: {},
directives: {},
components: 
},})
script
>

Vue建立元件的三種方式

1.1 使用vue.extend來建立元件模板物件 var com1 vue.extend 1.2 使用 vue.component完成元件的建立 vue.component 元件的名稱 建立出來的元件模板物件 注意 使用vue.component 定義全域性元件的時候，如果元件名稱使用了駝峰命名，...

RN建立元件的三種方式

rn建立元件的三種方式 1.es6 推薦,比較新的語法 2.es5 3.函式式 建立hellocomponent.js 方式1 es6 export default class hellocomponent extends component 在主頁面中引用這個元件 執行效果 方式2 es5 var...

React建立元件的三種方式

react常見的三種元件建立方式，具體如下 函式式定義的無狀態元件 es5原生方式react.createclass定義的元件 es6形式的extends react.component定義的元件 下面我們簡單說一下，這三種方式的用法 適用場合以及區別 import react,from react...