总结vue知识体系之高级应用篇

时间  2020-03-18
标签 总结 vue 知识 体系 高级 应用 繁體版
原文   原文链接

vue 做为目前前端三大框架之一，对于前端开发者能够说是必备技能。那么怎么系统地学习和掌握 vue 呢？为此，我作了简单的知识体系体系总结，不足之处请各位大佬多多包涵和指正，若是喜欢的能够点个小赞！本文主要讲述一些vue开发中的几个高级应用，但愿能对你们有所帮助。前端

相关推荐vue

总结vue 知识体系之基础入门篇
总结vue知识体系之实用技巧
总结几个vue-router的使用技巧
搭建一个vue-cli的移动端H5开发模板webpack

Vue.use

咱们使用的第三方 Vue.js 插件。若是插件是一个对象，必须提供install方法。若是插件是一个函数，它会被做为install方法。install方法调用时，会将Vue做为参数传入。该方法须要在调用new Vue()以前被调用。web

咱们在使用插件或者第三方组件库的时候用到Vue.use这个方法，好比算法

import iView from 'iview'
Vue.use(iView)

那么Vue.use到底作了些什么事情呢？咱们先来看一下源码vue-router

import { toArray } from '../util/index'

export function initUse(Vue: GlobalAPI) {
  Vue.use = function(plugin: Function | Object) {
    const installedPlugins = this._installedPlugins || (this._installedPlugins = [])
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

咱们由以上能够看出，plugin参数为函数或者对象类型，首先Vue会去寻找这个插件在已安装的插件列表里有没有，若是没有，则进行安装插件，若是有则跳出函数，这保证插件只被安装一次。vue-cli

接着经过toArray方法将参数变成数组，再判断plugin的install属性是否为函数，或者plugin自己就是函数，最后执行plugin.install或者plugin的方法。npm

举个例子

下面咱们来举个实际例子
一、编写两个插件编程

const Plugin1 = {
  install(a) {
    console.log(a)
  }
}

function Plugin2(b) {
  console.log(b)
}

export { Plugin1, Plugin2 }

二、引入并 use 这两个插件后端

import Vue from 'vue'
import { Plugin1, Plugin2 } from './plugins'

Vue.use(Plugin1, '参数1')
Vue.use(Plugin2, '参数2')

此时咱们运行项目代码就能够用到上面两个插件了。

Vue.mixin

混入 (mixin) 提供了一种很是灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象能够包含任意组件选项。当组件使用混入对象时，全部混入对象的选项将被“混合”进入该组件自己的选项。

一、定义一个 mixin.js

export default mixin {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {  //日期转换
   formatDate (dateTime, fmt = 'YYYY年MM月DD日 HH:mm:ss') {
     if (!dateTime) {
      return ''
     }
     moment.locale('zh-CN')
     dateTime = moment(dateTime).format(fmt)
     return dateTime
  }
 }
}

二、在vue文件中使用mixin

import '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin],  //用法
 data() {
  return {
   userName: "adimin",
   time: this.formatDate(new Date()) //这个vue文件的数据源data里面的time就是引用混入进来的方法
  }
 }
}

或者在全局中使用在main.js中，全部页面都能使用了

import mixin from './mixin'
Vue.mixin(mixin)

合并选项

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

  • data对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
  • 同名钩子函数将合并为一个数组，所以都将被调用。混入对象的钩子将在组件自身钩子以前调用。
  • 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

Vue.extend

Vue.extend 属于 Vue 的全局 API。它使用基础 Vue 构造器，建立一个“子类”。参数是一个包含组件选项的对象。以下：

<div id="app"></div>

var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White'
    }
  }
})
// 建立 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#app')

应用实例

咱们经常使用 Vue.extend 封装一些全局插件，好比 toast， diolog 等。

下面以封装一个 toast 组件为例。

一、编写组件

  • 根据传入的 type 肯定弹窗的类型（成功提示，失败提示，警告，加载，纯文字）
  • 设置弹窗消失的时间
<template>
  <div>
    <transition name="fade">
      <div class="little-tip" v-show="showTip">
        <img src="/success.png" alt="" width="36" v-if="type=='success'" />
        <img src="/fail.png" alt="" width="36" v-if="type=='fail'" />
        <img src="/warning.png" alt="" width="36" v-if="type=='warning'" />
        <img src="/loading.png" alt="" width="36" v-if="type=='loading'" class="loading" />
        <span>{{msg}}</span>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showTip: true,
        msg: '',
        type: ''
      }
    },
    mounted() {
      setTimeout(() => {
        this.showTip = false
      }, 1500)
    }
  }
</script>
<style lang="less" scoped>
  /* 样式略 */
</style>

二、利用 Vue.extend 构造器把 toast 组件挂载到 vue 实例下

import Vue from 'vue'
import Main from './toast.vue'

let Toast = Vue.extend(Main)

let instance
const toast = function(options) {
  options = options || {}
  instance = new Toast({
    data: options
  })
  instance.vm = instance.$mount()
  document.body.appendChild(instance.vm.$el)
  return instance.vm
}
export default toast

三、在 main.js 引入 toast 组价并挂载在 vue 原型上

import Vue from 'vue'
import toast from './components/toast'
Vue.prototype.$toast = toast

四、在项目中调用

this.$toast({ msg: '手机号码不能为空' })

this.$toast({
  msg: '成功提示',
  type: 'success'
})

Vue.extend 和 Vue.component 的区别

  • component是须要先进行组件注册后，而后在 template 中使用注册的标签名来实现组件的使用。Vue.extend 则是编程式的写法。
  • 控制component的显示与否，须要在父组件中传入一个状态来控制或者在组件外部用 v-if/v-show 来实现控制，而 Vue.extend 的显示与否是手动的去作组件的挂载和销毁。

Vue.directive

注册或获取全局指令。指令定义函数提供了几个钩子函数（可选）：

  • bind: 只调用一次，指令第一次绑定到元素时调用，能够定义一个在绑定时执行一次的初始化动做。
  • inserted: 被绑定元素插入父节点时调用（父节点存在便可调用，没必要存在于 document 中）。
  • update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。经过比较更新先后的绑定值。
  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  • unbind: 只调用一次， 指令与元素解绑时调用。

应用实例

下面封装一个复制粘贴文本的例子。

一、编写指令 copy.js

const vCopy = { 
  bind (el, { value }) {
    el.$value = value // 用一个全局属性来存传进来的值
    el.handler = () => {
      if (!el.$value) {
        alert('无复制内容')
        return
      }
      // 动态建立 textarea 标签
      const textarea = document.createElement('textarea')
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 选中值并复制
      textarea.select()
      // textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('Copy')
      if (result) {
        alert('复制成功')
      }
      document.body.removeChild(textarea)
    }
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新的时候触发
  componentUpdated (el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind (el) {
    el.removeEventListener('click', el.handler)
  }
}

export default vCopy

二、注册指令

import copy from './copy'
// 自定义指令
const directives = {
  copy
}
// 这种写法能够批量注册指令
export default {
  install (Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  }
}

三、在 main.js 引入并 use

import Vue from 'vue'
import Directives from './JS/directives'
Vue.use(Directives)

这样就能够在项目直接用 vCopy 指令了。

推荐文章

从零开始构建一个webpack项目
总结几个webpack打包优化的方法
总结前端性能优化的方法
几种常见的JS递归算法
封装一个toast和dialog组件并发布到npm
一文读尽前端路由、后端路由、单页面应用、多页面应用
浅谈JavaScript的防抖与节流

关注的个人公众号不按期分享前端知识，与您一块儿进步！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程