# Vue實戰培訓
<br>
## 1 培訓簡介
### 1.1 內容
本次培訓是一次代碼實戰培訓,首先在了解了Vue組件核心概念和通信方式之后,將以Vue工程實現具體客開需求的角度給
大家一個更加具體的實戰學習。
### 1.2 目標
認真學完之后,大家將能夠初步上手使用Vue工程及組件等開發客開需求。
<br><br>
## 2 Vue組件
### 2.1 Vue組件介紹
組件是可復用的 Vue 實例,且帶有一個名字。所以它們與 new Vue 接收相同的選項,例如 data、computed、watch、
methods 以及生命周期鉤子等。可以將組件進行任意次數的復用,一個組件的 data 選項必須是一個函數,因此每個實例
可以維護一份被返回對象的獨立的拷貝。
::: demo
```js
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
```
:::
<a href="https://codepen.io/cyt68/pen/MWwpmdm" target="_blank">在線運行示例</a>
### 2.2 vue組件三大核心概念
<img src='https://t1.picb.cc/uploads/2020/03/04/k37edR.png'>
2.2.1 屬性
自定義屬性props:prop 定義了這個組件有哪些可配置的屬性
inheritAttrs:默認情況下父作用域的不被認作 props 的特性綁定將會“回退”且作為普通的 HTML 特性應用在
子組件的根元素上。可通過設置 inheritAttrs 為 false,這些默認行為將會被去掉。
注意:這個選項不影響 class 和 style 綁定。
data與props:data 被稱之為動態數據,在各自實例中,在任何情況下,我們都可以隨意改變它的數據類型和數據
結構,不會被任何環境所影響。props 被稱之為靜態數據,在各自實例中,一旦在初始化被定義好類
型時,基于 Vue 是單向數據流,在數據傳遞時始終不能改變它的數據類型,而且不允許在子組件中
直接操作 傳遞過來的props數據,而是需要通過別的手段,改變傳遞源中的數據。
單向數據流:props的數據都是通過父組件或者更高層級的組件數據或者字面量的方式進行傳遞的,不允許直接操作
改變各自實例中的 props數據,而是需要通過別的手段,改變傳遞源中的數據。
2.2.2 事件
事件修飾符
2.2.3 插槽
普通插槽和作用域插槽
<br><br>
## 3 Vue組件間通信
### 3.1 通過 Prop 向子組件傳遞數據,子組件可以通過調用內建的 $emit 方法 并傳入事件名稱來觸發一個事件
Prop 是你可以在組件上注冊的一些自定義 attribute。當一個值傳遞給一個 prop attribute 的時候,它就變成了
那個組件實例的一個屬性。
::: demo
```js
Vue.component('button-counter1', {
props: ['count'],
template: '<button v-on:click="emitAdd">You clicked me {{ count }} times.</button>',
methods: {
emitAdd() {
this.$emit('add');
}
}
})
```
:::
### 3.2 利用事件總線通知事件
這種方法通過一個空的Vue實例作為中央事件總線(事件中心),用它來觸發事件和監聽事件,巧妙而輕量地實現了任何
組件間的通信,包括父子、兄弟、跨級。
::: demo
```js
var Event=new Vue();
Event.$emit(事件名, 數據);
Event.$on(事件名, data => {});
```
:::
### 3.3 $parent / $children與 ref
ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件實例
$parent / $children:訪問父 / 子實例
其他還有vuex,provide/inject,$attrs/$listeners等方式。
概念了解之后,我們用實際項目來學習一下。
- 概要
- 技術介紹
- 框架與環境
- vue開發
- 開發規范
- 前端開發規范
- 總體原則
- HTML規范
- HTML&css規范
- vue編碼規范
- Javascript規范
- 后端開發規范
- cap4
- 自定義控件
- 前端2.0(PC+移動)
- PC前端
- 后端
- 移動端
- 移動端接口
- 低版本協同升級到V5 8.0適配說明
- 自定義按鈕
- 自定義按鈕(無流程)
- 自定義控件(列表插槽)
- 自定義按鈕(篩選條件)
- 低版本協同升級到V5 8.0適配說明
- 門戶空間
- 門戶與欄目掛載
- 欄目開發及流程說明
- 頁面模板
- 客開通路及插件體系
- 表單設計器擴展配置
- 使用步驟
- 配置說明
- 事件API
- Demo示例
- 運行態客開通路
- 插件使用步驟
- 插件接口
- 事件接口
- 鉤子相關接口
- 表單操作接口
- Demo示例
- 插件機制
- 表單運行態接口(舊)
- 白名單插件
- 版本記錄
- vue組件庫
- 開發指南
- 開發文檔規范
- 業務組件介紹
- 業務組件
- table組件
- 分頁組件
- title組件
- 統計排隊組件
- code組件
- 條件篩選
- 批量導入
- 上傳Excel
- 批量更新
- 批量刷新
- UI組件
- 按鈕組件
- 復選組件
- 取色器組件
- 示例組件
- 水平選擇組件
- 選圖標組件
- 提示組件
- 單選組件
- 搜索組件
- 選擇組件
- 穿梭框組件
- 標簽組件
- 文本組件
- 樹組件
- 驗證組件
- 菜單組件
- iframe組件
- toolbar
- 統計組件
- 餅圖
- 柱狀圖
- 圖標
- 業務關系開發指南
- 自定義觸發
- 自定義關聯
- 后端API
- 更新表單數據緩存
- 發起表單流程
- 取得指定表單PDF或截圖
- 無流程批量添加
- 無流程批量刪除
- 無流程批量更新
- 無流程批量導出
- 客開培訓文檔
- Vue基礎培訓
- Vue實戰培訓
- Vue進階培訓
- VueCLI3培訓
- cap3
- 自定義控件
- 后端
- 移動端
- 前端編譯
- 表單運行態接口
- 協同云