自定义指令、混入、路由、生命周期

自定义指令

我们可以通过自定义指令为标签操作属性，样式，事件等内容，但是指令要求以”v-”开头

例如：

<input type="text" v-foc>

<input type="text" v-sty>

 directives:{

 foc:{//修改事件

    inserted:function(el){

         el.focus()

       }

   },

  sty:{//修改样式

     inserted:function(el){

          el.style.backgroundColor="pink"

       }

    }

 }

参数

el:获取绑定指令的元素

binding:一个对象

name:获得v-后面的指令名

value :获得属性值

exprestion:被绑定的属性关键字

arg:获得付给的变量名

modifiers:获得后缀子属性名称，返回一个对象

钩子函数

inserted 被绑定元素被插入父节点时调用

bind 指令第一次绑定到元素时调用，只调用一次

update 被绑定元素在模板更新时调用

compoentUpdated 被绑定元素在模板完成一次更新周期时调用

unbind指令与元素解绑时进行调用，只调用一次

例如：

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"

                    }

               }

           }

混入

混入类似于继承，可以实现多继承，让vue可以拿到其他对象下的属性和方法，提供代码利用率，减少代码的重复写作

例如：

var obj={

            methods:{

                fun: function(){

                    console.log("这是obj的函数")

                }

             }

        }

new Vue({

            el:"#app",

            mixins:[obj,emp],//数组下可以继承多个对象

})

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

路由

路由是用来跳转路径的，但是vue是单页面开发，所以路由没有跳转新页面，而是切换了不同组件进行显示

例如：

//创建两个页面的组件

        var login={template:'<div><h2>这是登录页面</h2><div>'}

        var res={template:'<div><h2>这是注册页面</h2><div>'}

        var routes=[//配置组件的路径

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

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

        ]

        var router=new VueRouter({routes})//创建路由对象

        new Vue({

            el:"#app",

            router//应用路由

        })

<!--router-view显示组件-->

<router-link to="/a">登录</router-link>超链接跳转

<router-link to="/b">注册</router-link>

<!--router-view显示组件-->

<router-view></router-view>

路由的属性参数

to:定义跳转路径

replace:设置导航跳转后，不被history对象记录

tag:让路由更换html标签显示

active-class:路由被激活的样式，但是必须是class属性名

event:改变路由所触发的事件，默认是点击

append:设置路由查找子文件夹路径 /a/b

例如：

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

        event="mouseover">登录</router-link>

生命周期

生命周期的过程分为：创建前，创建后，挂载前，挂载后，更新前，更新后，销毁前，销毁后

beforecreate:组件刚好被创建的时候调用，在此所有变量和函数都未初始化

created:在组件创建完成后调用，此时变量和函数都已初始化完毕

beforeMount:在组件挂载前调用，此时el可以寻找到标签元素

mounted:在组件挂载后调用，此时可以操作dom元素

beforeUpdate:在组件更新前调用，此时可以拿到新旧的虚拟dom做对比

Updated:在组件更新后调用，此时也可以操作dom，但是拿的是新的dom值

beforeDestroy:在组件销毁前调用，用来解除组件的数据，例如销毁轮播图，变量，函数等

destroyed:在组件销毁后调用，此时组件已被销毁，无法调用组件了

例如：

new Vue({

            el:"#app",

            data:{str:"hello"},

            methods:{

                fun:function(){

                    console.log("函数被执行了")

                }

            },

            beforeCreate:function(){
                console.log("---------创建前---------")
            },

            created:function(){
                console.log("---------创建后---------")
            },

            beforeMount:function(){
                console.log("---------挂载前---------")
            },
            mounted:function(){
                console.log("---------挂载后---------")  
            },
            beforeUpdate:function(){
                console.log("---------更新前---------")
            },
            Updated:function(){
                console.log("---------更新后---------")
            },
            beforeDestory:function(){
                console.log("---------销毁前---------")  
            },
            destoryed:function(){
                console.log("---------销毁后---------")

                console.log(this.el)

                console.log(this.str)

                consolr.log(this.fun)

            }    

        })