Summarize the Advanced Application of vue Knowledge System

As one of the three current front-end frameworks, vue is a necessary skill for front-end developers.So how to learn and master vue systematically?For this reason, I have made a simple summary of the knowledge system, the inadequacies please include and correct, if you like, you can point a small compliment!This article mainly describes some advanced applications in vue development, and hope to help you.

Related Recommendations

Summarize the basic introduction of vue knowledge system
Summarize the practical skills of vue knowledge system
Summarize several techniques for using vue-router
Set up a mobile H5 development template for vue-cli

Vue.use

The third-party Vue.js plug-in we use.If the plug-in is an object, you must provide an install method.If the plug-in is a function, it will be used as the install method.When the install method is called, the Vue is passed in as a parameter.This method needs to be called before calling new Vue().

We use the Vue.use method when using plug-ins or third-party component libraries, such as

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

So what exactly did Vue.use do?Let's take a look at the source code first

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
  }
}
Copy Code

As you can see from the above, the plugin parameter is either a function or an object type. First, Vue will look for whether this plugin is in the list of installed plugins. If not, install the plugin. If not, jump out of the function, which ensures that the plugin is installed only once.

The parameter is then converted to an array by the toArray method, and the plugin's install property is determined to be a function, or the plugin itself is a function. Finally, the plugin.install or plugin's method is executed.

For instance

Let's take a real example
1. Write two plug-ins

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

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

export { Plugin1, Plugin2 }
Copy Code

2. Introduce and use these two plug-ins

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

Vue.use(Plugin1, 'Parameter 1')
Vue.use(Plugin2, 'Parameter 2')
Copy Code

These two plug-ins are now available when we run the project code.

Vue.mixin

Mixing provides a very flexible way to distribute reusable functionality in Vue components.A mixed object can contain any component option.When a component uses mixed objects, all options for mixed objects are "mixed" into the options for the component itself.

1. Define a mixin.js

export default mixin {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {  //Date Conversion
   formatDate (dateTime, fmt = 'YYYY year MM month DD day HH:mm:ss') {
     if (!dateTime) {
      return ''
     }
     moment.locale('zh-CN')
     dateTime = moment(dateTime).format(fmt)
     return dateTime
  }
 }
}
Copy Code

2. Use mixin in vue files

import '@/mixin'; // Introducing mixin files
export default {
 mixins: [mixin],  //usage
 data() {
  return {
   userName: "adimin",
   time: this.formatDate(new Date()) //The time in the data source data of this vue file is the method by which references are mixed in
  }
 }
} 
Copy Code

Or use it globally in main.js, and all pages can use it

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

Merge Options

When components and mixed objects contain options with the same name, they will be "merged" in the appropriate way.

  • Data objects are merged recursively internally and take precedence over component data in case of conflicts.
  • The hook function with the same name will be merged into an array and will therefore be called.Hooks that blend into objects are called before the component's own hooks.
  • Options whose values are objects, such as methods, components, and directives, will be merged into the same object.When two object keynames conflict, take the key-value pair of the component object.

Vue.extend

Vue.extension belongs to Vue's global API.It uses the underlying Vue constructor to create a "subclass".A parameter is an object that contains component options.The following:

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

var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White'
    }
  }
})
// Create a Profile instance and mount it on an element.
new Profile().$mount('#app')
Copy Code

Application Instances

We often use Vue.extend to encapsulate some global plug-ins, such as toast, diolog, and so on.

The following is an example of encapsulating a toast component.

1. Write Components

  • Determine the type of popup window based on the type passed in (Success, Failure, Warning, Load, Plain Text)
  • Set the time when the pop-up window will disappear
<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 Slip */
</style>
Copy Code

2. Use vue.extension constructor to mount toast component under vue instance

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
Copy Code

3. Introduce toast pricing in main.js and mount it on vue prototype

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

4. Call in project

this.$toast({ msg: 'Mobile number cannot be empty' })

this.$toast({
  msg: 'Success Tips',
  type: 'success'
})
Copy Code

Differences between Vue.extension and Vue.component

  • Compoonent is a component that needs to be registered before it can be used in a template using a registered tag signature.Vue.extension is written programmatically.
  • Controlling the display of a component requires either passing in a state in the parent component to control it or using v-if/v-show outside the component to control it, while whether the display of a Vue.extension is done manually to mount and destroy the component.

Vue.directive

Register or obtain global instructions.Instruction Definition Function provides several hook functions (optional):

  • Bid: Called only once, when the instruction is first bound to an element, to define an initialization action that is executed once at bind ing time.
  • Inserted: Called when a bound element is inserted into the parent node (the parent node exists to be called, not in the document).
  • Update: Called when the template in which the bound element resides is updated, regardless of whether the binding value changes.By comparing the binding values before and after the update.
  • componentUpdated: Called when the template containing the bound element completes an update cycle.
  • unbind: Called only once, when an instruction is unbound from an element.

Application Instances

The following encapsulates an example of copying and pasting text.

1. Write instructions copy.js

const vCopy = { 
  bind (el, { value }) {
    el.$value = value // Store incoming values with a global property
    el.handler = () => {
      if (!el.$value) {
        alert('No Copied Content')
        return
      }
      // Dynamic creation of textarea Tags
      const textarea = document.createElement('textarea')
      // Set the textarea to readonly to prevent the keyboard from automatically waking up under iOS and move the textarea out of the viewing area
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // Assign the value of copy to the value property of the textarea tag
      textarea.value = el.$value
      // Insert textarea into body
      document.body.appendChild(textarea)
      // Select Value and Copy
      textarea.select()
      // textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('Copy')
      if (result) {
        alert('Copy succeeded')
      }
      document.body.removeChild(textarea)
    }
    // Bind click event, so-called one-click copy
    el.addEventListener('click', el.handler)
  },
  // Triggered when incoming values are updated
  componentUpdated (el, { value }) {
    el.$value = value
  },
  // Remove event binding when an instruction is unbound from an element
  unbind (el) {
    el.removeEventListener('click', el.handler)
  }
}

export default vCopy
Copy Code

2. Registration Instructions

import copy from './copy'
// Custom directives
const directives = {
  copy
}
// This writing allows you to register instructions in batches
export default {
  install (Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  }
}
Copy Code

3. Introduce and use in main.js

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

This allows you to use vCopy instructions directly in your project.

Recommended Articles

Build a web pack project from scratch
Summarize several web pack packaging optimization methods
Summarize front-end performance optimization methods
Several common JS recursion algorithms
Encapsulate a toast and dialog component and publish it to npm
Read through front-end routing, back-end routing, single-page application, multi-page application in one article
On Anti-shake and Throttle of JavaScript

My Public Number of Concern periodically shares front-end knowledge to progress with you!

Tags: Vue Mobile less iOS

Posted on Fri, 20 Mar 2020 16:12:02 -0400 by JeremyTiki