學習要點:
1.組件概念
2.簡單組件
本節課我們來開始學習 Vue3.x 的組件的基本概念以及簡單的使用;
一.組件概念
1. 組件是一種封裝可復用的集合,通過組件化,將更好的完成繁雜的需求;
2. 從已知的概念中理解:類似函數或方法封裝的重復代碼,或 HTML 的代碼塊引入;
3. 組件化特點,具體如下:
(1) .擁有唯一性的組件名稱,方便調用;
(2) .以組件名稱為 HTML 元素標簽形式存在,擴展了 HTML;
(3) .組件可以復用,且組件與組件之間互不干涉;
二.簡單組件
1. 為了方便理解,我們清理掉之前的全部代碼,重新編寫如下:
// 創建一個 Vue 應用實例
const app = Vue.createApp({})
// 定義一個全局組件
app.component('button-counter', {
// 數據
data() {
return {
counter : 100
}
},
// 模板
template : `
計算器:{{counter}}
counter++
`
})
// 掛載
app.mount('#app')
2. 而對于 HTML 調用的部分,可復用的能力體現出來,如下:
<div id="app">
<button-counter>button-counter>
<button-counter>button-counter>
<button-counter>button-counter>
div>
本文由:蘭州啟點網絡(
www.syzhibo.net)整理發布!