keep-alive包裹动态组件、v-focus、自定义指令钩子函数（参数、案例）（五）

keep-alive：动态组件

用keep-alive标签包裹动态组件的时候，会缓存不活动的组件实例，就不会去执行beforeDestroy钩子函数，name动态组件就不会被销毁，
当用keep-alive包裹动态组件的时候，他也提供两个钩子函数：activated和deactivated（这两个函数只有在被keep-包裹的时候才会触发）
activated放的是一些初始化事件，而deactived是将初始化的一些事件除去(可以将created和beforeDestroy对应的替换掉)
include只有名称匹配的组件会被缓存，exclude只有名称匹配的组件不会被缓存，与include相反，默认缓存所有动态组件

<div id="app">
        <button @click="type=type=='mya'?'myb':'mya'">切换</button>
        <keep-alive include="mya">
            <component :is="type"></component>
        </keep-alive>
    </div>

<script>
    Vue.component("mya",{
        template:"<h3>A组件</h3>",
        created(){          //created钩子函数只执行一次
            console.log("created...A")
        },
        beforeDestroy(){
            console.log("beforeDestroy...A")
        },
        activated(){
            console.log("activated...A")
        },
        deactivated(){
            console.log("deactivated...A")
        }
    })
    Vue.component("myb",{
        template:"<h3>B组件</h3>",
        created(){
            console.log("created...B")
        },
        beforeDestroy(){
            console.log("deforeDestroy...B")
        },
        activated(){
            console.log("activated...B")
        },
        deactivated(){
            console.log("deactivated...B")
        }
    })
    new Vue({
        el:"#app",
        data:{
            type:"mya"
        }
    })
</script>

v-focus：

案例：

<div id="app">
    {{msg}}
    <p v-text="msg"></p>
    <p v-html="msg"></p>
    <input type="text" v-focuser>
</div>
<script>
    // 操作底层dom元素，例如初始化的时候让输入框获取焦点  
    // 内置指令 v-if、v-else、v-show、v-for、v-once、v-model、v-on、v-bind、v-text(相当于{{}})、v-html(可以解析标签)
    // 全局指令：
    Vue.directive("focuser",{
        inserted(el){
            el.focus()       //自动获取焦点 
        }
    })

    //局部指令：
    new Vue({
        el:"#app",
        data:{
            msg:"<h2>Gordon</h2>"
        },
        // directives:{
        //     focuser:{
        //         inserted(el){
        //         el.focus()      
        //         }
        //     }
        // }
    })
</script>

自定义指令钩子函数

1、案例：
bind 只调用一次，指令第一次绑定元素时调用（一般这里可以进行一次初始化设置）
inserted 绑定的元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
update 所在组件更新时调用
componentUpdated 所在组件VNode及其子vnode全部更新后调用
unbind 只调用一次，指令与元素解绑时调用

此案例中：
页面加载时：bind、inserted
更新组件时：update、componentUpdated
卸载组件时：unbind
重新安装组件：bind、inserted

<script src="./base/vue.js"></script>
<div id="app">
    <my-comp v-if="msg" :msger="msg"></my-comp>
    <button @click="update">更新</button>
    <button @click="uninstall">卸载</button>
    <button @click="install">安装</button>
</div>
<script>
    //创建自定义指令：    
    Vue.directive("hello",{
        bind(el){
            console.log("bind")
        },
        inserted(el){
            console.log("inserted")
        },
        update(el){
            console.log("update")
        },
        componentUpdated(el){
            console.log("componentUpdated")
        },
        unbind(el){
            console.log("unbind")
        }
    })
    new Vue({
        el:"#app",
        data:{
            msg:"gordon"
        },
        components:{
            myComp:{
                template:"<h3 v-hello>{{msger}}</h3>",
                props:{
                    msger:String
                }
            }
        },
        methods:{
            update(){
                this.msg="hi"
            },
            uninstall(){
                this.msg=""
            },
            install(){
                this.msg="gordon"
            }
        }
    })
</script>

2、自定义指令钩子函数的参数
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

案例：

<script src="./base/vue.js"></script>
<div id="app">
    <p v-mode="msg"></p>
</div>
<script>
    Vue.directive("mode",{
        bind(el,binding,vnode){
            console.log(binding)
            var s = JSON.stringify
            el.innerHTML=
            "name:" + s(binding.name) + "<br>" +
            "value:" + s(binding.value) + "<br>" +
            "expression:" + s(binding.expression) + "<br>" 
        }
    })
    new Vue({
        el:"#app",
        data:{
            msg:"hello"
        }
    })
</script>

3、自定义钩子函数案例

<script src="./base/vue.js"></script>
<div id="app">
    <div v-color="orange">orange</div>
    <div v-color="pink">pink</div>
    <div v-color="bl">blue</div>
    {{bl}}
   <button @click="bl='skyblue'">换颜色</button>
</div>
<script>
    //第一种方法
    // Vue.directive("color",{
    //     bind(el,binding){        //注意了，bind只初始化调用一次
    //         el.style.background = binding.value
    //     },
    //     update(el,binding){
    //         el.style.background = binding.value
    //     }
    // })
    
    //简单方法：bind 和 update 时触发相同行为
    Vue.directive("color",function(el,binding){
        el.style.background = binding.value
    })
    new Vue({
        el:"#app",
        data:{
            orange:"orange",
            pink:"pink",
            bl:"blue"
        }
    })
</script>