First question

Vue doesn’t just create an app.vue

This is the main.js file for the everyday instance app.vue

Let’s get down to business

Let’s start with custom directives

The second object is the value within the object

When we load the page, the data request of the page is slow. Therefore, in order to solve the embarrassment of no blank data page, we can add loading animation for him to judge whether there is data with V-if

Today we take another elegant approach

Is the custom loading command, added through the V-load command

import { createApp } from 'vue'
import Loading from './loading'

const loadingDirective = {
  // where el is the element to bind to,binding is the argument
  mounted (el, binding) {
    // Import vue, instantiate create AN API,loading as the root component
    const app = createApp(Loading)
    // Mount the component to the HTML, here to the created API,(but here to the created DOM element, not actually to the actual DOM layer)
    const instance = app.mount(document.createElement('div'))
    // Add instance to the el object so that it can be retrieved later
    el.instance = instance
    console.log(binding.value)
    if (binding.value) {
      append(el)
    }
  },
  // Changes to component-related data cause component updates
  updated (el, binding) {
    if(binding.value ! == binding.oldvalue) { binding.value ? append(el) : remove(el) } } }function append (el) {
  el.appendChild(el.instance.$el)
}

function remove (el) {
  el.removeChild(el.instance.$el)
}

export default loadingDirective
Copy the code

This is defined in the main.js functionGlobal directives

Use instruction