元件化開發之定義區域性元件

2022-09-21 06:21:10 字數 2734 閱讀 8384

1.元件是什麼?有什麼用

擴充套件 html 元素,封裝可重用的**,目的是復用

-例如:有乙個輪播,可以在很多頁面中使用,乙個輪播有js,css,html

-元件把js,css,html放到一起,有邏輯,有樣式,有html

2.區域性元件的定義和使用

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>title

title

>

<

script

src="./js/vue.js"

>

script

>

head

>

<

body

>

<

div

class

>

<

children

>

children

>

<

p>換個行

p>

<

p>換個行

p>

<

p>換個行}

p>

<

children

>

children

>

div>

body

>

<

script

>

varvm

=new

vue(,

components:}

<

/h1>

<

hr>

<

button @click="

handleclick

">

點我看美女

<

/button>

<

/div>

`, data()

},created(),

methods:

}}},

})script

>

html

>

3.全域性元件的定義和使用

定義全域性元件

vue.component

注意:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>title

title

>

<

script

src="./js/vue.js"

>

script

>

head

>

<

body

>

<

div

class

>

<

h1>區域性元件

h1>

<

children

>

children

>

<

br>

<

br>

<

br>

<

hr>

<

h1>全域性元件

h1>

<

child

>

child

>

div>

body

>

<

script

>

//全域性元件

vue.component(

'child

', }

<

button style="

background: red

">

主頁<

/button>

<

/div>

`, data()

},methods: }})

varvm

=new

vue(,

components: }

<

/h1>

<

child

><

/child>

<

hr>

<

button @click="

handleclick

">

點我看美女

<

/button>

<

/div>

`, data()

},created() ,

methods: },}

},})

script

>

html

>

元件化開發之vue

今天寫了寫vue的元件化開發demo,有些小的心得。分享一下。元件化意味著 可以復用,呼叫元件就可以了。然後可以通過元件呼叫元件的相關能力。例如以前我做元件化開發的乙個小專案 原生js元件的實現 這就是乙個 了,分割成以頁面為一級單位,元件為二級單位的乙個格局,然後呼叫addpage addcomp...

20 入門之元件化開發

元件其實就是乙個擁有樣式 動畫 js邏輯 html結構的綜合塊。前端元件化確實讓大的前端團隊更高效的開發前端專案。而作為前端比較流行的框架之一,vue 的元件化也做的非常徹底,而且有自己的特色。尤其是她單檔案元件開發的方式更是非常方便,而且第三方工具支援也非常豐富,社群也非常活躍,第三方元件也呈井噴...

android 元件化開發

android 專案中隨之時間專案增大,執行時間也大,還有就是,元件化方便 管理和測試,這就是元件化好處 這裡就不多說了,既然你能找元件化開發,證明你對它是有一定的了解,我就直接說流程了,第二 在gradle.propertles 中設定乙個引數 如isdebug false 方便執行測試modul...