VueDay04(自定义指令、自定义组件、生命周期函数(钩子函数)）

自定义指令

局部指令语法:

<div v-changeColor></div>//v-自定义指令名;
<script>
    new Vue({
 el:'',
 data:{},
 derectives:{
 changeColor:{
    inserted(tar,n2){
    	//tar是指令标签
    	tar.style.color = 'red';
    }
 }
 }
})
</script>

全局指令语法:

Vue.drective('指令名',{
inserted(tar,n2){
 
}
})
注意:如果局部指令与全局指令同名优先使用局部指令;

示例:

<div id="pink">
        <div v-link='src'>点击转到</div>//传参方式一
        <div v-link='`https://blog.youkuaiyun.com/Lonely_Game/article/details/120756713?spm=1001.2014.3001.5501`'>点击转到</div>//传参方式二
    </div>
    <script>
        new Vue({
            el: '#pink',
            data: {
                src: 'https://blog.youkuaiyun.com/Lonely_Game/article/details/120756713?spm=1001.2014.3001.5501'
            },
            directives: {
                link: {
                    inserted(tar, n2, n3) {
                        tar.onclick = function () {
                            location.href = n2.value;
                        }
                    }
                }
            }
        })
    </script>

生命周期函数（钩子函数）

每一个组件都有自己的生命周期函数
生命周期主要是为了在项目开发时写出更好地逻辑代码，这样的设计能便于后期的维护以及bug的调试;
Vue.js八大钩子函数
1.beforeCreated(){};实例化之前调用: 这个阶段数据还没有劫持，不能用this.属性名去拿数据。通常用于数据预加载; 
2.created(){};实例化完毕后调用:从这个阶段开始就可以用this修改值，也可以发起请求.（如果想要数据一次性加载到页面上而不先显示文档树结构的话）
3.beforeMount(){};在虚拟DOM挂载数据之前:不能操作DOM;
4.mounted(){};虚拟DOM挂载之后:在这个函数里发起请求，页面会先显示文档树的结构，再显示数据(常用);
5.beforeUpdate(){};在数据更新之前: 第一次渲染数据不会调用 数据更新之后，页面刷新之前(不要做数据请求)
6.updated(){}; 数据更新之后 :第一次渲染数据也不会调用(不要做数据请求)
7.beforeDestroy(){};在组件摧毁之前调用 :可以向服务器发送一些用户行为并记录;
8.destroyed(){}; 组件摧毁后调用: 不能用this去访问data中的数据，在这个阶段可以清理垃圾计时器、断开网络请求 实例化摧毁后请求还没有完成情况时去断开请求

示例:

 <div id="box">
        <h1>{{msg}}</h1>
        <button @click='change'>改变</button>
    </div>
    <script>
        // 生命周期函数(钩子函数)
        new Vue({
            el: '#box',
            data: {
                msg: '你好'
            },
            methods: {
                change() {
                    this.msg = '再见'
                }
            },
            beforeCreate() {
                // 实例化之前调用
                console.log('我是实例化之前调用的');
            },
            created() {
                //实例化完毕调用
                console.log('我是实例化之后调用的');
            },
            beforeMount() {
                //虚拟DOM树挂载到文档树之前
                console.log('虚拟DOM挂载之前调用的');
            },
            mounted() {
                //虚拟DOM树挂载到文档树之后
                console.log('虚拟DOM挂载之后调用的');
            },
            beforeUpdate() {
                //页面数据更新之前
                console.log('数据更新后，页面刷新前');
            },
            updated() {
                console.log('页面数据更新后');
                //更新了数据后
            },
            beforeDestroy() {
                //实例化对象销毁之前
                console.log('实例化对象销毁之前');
            },
            destroyed() {
                //实例化对象销毁后
                console.log('实例化对象销毁后');
            },
        })
    </script>
我是实例化之前调用的
我是实例化之后调用的
虚拟DOM挂载之前调用的
虚拟DOM挂载之后调用的

哪些钩子函数能做数据请求;

理论上每个钩子函数都能发送请求，但是在beforeUpdate以及updated中发起请求就不太合理，因为一般请求回来的数据会修改data值，但是已修改data值就会调用上面两个声明函数，就会陷入死循环;

组件

描述:一个页面中的每一个部分都可以称为组件，组件组成一个页面，局部组件与全局组件同名时优先执行局部组件但是全局组件也会执行在局部组件后;

局部组件

语法:
<div id="box">
<mycomponent></mycomponent>
</div>
<script>
new Vue({
    el:'#box',
    components:{
        'mycomponent':{
            //组建中的data是一个函数;
            data(){
                return {
                    msg:'你好'
                }
            }
            //组件中有 除了实例化对象中el的所有属性 如:(生命周期函数、methods、filters、computed等)
            //以及其他属性 如(template) 用法：template中的标签会替换到组件位置;
            template:`<div>{{msg}}</div>`
        }
    }
})
</script>

全局组件

<div id='box'>
</div>
<script>
new Vue({
    el:'#box',
})
 Vue.component('组件名',{
     template:'<div></div>'
     //生命周期函数，methods等
 })
</script>

全局过滤器

<div id='box'>
</div>
<script>
new Vue({
    el:'#box',
})
 Vue.filter('过滤器函数名',(data)=>{
     return data+'全局过滤器'
 })
</script>
//全局过滤器与局部过滤器同步时，优先局部过滤器