# 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
- 自定义控件
- 后端
- 移动端
- 前端编译
- 表单运行态接口
- 协同云