Custom instruction

We can create a directive ourselves in the form of V-XXX and define the directive by directives:’ XXX ‘(Element,binding){}, where element refers to the parameter passed in when we call the directive and binding refers to the bound object.

The short form is given just now. The full form should be:

Cache :{fbind:{// Bind (element,binding){element.value = binding. Inserted (Element,binding){element.focus()}, // Insert (element,binding){element.focus()}, Update (element,binding){element.value = binding.value; }}}Copy the code

There are only bind and update functions in the abbreviated form, so if we use the abbreviated form, this directive will be called when:

1. When the directive is successfully bound to the element (i.e. XXX).

2. When the template where the instruction resides is re-parsed, that is, when the data is updated.

The life cycle

(We also call this a lifecycle hook.)

That is, at some particular point in time, Vue will call the function for us.

The most common lifecycle hooks are Mounted and beforeDestroy. When we want to implement the “first up XXX” function, we can write function statements in mounted hooks. When we want to stop page maintenance and do some finishing touches, we can write function statements in beforeDestroy, such as stop timers.

What happens between beforeCreate and Created?

In the middle is the data monitoring and data proxy process, so if we change the data in beforeCreate, it is not useful because the data monitoring and data proxy have not started yet.

Non-single file component

The VM object is constructed by the Vue constructor, and the component object is constructed by the VueComponent constructor.

There is an important built-in relation: vuecomponent.prototype. __proto__ == vuue. Prototype

That is, the component instance object also has access to all properties and methods on the Vue prototype.

Single file component

A separate vue file configuration

Export Default is exposed for each component and import is introduced in the parent component. (This part seems to be ES6 modular knowledge, remember to fill)

Steps for using child components in parent components: import, register, create tags to use.

The ref attribute

DOM elements can be accessed using the ref attribute, syntax this.$ref.xxx.

props

We can use props to pass data from parent to child components. The child component uses the props option for data reception.

Props :[‘name’,’address’,’age’]

Type restriction while receiving:

props:{
        name:String,
        age:Number,
        address:String
    }
Copy the code

Receive with type restriction + default value specification + necessity restriction on data

Props :{name:{type:String, required:true}, age:{type:Number, default:99 // Default}, address:{type:String, props:{type:String, required:true}, age:{type:Number, default:99 // Default value}, address:{type:String, required:true } }Copy the code

Mixins hybrid

We can write the same parts of different components as a mixin file, expose it with export, import it in the component, and use it after registration with the mixins option.

The plugins plugin

Plugins can be used for customization, which can be used to add functionality to Vue prototype objects and is available globally.

When creating the plugins JS file, be sure to expose an install method that takes the Vue constructor as an argument. In main.js, import the plug-in, vue.use (plugins) to use.