# Vue进阶培训

# 1 培训简介

# 1.1 内容

本次培训会介绍到一些Vue中更复杂一点的知识点，并且会以实际工程中的使用作为参考讲解。

# 1.2 目标

认真学完之后，大家将会对Vue中的进阶知识有所了解。

# 2 模板语法进阶

# 2.1 输入修饰符

.lazy 
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。
你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。

.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

# 2.2 混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

// 定义一个混入对象
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 自定义指令

当页面加载时，该元素将获得焦点，现在让我们用指令来实现这个功能：

全局自定义指令

Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
            el.focus()
            }
        }
    }

使用：

<input v-focus>

2.3.1 自定义过滤器

Vue允许自定义过滤器，可被用于一些常见的文本格式化。

全局定义过滤器：

Vue.filter('capitalize', function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    })

如果想注册局部指令，组件中也接受一个 filters 的选项：

filters: {
        capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }

使用：

{{ message | capitalize }}

# 3 组件使用进阶

# 3.1 插槽

3.1.1 普通插槽

<slot></slot>

3.1.2 具名插槽

<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 作用域插槽

<slot v-bind:user="user"></slot>

<template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
</template>

# 3.2 动态组件

在不同组件之间进行动态切换

<component v-bind:is="currentTabComponent"></component>

# 3.3 异步组件

Vue 允许以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

Vue.component('async-example', function (resolve, reject) {
    setTimeout(function () {
        // 向 `resolve` 回调传递组件定义
        resolve({
        template: '<div>I am async!</div>'
        })
    }, 1000)
    })

# 4 API使用进阶

# 4.1 vm.$nextTick( [callback] )

将回调延迟到下次 DOM 更新循环之后执行。

new Vue({
        // ...
        methods: {
            // ...
            example: function () {
            // 修改数据
            this.message = 'changed'
            // DOM 还没有更新
            this.$nextTick(function () {
                // DOM 现在更新了
                // `this` 绑定到当前实例
                this.doSomethingElse()
            })
            }
        }
    })

# 4.2 vm.$refs

一个对象，持有注册过 ref 特性的所有 DOM 元素和组件实例，用起来有点像id。

// 组件或dom元素上添加ref属性
    <base-input ref="usernameInput"></base-input>

    // js代码中用$refs获取
    this.$refs.usernameInput

# 4.3 vm.$set( target, propertyName/index, value )

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

export default {
      data() {
            return {
                obj: {}
            }
      },
      mounted() {
        this.$set(this.obj, 'age', 10);
      }
  }

# 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 请求

// 为给定 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 请求

axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

执行多个并发请求

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) {
        // 两个请求现在都执行完成
    }));

# 6 另外还有vuex，jsx，vue-hooks等，大家可以接着探索。

创建人：yinyanting

← 3.9.2 Vue实战培训 3.9.4 VueCLI3培训 →