A, Vue. Directive

Vue.directive(id,[definition]);

1) parameters

{ string } id
{ Function | Object }  [ definition ]
Copy the code

(2) Usage

Register or get global directives.

<! Registered - - - >Vue.directive('my-directive', { bind:function(){},
 inserted:function(){},
 update:function(){},
 componentUpdated:function(){},  unbind:function(){}, }) <! -- Register (instruction function) -->Vue.directive('my-directive'.function(){ <! This will be called by bind and update -->}) <! Getter method to return the registered instruction -->var myDirective = Vue.directive('my-directive'); Copy the code

(3) In addition to the core function default built-in instructions (V-model and V-show), vue.js also allows the registration of custom instructions. Although the main form of code reuse and abstraction is in the form of components, there are cases where low-level operations on ordinary DOM elements are still needed, and custom instructions are used.

The vue. directive method is used to register or retrieve global directives, not to validate them. The difference is that all you need to do to register an instruction is to store it somewhere, whereas to make an instruction work is to take it out of somewhere and execute it.

(5) Implementation

<! -- Where to save instructions -->Vue.options = Object.create(null);
Vue.options['directives'] = Object.create(null);
 
Vue.directive = function(id,definition){
 if(! definition){ return this.options['directive'][id];  }else{  if(typeof definition === 'function') { definition = { bind: definition,update: definition};  }  this.optipns['directive'][id] = definition;  return definition;  } } Copy the code

1. Create an options property on the Vue constructor to store the options and add a directive method to the options to store the directives.

The vue. directive method takes two arguments, id and definition, which can register or retrieve directives, depending on whether the definition argument exists.

3. If the definition argument does not exist, read the directive from this.options[‘directive’] with id and return it.

4. If the definition parameter exists, it indicates that the operation is registered, and then determines whether the definition parameter type is a function.

5. If it is a function, bind and update are listened for by default, so definition is assigned to bind and update in the object and overwritten with this object.

6. If definition is not a function, it is a user – defined directive object. In this case, you do not need to do anything.

Second, the Vue. Filter

Vue.filter(id,[definition]); (1) Parameters

{ string } id
{ Function | Object }   [definition]
Copy the code

(2) Usage

Register or get global filters

<! Registered - - - >Vue.filter('my-filter'.function(value){
<! -- Return the value after processing -->})
<! Getter method to return the registered filter -->var myFilter = Vue.filter('my-filter'); Copy the code

(3) Vue.js allows custom filters that can be used for some common text formatting. Filters can be used in two places: double curly brace interpolation and V-bind expressions. Filters should be added to the end of Javascript expressions, indicated by the “pipe” symbol

<! -- In double braces -->{{ message | capitalize }}
<! -- in v-bind --><div v-bind:id="rawId | formatId "></div>
Copy the code

(4) Vue.filter is only used to register or get global filters.

(5) Implementation

Vue.options['filters'] = Object.create(null);
 
Vue.filter = function(id,definition){
 if(! definition){  return this.options['filters'][id];
 }else{  this.optipns['filters'][id] = definition;  return definition;  } } Copy the code

1. Added the Filters property in vue. options to hold the filter, and added the filter method in vue. js to accept two parameters, ID and definition.

The vue. filters method registers or retrieves filters, depending on whether the definition argument exists.

3. If definition does not exist, read the filter from this.options[‘filters’] with id and return it.

4. If definition exists, it is a registration operation. Save this parameter directly to this.optipns[‘filters’].

Third, Vue.com ponent

Vue.component(id,[definition]);

1) parameters

{ string } id
{ Function | Object } [definition]
Copy the code

(2) Usage

Register or get global components. When a component is registered, the name of the component is also automatically set with the given ID.

<! Register the component and pass in an extended constructor -->Vue.component('my-component',Vue.extend({/ *... * /}));
<! -- Register the component and pass in an option object (automatically call vue.extend) -->
Vue.component('my-component',{/*... * /});<! Get the registered component (always return constructor) --> var MyComponent = Vue.component('my-component'); Copy the code

Vue. Extend previously we have said, do not understand can see this article: learn Vue source code (2) handwritten Vue. Extend method

(3) Vue.com Ponent only registers or obtains components

(4) Principle

Vue.options['components'] = Object.create(null);
 
Vue.component = function(id,definition){
 if(! definition){  return this.options['components'][id];
 }else{  if(isPlainObject(definition)){  definition.name = definition.name || id;  definition = Vue.extend(definition);  }  this.optipns['components'][id] = definition;  return definition;  } } Copy the code

1. Added the Components property in vue. options to hold components, and added the Component method in vue. js to take two arguments, ID and definition.

2. The Vue.component method can register or get filters, depending on whether the definition parameter exists.

3. If definition does not exist, read the component from this.options[‘components’] with id and return it.

4, If definition exists, it is a registration operation, so you need to save the component to this.optipns[‘ Components ‘].

5. Since the definition argument supports two arguments, an option object and a constructor, and the component is actually a constructor, a subclass of vue.extend, the definition argument needs to be treated as a constructor.

6. If the definition argument is of type Object, call vue. extend to subclass Vue and use Vue.component to register the component.

7. If no component name is set in the options object, the component name is automatically set with the given ID.

4. Merge vue. directive, vue. filter and Vue.component codes

Vue.options = Object.create(null);
<! -- ASSET_TYPES = ['component','directive','filter'] -->
ASSET_TYPES.forEach(type=>{
 Vue.options[type+'s'] = Object.create(null);
}) ASSET_TYPES.forEach(type=>{  Vue[type] = function(id,definition){ if(! definition){ return this.options[type+'s'][id];  }else{  <! - component - >  if(type==='component' && isPlainObject(definition)){  definition.name = definition.name || id;  definition = Vue.extend(definition);  }  <! - instructions -- -- >  if(type==='directive' && typeof definition === 'function'){  definition = { bind: definition,update: definition};  }  this.optipns['components'][id] = definition;  return definition;  }  } }) Copy the code

Article reference: Simple Vue

This article is formatted using MDNICE