自定义指令
自己定义的指令，可以封装一些dom操作，扩展额外功能
例如需求：当页面加载时，让元素将获得焦点（autofucus在safari浏览器有兼容性）
操作dom：dom元素.focus() 太麻烦！！
mounted(){this.$refs.inp.focus()
}全局注册-语法（在main.js文件中注册 ）
Vue.directive('指令名',{"inserted"(el){//可以对el标签，扩展额外功能el.focus()}
})局部注册-语法（在当前文件下注册，也只能在当前页面下使用）
directive:{"指令名":{inserted(){//可以对el标签，扩展额外功能el.focus()}}
}使用：
<input v-指令名 type="text">指令的值
需求：实现一个color指令-传入不同的颜色，给标签设置文字颜色
语法：v-指令名="指令值"，在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值
<div v-color="color">我的内容</div>通过binding.value可以拿到指令值
通过update钩子，可以监听指令值的变化，进行dom更新操作
directives:{color:{//1.inserted提供的是元素被添加到页面中时的逻辑inserted(el,binding){el.style.color=binding.value},//2.update指令的值被修改的时候触发，提供值变化后，dom更新的逻辑update(el,binding){el.style.color=binding.value}}
}v-loading指令封装
场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态->用户体验不好
需求：封装一个v-loading指令，实现加载中的效果
分析：
1.本质loading效果就是一个蒙层，盖在了盒子上
2.数据请求中，开启loading状态，添加蒙层
3.数据请求完毕，关闭loading状态，移除蒙层
实现：
1.准备一个loading类，通过伪元素（:before,:after）定位，设置宽高，实现蒙层
<style>
.loading:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%; background:#fff url('./loading.gif') no-repeat center;
}
</style>2.开启关闭loading状态（添加移除蒙层），本质只需要添加移除类即可
在盒子的class上添加或移除loading类
3.结合自定义指令的语法进行v-loading封装复用
<div v-loading="isLoading"></div>data(){return{isLoading:true}
},
directives:{loading:{inserted(el,binding){binding.value?el.classList.add('loading'):el.classList.remove('loading')},update(el,binding){binding.value?el.classList.add('loading'):el.classList.remove('loading')}}
}
使用axios请求数据，需要先安装axios=>yarn add axios，然后import axios from 'axios'
