## 什么是組件?
web的組件其實就是頁面組成的一部分,好比是電腦中的每一個元件(如硬盤、鍵盤、鼠標),它是一個具有獨立的邏輯和功能或界面,同時又能根據規定的接口規則進行相互融合,變成一個完整的應用。
web頁面就是由一個個類似這樣的部分組成的,比如導航、列表、彈窗、下拉菜單等。頁面只不過是這些組件的容器,組件自由組合形成功能完整的界面,當不需要某個組件,或者想要替換某個組件時,可以隨時進行替換和刪除,而不影響整個應用的運行。
前端組件化的核心思路就是將一個巨大復雜的東西才分成粒度合理的小東西。
使用組件的好處:
- 提高開發效率
- 方便重復使用
- 簡化調試步驟
- 提升整個項目的課維護性
- 便于協同開發
組件(Component)是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素,封裝可重用的代碼。
在較高層面上,組件是自定義元素, Vue.js 的編譯器為它添加特殊功能。
在有些情況下,組件也可以是原生 HTML 元素的形式,以 is 特性擴展。
組件系統讓我們可以用獨立可復用的小組件來構建大型應用,幾乎任意類型的應用的界面都可以抽象為一個組件樹:

vue.js的組件可以理解為預先定義好行為的ViewModel類。一個組件可以預先定義很多選項。但是最核心的是以下幾個:
- **模板(template)**——模板聲明了數據和最終展現給用戶的DOM之間的映射關系。
- **初始數據(data)**——一個組件的初始數據狀態。對于可服用的組件來說,通常是私有的狀態。
- **接受的外部參數(props)**——組件之間通過參數來進行數據的傳遞和共享。參數默認是單向綁定(由上至下),但也可以顯式聲明為雙向綁定。
- **方法(methods)**——對數據的改動操作一般都在組件的方法內進行。可以通過v-on指令將用戶輸入事件和組件方法進行綁定。
- **生命周期鉤子函數(lifecycle hooks)**——一個組件會觸發多個生命周期鉤子函數,比如created、attached、destroyed等。在這些鉤子函數中,我們可以封裝一些自定義的邏輯。和傳統的MVC相比,這可以理解為Controller的邏輯被分散到了這些鉤子函數中。
- 前端新手村
- 前言
- 第1章 遇見Vue.js
- 第一個Vue.js程序
- vue嘗鮮
- 第2章 概念理解
- 漸進式框架
- 虛擬DOM
- MVVM模式
- MVX模式是什么
- 第3章 Vue基礎概覽
- 第4章 Vue內置指令詳解
- vue-text
- vue-html
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-on
- v-bind
- v-model
- v-pre
- v-cloak
- v-once
- 第5章 基礎demo小練習
- 圖書管理系統
- 頁面布局
- 列表渲染
- 功能實現
- 基于BootStrap+Vuejs實現用戶信息表
- 功能描述
- 布局實現
- 星座判斷
- 第6章 組件
- 什么是組件
- 使用組件
- Prop
- 自定義事件
- 使用Slot分發內容
- 動態組件
- 雜項
- 第7章-過渡
- 過渡效果
- 概述
- 單元素/組件的過渡
- 初始渲染的過渡
- 多個元素的過渡
- 多個組件的過渡
- 列表過渡
- 可復用的過渡
- 動態過渡
- 過渡狀態
- 狀態動畫與watcher
- 動態狀態轉換
- 通過組件組織過渡
- Render函數
- 基礎
- createElement參數
- 使用JavaScript代替模板功能
- JSX
- 函數化組件
- 模板編譯
- 自定義指令
- 簡介
- 鉤子函數
- 鉤子函數參數
- 函數簡寫
- 對象字面量
- Vuex狀態管理
- Vuex是什么?
- Vuex的安裝
- Vuex起步
- data的替代品-State和Getter
- 測試Getter
- Action-操作的執行者
- 測試Action
- 只用Mutation修改狀態
- 測試Mutations
- Vuex的基本結構
- 子狀態和模塊
- 用服務分離外部操作
- Vue-router
- Vue-router是什么
- Vue-router安裝
- 基本用法1
- 基本用法2
- Vue-cli
- Vue中的Node.js
- Vue中的npm、cnpm
- Vue中的webpack
- 安裝
- 基本使用
- 模板
- 全局API
- Vue.extend
- Vue.nextTick
- Vue.set
- Vue.delete
- Vue.directive
- Vue.filter
- Vue.component
- Vue.use
- Vue.mixin
- Vue.compile
- 附錄
- 相關網站
- 尤雨溪
- 第10章 webpack
- webpack安裝
- webpack基本使用
- webpack命令行
- webpack配置文件
- 單頁面應用SPA
- 第1章 Vue.js簡介
- 1.1 Vue.js簡介
- 1.1.1 Vue.js是什么
- 1.1.2 為什么要用Vue.js
- 1.1.3 Vue.js的發展歷史
- 1.1.4 Vue.js與其他框架的區別
- 1.2 如何使用Vue.js
- 1.2.1 第一個Vue.js程序
- 1.2.2 Vue.js小嘗鮮
- 1.3 概念詳解
- 1.3.1 什么是漸進式框架
- 1.3.2 虛擬DOM是什么
- 1.3.3 如何理解MVVM
- 第2章 基礎概覽
- 2.1 Vue實例
- 2.1.1 構造器
- 2.1.2 屬性與方法
- 2.1.3 實例生命周期
- 2.1.4 生命周期圖示
- 2.2 模板語法
- 2.2.1 插值
- 2.2.2 指令
- 2.2.3 過濾器
- 2.2.4 縮寫
- 第3章 Class與Style的綁定
- 第4章 模板渲染
- 第5章 事件詳解
- 第6章 表單控件綁定
- 第7章 指令詳解
- 7.1 內部指令
- 7.2 自定義指令
- 7.3 指令的高級選項
- 第8章 計算屬性
- 第9章 過濾器
- 第10章 組件
- 10.1 什么是組件
- 10.2 注冊組件
- 10.3 組件選項
- 10.4 組件間的通信
- 10.5 內容分發
- 10.6 動態組件