Vue學(xué)習(xí)筆記分享之Vue組件化編程
2.1 模塊與組件、模塊化與組件化
2.1.1.模塊
理解：向外提供特定功能的js程序，一般就是一個(gè)js文件
為什么：js文件很多很復(fù)雜
作用：復(fù)用js，簡(jiǎn)化js的編寫(xiě)，提高js運(yùn)行效率
2.1.2.組件
理解：用來(lái)實(shí)現(xiàn)局部（特定）功能效果的代碼集合（html/css/image…）
為什么：一個(gè)界面的功能很復(fù)雜
作用：復(fù)用編碼，簡(jiǎn)化項(xiàng)目編碼，提高運(yùn)行效率
2.1.3.模塊化
當(dāng)應(yīng)用中的js都以模塊來(lái)編寫(xiě)的，那這個(gè)應(yīng)用就是一個(gè)模塊化的應(yīng)用。
2.1.4.組件化
當(dāng)應(yīng)用中的功能都是多組件的方式來(lái)編寫(xiě)的，那這個(gè)應(yīng)用就是一個(gè)組件化的應(yīng)用。
2.2.非單文件組件
模板編寫(xiě)沒(méi)有提示
沒(méi)有構(gòu)建過(guò)程，無(wú)法將ES6轉(zhuǎn)換成ES5
不支持組件的CSS
真正開(kāi)發(fā)中幾乎不用
2.3單文件組件
2.3.1.一個(gè).vue文件的組成（3個(gè)部分）
1、模板頁(yè)面
<template> 頁(yè)面模板 </template>
2、JS模塊對(duì)象
<script>
export default {
data() { return {} },
methods: {},
computed: {},
components: {}
}
</script>
3、樣式
<style> 樣式定義 </style>
2.3.2.基本使用
- 引入組件
- 映射成標(biāo)簽
- 使用組件標(biāo)簽
到此這篇關(guān)于Vue學(xué)習(xí)筆記分享之Vue組件化編程的文章就介紹到這了,更多相關(guān)Vue組件化編程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
快速解決vue在ios端下點(diǎn)擊響應(yīng)延時(shí)的問(wèn)題
今天小編就為大家分享一篇快速解決vue在ios端下點(diǎn)擊響應(yīng)延時(shí)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Vue狀態(tài)管理工具Pinia的安裝與使用,一步一步學(xué)習(xí)如何將pinia運(yùn)用到項(xiàng)目實(shí)戰(zhàn)中去,文中有詳細(xì)的安裝教程和使用方法,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
Vue-cli中為單獨(dú)頁(yè)面設(shè)置背景色的實(shí)現(xiàn)方法
下面小編就為大家分享一篇Vue-cli中為單獨(dú)頁(yè)面設(shè)置背景色的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于前端vue播放m3u8、flv、mp4視頻的方法,隨著前端大屏頁(yè)面的逐漸壯大,客戶的需求也越來(lái)越多,大屏上面展示的事物也越來(lái)越豐富,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue?axios接口請(qǐng)求封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
淺談vue-props的default寫(xiě)不寫(xiě)有什么區(qū)別
這篇文章主要介紹了淺談vue-props的default寫(xiě)不寫(xiě)有什么區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
關(guān)于Vue3中element-plus的el-dialog對(duì)話框無(wú)法顯示的問(wèn)題及解決方法
最近今天在寫(xiě)一個(gè)停車(chē)場(chǎng)管理系統(tǒng)的項(xiàng)目時(shí),在用vue3寫(xiě)前端時(shí),在前端模板選擇上,我一時(shí)腦抽,突然決定放棄SpringBoot,選擇了以前幾乎很少用的element-plus,然后果不其然,錯(cuò)誤連連,下面給大家分享dialog對(duì)話框無(wú)法顯示的原因,感興趣的朋友一起看看吧2023-10-10
Vuex之module使用方法及場(chǎng)景說(shuō)明
這篇文章主要介紹了Vuex之module使用方法及場(chǎng)景說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue.js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動(dòng)解鎖功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03