Vue 2 元件基礎 全域性元件和區域性元件

2021-10-06 21:25:08 字數 1233 閱讀 9806

元件是什麼 ?

元件是vue最強大的功能之一,元件可擴充套件 html ,封裝可重用的模組,讓其它地方能使用。

元件能幹嘛 ?

元件的優點是封裝重複的特定 html **(css,js,html),然後通過元件名字可以重複利用該元件中的**。

元件的分類

元件可分成全域性元件和區域性元件,它們的區別就是:全域性元件能供所以例項使用,區域性元件只能給當前例項使用。所以它們的區別就是作用域不同。

全域性元件例項:所有掛載了vue 物件的 html中 都 可以使用。

語法規則:

全域性元件:

component:元件;

vue.component(「元件名字」,」元件的配置」)

區域性元件例項:只能在掛載的html上才能使用。

語法規則:

區域性元件:

components:

『元件名稱2』:

元件模組例項:就是在html**中定義或js中定義,然後指定給vue

元件的模板:

1,html 標籤中定義,可以使用任何標籤,但建議用 template 標籤,因為

標籤本身的內容也會執行一遍。

2,js中定義:js的內容是不會在頁面中渲染的。

script type=『text/template』

給模板帶資料例項:需要注意的是乙個元件的data只能在該模組中使用。data資料只能以函式的形式返回,因為函式中能寫其它業務(判斷,請求等)。vue的dada不能混合使用,意思就是不能在元件中使用。

vue全域性元件和區域性元件

vue元件包括兩種 1 全域性元件,2 區域性元件 區域性元件var 變數名字一定要放在new vue例項外面 1 全域性元件 text align center color red font size 20px margin top 20px 全域性元件直接像上面這樣 註冊 就可以 如果還想註冊繼...

vue 全域性元件和區域性元件

vue.component mycpn cpnc components html lang en head meta charset utf 8 title document title script src js vue.js script head div id mycpn div div id...

Vue 元件(一)全域性元件和區域性元件

根據vue官方文件 元件 component 是vue.js最強大的功能之一。元件可以擴充套件html元素,封裝可重用的 在較高層面上,元件是自定義元素。按我當前學習程度的理解,元件就是定義乙個自己的新標籤,新標籤可以在html 中使用。全域性宣告元件 vue.component my compon...