【Vue】高階系列(一)Vue元件定義與使用 - 非單檔案元件 - 單檔案元件 - VueComponent

語言: CN / TW / HK

theme: vue-pro highlight: a11y-dark


嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012,微信公眾號:ykyk2012]

「這是我參與11月更文挑戰的第23天,活動詳情檢視:2021最後一次更文挑戰

今天我們主要來學習Vue中的元件的概念

0. 元件的概念

傳統方式編寫應用

存在問題: 1. 依賴關係混亂,不好維護 2. 程式碼複用率不高

在這裡插入圖片描述

使用元件方式編寫應用 在這裡插入圖片描述

元件的定義——實現應用中區域性功能程式碼和資源的集合 在這裡插入圖片描述

1 非單檔案元件

1.1 使用元件的三大步驟

  1. 定義元件(建立元件)
  2. 註冊元件
  3. 使用元件(寫元件標籤)

1.2 如何定義一個元件

使用Vue.extend(options)建立,其中optionsnew Vue(options)時傳入的那個options幾乎一樣,但有以下區別

  1. 不要寫el——最終所有的元件都要經過一個vm的管理,由vm中的el決定服務哪個容器
  2. data必須寫成函式——避免元件被複用時,資料存在引用關係

【備註】使用tempalte可以配置元件結構

1.3 如何註冊元件

  1. 區域性註冊:new Vue的時候傳入components選項
  2. 全域性註冊:Vue.component('元件名', 元件)

```html

基本使用


{{msg}}



```

1.4 注意點

  1. 關於元件名

  2. 一個單片語成

第一種寫法(首字母小寫):school

第二種寫法(首字母大寫):School

  • 多個單片語成 第一種寫法(kebab-case命名):my-school

第二種寫法(CamelCase命名):MySchool(需要Vue腳手架支援)

  • 備註 ① 元件名儘可能迴避HTML中已有的元素名稱,例如h2、H2

② 可以使用name配置項指定元件在開發者工具中呈現的名字

  1. 關於元件標籤

第一種寫法:<school></school>

第二種寫法:<school/> (不使用腳手架會導致後續元件不能渲染)

  1. 簡寫方式 const school = Vue.extend(options) 可以簡寫成 const school = options

```html

幾個注意點

{{msg}}

```

1.5 元件巢狀

```html

元件的巢狀

```

2. VueComponent

  1. app元件本質是一個名為VueComponent的建構函式,且不是程式設計師定義的,是Vue.extend生成的

  2. 我們只需要寫<app/><app></app>,Vue解析時會幫我們建立app元件的例項物件,即Vue幫我們執行new VueComponent(options)

  3. 特別注意:每次呼叫Vue.extend,返回的都是一個全新的VueComponent

  4. 關於this指向 ① 元件配置中:data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是【VueComponent例項物件】 ② new Vue(options)配置中:data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是【Vue例項物件】

  5. VueComponent的例項物件,以後簡稱vc(也可稱之為:元件例項物件)

  6. Vue的例項物件,以後簡稱為vm

```html

VueComponent

```

一個重要的內建關係

javascript VueComponent.prototype.__proto__ === Vue.prototype 這樣元件例項物件vc就可以訪問到Vue原型上的屬性和方法

在這裡插入圖片描述

```html

一個重要的內建關係

```

3. 單檔案元件 vue 檔案的組成(3 個部分)

3.1 組成

1) 模板頁面

html <template> 頁面模板 </template>

2) JS 模組物件

```html

```

3) 樣式

```html

```

3.2 基本使用

1) 引入元件 2) 對映成標籤 3) 使用元件標籤

App.vue

```html

```

main.js

```javascript import App from './App'

new Vue({ el: '#root', component: {App}, }) ```

3.3 關於標籤名與標籤屬性名書寫問題

1) 寫法一: 一模一樣 2) 寫法二: 大寫變小寫, 並用-連線

最後,歡迎關注我的專欄,和YK菌做好朋友

「其他文章」