# Vue進階培訓
<br>
## 1 培訓簡介
### 1.1 內容
本次培訓會介紹到一些Vue中更復雜一點的知識點,并且會以實際工程中的使用作為參考講解。
### 1.2 目標
認真學完之后,大家將會對Vue中的進階知識有所了解。
<br><br>
## 2 模板語法進階
### 2.1 輸入修飾符
.lazy
在默認情況下,v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。
你可以添加 lazy 修飾符,從而轉變為使用 change 事件進行同步:
.number
如果想自動將用戶的輸入值轉為數值類型,可以給 v-model 添加 number 修飾符。
.trim
如果要自動過濾用戶輸入的首尾空白字符,可以給 v-model 添加 trim 修飾符
### 2.2 混入
混入 (mixin) 提供了一種非常靈活的方式,來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時,所有混入對象的選項將被“混合”進入該組件本身的選項。
```js
// 定義一個混入對象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定義一個使用混入對象的組件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
```
一般都采用混入文件的方式來混入
注意 ① 數據對象在內部會進行遞歸合并,并在發生沖突時以組件數據優先。
② 生命周期函數混入文件優先。
### 2.3 自定義指令和自定義過濾器
2.3.1 自定義指令
當頁面加載時,該元素將獲得焦點,現在讓我們用指令來實現這個功能:
全局自定義指令
```js
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
```
如果想注冊局部指令,組件中也接受一個 directives 的選項:
```js
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
```
使用:
```js
<input v-focus>
```
2.3.1 自定義過濾器
Vue允許自定義過濾器,可被用于一些常見的文本格式化。
全局定義過濾器:
```js
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
```
如果想注冊局部指令,組件中也接受一個 filters 的選項:
```js
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
```
使用:
```js
{{ message | capitalize }}
```
<br><br>
## 3 組件使用進階
### 3.1 插槽
3.1.1 普通插槽
```js
<slot></slot>
```
3.1.2 具名插槽
```js
<slot name="container"></slot>
<template v-slot:container>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
```
注:一般v-slot 只能添加在 `<template>` 上
3.1.3 作用域插槽
```js
<slot v-bind:user="user"></slot>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
```
### 3.2 動態組件
在不同組件之間進行動態切換
```js
<component v-bind:is="currentTabComponent"></component>
```
### 3.3 異步組件
Vue 允許以一個工廠函數的方式定義你的組件,這個工廠函數會異步解析你的組件定義。Vue 只有在這個組件需要被渲染的時候才會觸發該工廠函數,且會把結果緩存起來供未來重渲染。
```js
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回調傳遞組件定義
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
```
<br><br>
## 4 API使用進階
### 4.1 vm.$nextTick( [callback] )
將回調延遲到下次 DOM 更新循環之后執行。
```js
new Vue({
// ...
methods: {
// ...
example: function () {
// 修改數據
this.message = 'changed'
// DOM 還沒有更新
this.$nextTick(function () {
// DOM 現在更新了
// `this` 綁定到當前實例
this.doSomethingElse()
})
}
}
})
```
### 4.2 vm.$refs
一個對象,持有注冊過 ref 特性 的所有 DOM 元素和組件實例,用起來有點像id。
```js
// 組件或dom元素上添加ref屬性
<base-input ref="usernameInput"></base-input>
// js代碼中用$refs獲取
this.$refs.usernameInput
```
### 4.3 vm.$set( target, propertyName/index, value )
向響應式對象中添加一個屬性,并確保這個新屬性同樣是響應式的,且觸發視圖更新。
```js
export default {
data() {
return {
obj: {}
}
},
mounted() {
this.$set(this.obj, 'age', 10);
}
}
```
<br><br>
## 5 工具使用進階
### 5.1 vue-router
可以簡單了解一下,因為我們的業務需求所以大部分工程都是多頁面應用。
Vue Router 是 Vue.js 官方的路由管理器。針對于SPA(single page application):單一頁面應用程序,它在加載頁面時,不會加載整個頁面,而是只更新某個指定的容器中內容。單頁面應用(SPA)的核心之一是:更新視圖而不重新請求頁面;vue-router在實現單頁面前端路由時,提供了兩種方式:Hash模式和History模式。
hash模式 通過 hash 來實現路由
history模式 通過HTML5中的pushState 和 replaceState來實現,需要后端配合
### 5.2 axios
Axios 是一個基于 promise 的 HTTP 庫
執行 GET 請求
```js
// 為給定 ID 的 user 創建請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可選地,上面的請求可以這樣做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
```
執行 POST 請求
```js
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
```
執行多個并發請求
```js
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 兩個請求現在都執行完成
}));
```
<br><br>
## 6 另外還有vuex,jsx,vue-hooks等,大家可以接著探索。
- 概要
- 技術介紹
- 框架與環境
- 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
- 自定義控件
- 后端
- 移動端
- 前端編譯
- 表單運行態接口
- 協同云