Vue’s optional API consists of the following sections: Data, DOM, lifecycle hooks, resources, composition, and miscellaneous. The purpose of this article is to document the types and limitations of these apis, and to give some examples to better understand them.

First, dump a document

data

Data – Internal data

  • Type: Object | Function

  • Limitation: The component definition accepts function only

    Because the component import calls data, if data is an object, the second import will override the first. When data is Function, the component calls the Function, which generates a new object, so two new objects are introduced without interfering with each other.

    Notice that data is called

  • Details:

    // The full vue. Js version is an example
console.log(window.Vue)

const Vue = window.Vue

Vue.config.productionTip = false

new Vue({
  // Data is an object
  data: {n:0
  },
  // The function can be shortened to data(){}
  / / or function
  data:function{
    return{
      n:0}},template:` 
        
    
          {{ n }} 
          
        
     `    .methods: {add(){
      this.n += 1
    }
  }
}).$mount('#app')
Copy the code

More: Data response

Props – External data

  • Type: Array < string > | Object

  • Props can be arrays or objects that receive data from the parent component. Props can be a simple array, or instead, objects allow you to configure advanced options such as type checking, custom validation, and setting defaults

  • Example:

    The string

N :0 is passed to demo.vue when: is used with JS in quotes, as shown below

If you want to pass strings in JS, you need to enclose them in quotes

Let the son call the function add in the parent

At a higher level, the son calls the father’s ADD, the father changes his N, and passes it to the son

propsData

computed

Method the methods –

  • Type: {[key: string]: Function}

  • Details: event handlers or ordinary functions

    // Event handlers
new Vue({
  data() {
    return{
      n: 0}},template:` 
        
    
          {{ n }} 
          
        
     `    .methods: {
    add() {
      // This in the method is automatically bound to a Vue instance
      this.n += 1
    }
  }
}).$mount('#app')
Copy the code
    // a normal function can be used instead of filter
new Vue({
  data() {
    return{
      n: 0.array: [1.2.3.4.5.6.7.8]}},template:` 
        
    
          {{ n }} 
          
         
     {{filter()}} 
        
     `    .methods: {
    add() {
      // This in the method is automatically bound to a Vue instance
      this.n += 1
    },
    filter(){
      return this.array.filter(i= > i % 2= = =0)
    }
  }
}).$mount('#app')
Copy the code

    Note: Arrow functions should not be used to define method functions, because arrow functions bind to the context of the parent scope, so this will not point to the Vue instance as expected, this.n will be undefined.

watch

DOM

El – mount point

  • Type: string | Element

  • Restriction: Only applies when an instance is created with new

  • Details: there is a replacement relationship with $mount.

    Provide a DOM element that already exists on the page as the mount target for the Vue instance. It can be a CSS selector or an HTMLElement instance.

    After the instance is mounted, the element can be accessed with vm.$el.

    If this option is present at instantiation time, the instance will start compiling immediately; otherwise, you need to explicitly call vm.$mount() to manually start compiling.

template

render

renderError

Lifecycle hook

Life cycle diagram

beforeCreate

Created – Instances appear in memory

  • Type: the Function

  • example

    The following code

Debuggercreated, you can see that when created(){} runs, the instance appears in memory, not in the page

Debuggermounted: when mounted(){} runs, the instance appears on the page

Updated (){} runs every time the instance is updated

Destory (){} runs every time you click toggle to make the instance disappear, and when you call up the instance again, n returns to 0, indicating that the instance disappears from the page and memory

beforeMount

Mounted – The instance appears in the page

  • Type: the Function

  • Example: See the example in Created

beforeUpdate

Updated – The instance is updated

  • Type: the Function

  • Example: See the example in Created

activated

deactivated

beforeDestroy

Destroyed – The instance is destroyed from the page and memory

  • Type: the Function

  • Example: See the example in Created

errorCaptured

resources

directives

filters

Components – component

  • Type: the Object

  • Three ways of introduction

    Consider modularity in favor of the first approach

    Method one:

Method 2:

Method 3:

Combine the first two methods

  • Naming rule: It is recommended that component names start with uppercase letters to distinguish them from native labels. The file name is recommended in lower case, because some systems do not recognize case, such as Windows 10.

combination

parent

mixins

extends

provide

inject