VUE 元件介紹

2021-10-09 06:57:13 字數 836 閱讀 7471

es6 模組化

1. 沒有模組化的世界:全域性變數汙染、難以管理的依賴

2. 常見的模組化標準:commonjs、es6 module、amd、cmd、umd…

匯出js: 使用模組化在script標籤上寫 type=「module」

在js函式開頭 寫入 export default(預設匯出:)

在js函式開頭 寫入 export (真名匯出(普通匯出):)

1. 從js中寫入 import *** form 「路徑.js」 (匯入模組化js)

2. 從js中寫入 import form 「路徑.js」 (匯入模組化js)

3. 從js中寫入 import * as *** form 「路徑.js」 (匯入模組化js)

元件概念:

乙個完整的網頁是複雜的,如果將其作為乙個整體來進行開發,將會遇到下面的困難

1. **凌亂臃腫

2. 不易協作

3. 難以復用

vue推薦使用一種更加精細的控制方案–元件化開發

所謂元件化,即把乙個頁面中區域功能細分,每乙個區域分為乙個元件,每個元件包含:

1. 功能(js**)

2. 內容(模板**)

3. 樣式(css**)

元件開發:

建立元件:

元件是根據乙個普通的配置物件建立的,所以要開發乙個元件,只需要寫乙個配置物件即可

向元件傳遞資料:

大部分元件要完成自身的功能,都需要一些額外的資訊

比如乙個頭像元件,需要告訴他頭像的位址,這就需要在使用元件時向元件傳遞資料

傳遞資料的方式有很多種,最常見的一種是使用元件屬性 component props

vue元件引入另一vue元件

個人blog,歡迎關注加收藏 在元件中引入另一組件 元件化開發,最重要的特點就是其復用性。當某一部分內容重複出現在多個元件中 時,可以將其提出單獨組成乙個元件。重複使用。如下圖 其中底部導航條的部分 就會出現在多個元件中 在當前元件card.vue中引入barbottom.vue的步驟如下 在car...

vue元件與元件化

元件化是當今最為流行的一種可復用性增加的方法,隨著當今前端開發的複雜度更加,這個元件化變得越來越流行 vue.js通過vue.extend 方法來擴充套件元件的使用 vue.extend options 裡面的options引數和 vue options 的options引數幾乎是一致的 new v...

VUE元件學習 元件通訊

儘管父子元件可以通過 this.par ent,this parent,this.parent thi s.child,this.root互相訪問,但是子元件應當避免直接依賴父元件的資料 因為作用域是有層次的,所以我們可以在作用域上傳遞事件。如果要通知整個事件系統,就要向下廣播。每個vue例項都是乙...