Vue common directives and APIs

1 the global APIs

1.1 the Vue. Filter

1.1.1 Basic Syntax

Vue.filter (id=>{string},[definition]=>{Function}) registers or gets global filters

Vue.filter ('my-filter'.function (value) { / / register
  // Returns the processed value})Copy the code

use

{{original data | | filter name}}Copy the code

1.1.2 Local filters

export default {
  // ...
  filterFilter name (value to be processed) {// ...
      returnResults after processing}}}Copy the code

1.1.3 Global Reference encapsulation

Example: Encapsulating a time converter

Create a newtimeConverter.jsfile

export const timeConverter = time= > {
  const t = new Date(time)
  const diff = Date.now() - t.getTime()

  const year = Math.floor(diff / (1000 * 3600 * 24 * 365))
  if (year) {
    return `${year}Years ago `
  }
  const month = Math.floor(diff / (1000 * 3600 * 24 * 30))
  if (month) {
    return `${month}Month ago `
  }
  const day = Math.floor(diff / (1000 * 3600 * 24))
  if (day) {
    return `${day}Days ago `
  }
  const hour = Math.floor(diff / (1000 * 3600))
  if (hour) {
    return `${hour}Hours before `
  }
  const minute = Math.floor(diff / (1000 * 60))
  if (minute) {
    return `${minute}Minutes ago `
  } else {
    return 'just'}}Copy the code

It is referenced in main.js

import {timeConverter} from '@/utils/timeConverter.js'
Vue.filter ('timeConverter',timeConverter)
// The first parameter indicates the name of the custom filter, and the second parameter indicates the function
Copy the code

1.1.4 Extended Encapsulation (vue.use)

Vue. Use the format of the ()

Vue.use(Object)
There must be an install method in the /** * object. This install method, in vue.use(), will: * 1. Automatically called * 2. The Vue constructor * / is automatically passedCopy the code

The final code is added to the timeconverter.js file

+ export default {
+   install: function(Vue) {+// console.log('install',val===Vue)
+     // Add a global filter definition
+     // Vue.filter ('timeConverter',(val)=>{})
+     Vue.filter('timeConverter',timeConverter)
+ }
Copy the code

在main.jsIn the call

import TimeConverter from '@/utils/timeConverter.js'
Vue.use(TimeConverter)
Copy the code

1.2 the Vue. Directive

1.2.1 Basic Syntax

Vue. Directive (id = > {string}, [definition] = > {Function | Object}) registered or obtain global directives

/ / register
Vue.directive ('my-directive', {bind:function () {},
  inserted:function () {},
  update:function () {},
  componentUpdated:function () {},
  unbind:function () {}
  // 'bind' and 'update' will be called
  
})
Copy the code

1.2.1 Example: Focus

/ / global
Vue.directive ('focus', {
  inserted:function (el) {
    // Focus elements
    el.focus
  }
})
/ / local
export default {
  // ...
  directives: {inserted:function (el) {
    el.focus
    }
  }
}
Copy the code

use

<input v-focus>
Copy the code

2 Special Attributes

2.1 the Key

Key’s main role

The special attribute of key is mainly used in the virtual DOM algorithm of Vue to identify VNodes when comparing old and new nodes. If keys are not used, Vue uses an algorithm that minimizes dynamic elements and tries to modify/reuse the same type of elements in place whenever possible. With a key, it rearranges the elements based on the change in the key and removes elements where the key does not exist.

Why should the key value be different?

Child elements that have the same parent element must have a unique key; duplicate keys can cause rendering errors

2.2 Ref

The role of the ref

Parent component modifies the child component’s data

<template>
  <SonComponent ref="son" />
</template>

<script>
  export defalut {
    / /...throughthis.$refs to access child components}</script>
Copy the code