Custom instruction, mixing, routing, lifecycle

Custom instruction

We can manipulate attributes for tags through custom instructions , style , Events, etc , But the Directive requires that ”v-” start

for example ：

<input type="text" v-foc>

<input type="text" v-sty>

 directives:{

 foc:{// Modify event 

    inserted:function(el){

         el.focus()

       }

   },

  sty:{// Modify the style 

     inserted:function(el){

          el.style.backgroundColor="pink"

       }

    }

 }

Parameters

el: Get the element of the binding instruction

binding: An object

name: get v- Subsequent instruction name

value : Get attribute value

exprestion: Bound attribute keywords

arg: Get the paid variable name

modifiers: Get suffix sub attribute name , Return an object

Hook function

inserted Called when the bound element is inserted into the parent node

bind The first time an instruction is bound to an element , Call it once

update The bound element calls when the template is updated

compoentUpdated The bound element is called when the template completes an update cycle

unbind Called when an instruction is unbound from an element , Call it once

for example ：

bind:function(el,binding){

        console.log(el)

        console.log(binding.name)

        console.log(binding.value)

         console.log(binding.expression)

         console.log(binding.arg)

         console.log(binding.modifiers)

         el.value=binding.value

         for(var key of Object.keys(binding.modifiers)){

          if(key=="a"){

                      el.style.backgroundColor="green"

                    }

               }

           }

Mix in

Blending is similar to inheritance , Multiple inheritance can be realized , Give Way vue You can get the properties and methods under other objects , Provide code utilization , Reduce code duplication

for example ：

var obj={

            methods:{

                fun: function(){

                    console.log(" This is a obj Function of ")

                }

             }

        }

new Vue({

            el:"#app",

            mixins:[obj,emp],// Array can inherit multiple objects 

})

<div id="app">{
   {fun()}}</div>

route

Routing is used to jump paths , however vue It's single page development , So the route does not jump to a new page , Instead, different components are switched for display

for example ：

// Create two page components 

        var login={template:'<div><h2> This is the login page </h2><div>'}

        var res={template:'<div><h2> This is the registration page </h2><div>'}

        var routes=[// Configure the path of the component 

            {path:'/a',component:login},

            {path:'/b',component:res}

        ]

        var router=new VueRouter({routes})// Create routing objects 

        new Vue({

            el:"#app",

            router// Application routing 

        })

<!--router-view According to the component -->

<router-link to="/a"> Sign in </router-link> Hyperlink jump 

<router-link to="/b"> register </router-link>

<!--router-view According to the component -->

<router-view></router-view>

Route attribute parameters

to: Define jump path

replace: After setting the navigation jump , Don't be history Object record

tag: Let the route change html Label display

active-class: The style in which the route is activated , But it must be class Property name

event: Events triggered by changing the route , The default is to click

append: Set route lookup subfolder path /a/b

for example ：

<router-link to="/a" replace tag="h2" active-class="box"

        event="mouseover"> Sign in </router-link>

Life cycle

The life cycle process is divided into ： Before creation , After creation , Before mounting , After mounting , Before updating , After the update , Before destruction , After destruction

beforecreate: The component is called just when it is created , All variables and functions here are uninitialized

created: Call after the component is created , Now the variables and functions have been initialized

beforeMount: Call before component mount , here el You can find the tag element

mounted: Call after component mount , At this time, you can operate dom Elements

beforeUpdate: Call before component update , At this point, you can get the old and new virtual dom comparing

Updated: Call after component update , You can also operate at this time dom, But it's new dom value

beforeDestroy: Call... Before the component is destroyed , Data used to release components , For example, destroy the carousel map , Variable , Functions, etc

destroyed: Call... After the component is destroyed , At this point, the component has been destroyed , Unable to call component

for example ：

new Vue({

            el:"#app",

            data:{str:"hello"},

            methods:{

                fun:function(){

                    console.log(" The function is executed ")

                }

            },

            beforeCreate:function(){
                console.log("--------- Before creation ---------")
            },

            created:function(){
                console.log("--------- After creation ---------")
            },

            beforeMount:function(){
                console.log("--------- Before mounting ---------")
            },
            mounted:function(){
                console.log("--------- After mounting ---------")  
            },
            beforeUpdate:function(){
                console.log("--------- Before updating ---------")
            },
            Updated:function(){
                console.log("--------- After the update ---------")
            },
            beforeDestory:function(){
                console.log("--------- Before destruction ---------")  
            },
            destoryed:function(){
                console.log("--------- After destruction ---------")

                console.log(this.el)

                console.log(this.str)

                consolr.log(this.fun)

            }    

        })