自定义指令
官方指令在不够用的情况下，考虑自定义指令，自定义指令用来操作dom
全局定义
Vue.directive("指令名",{
????????bind:function(el,binding){
????????},
????????inserted:function(el,binding){
????????},
????????update:function(el,binding){
????????}
})
钩子函数
- bind: 当指令首次绑定在dom元素上时使用，此时dom还未渲染
- inserted：当dom元素已经渲染到页面上时调用
- updated：当m层数据发生变化时，v层也会跟着变化
钩子函数的参数
- el:绑定指令的dom元素
- binding：是个对象，包含了指令的所有相关信息，指令名、修饰符、所绑定的属性、赋的值（binding.arg代表绑定的属性? ? binding.value代表绑定属性的值）
v-bind:属性="变量"? 实现动态绑定的原理
?? ?<div id="box">
?? ??? ??? ?<img v-mybind:src="img" />
?? ??? ?</div>
Vue.directive("mybind", {
?? ??? ?bind(el, binding) {
?? ??? ??? ?el[binding.arg] = binding.value
?? ??? ?},
?? ??? ?updated(el, binding) {
?? ??? ??? ?el[binding.arg] = binding.value
?? ??? ?}
?? ?})
?? ?let vm = new Vue({
?? ??? ?el: "div",
?? ??? ?data: {
?? ??? ??? ?img: "12312.jpg"
?? ??? ?}
?? ?})
简写如下（相当于bind+updated）
????Vue.directive("mybind", function(el, binding) {
?? ??? ?el[binding.arg] = binding.value
?? ?})
?? ?let vm = new Vue({
?? ??? ?el: "div",
?? ??? ?data: {
? ?????????img: "12312.jpg"
????????}
?? ?})
点击回到顶部案例
?<div id="box">
?? ??? ??? ?<div v-top style="position:fixed;bottom:10px;right:10px;width: 100px;height: 100px;background-color:red;">
?? ??? ??? ??? ?回到顶部
?? ??? ??? ?</div>
</div>
Vue.directive("top", {
?? ??? ?inserted(el) {
?? ??? ??? ?el.onclick = function() {
?? ??? ??? ??? ?document.body.scrollTop = document.documentElement.scrollTop = 0
?? ??? ??? ?}
?? ??? ?}
?? ?});
?? ?let vm = new Vue({
?? ??? ?el: "#box",
?? ??? ?data: {}
?? ?});
局部定义（只能在该vue对象中使用）?
<div id="box">
?? ??? ??? ?<img v-mybind:src="img" />
?</div>
let vm = new Vue({
?? ??? ?el: "#box",
?? ??? ?data: {
?? ??? ??? ?img: "imgsda.jpg"
?? ??? ?},
?? ??? ?directives: {
?? ??? ??? ?"mybind": function(el, binding) {
?? ??? ??? ??? ?el[binding.arg] = binding.value;
?? ??? ??? ?}
?? ??? ?}
?? ?})
过滤器
对数据在模板中的表现进行过滤，用于格式的转换，如0/1转换为失败/成功
全局定义
Vue.filter("过滤器名",function(变量，参数，....){
? ? ? ? return 转换的结果
})
使用（在模板上使用）
{{变量 | 过滤器名(参数,....)}}
全局定义案例?
?<div id="box">
?? ??? ??? ?<p>是否成年：{{isAdult | convert(2)}}</p>
? ?</div>
Vue.filter("convert", function(value, a) {
?? ??? ?return value ? "已成年" : "未成年"
?? ?});
?? ?let vm = new Vue({
?? ??? ?el: "div",
?? ??? ?data: {
?? ??? ??? ?isAdult: true
?? ??? ?}
?? ?})
局部定义案例
?<div id="box">
?? ??? ??? ?<p>是否成年：{{a| convert}}</p>
?? ??? </div>
let vm = new Vue({
?? ??? ?el: "#box",
?? ??? ?data: {
?? ??? ??? ?a: false
?? ??? ?},
?? ??? ?filters: {
?? ??? ??? ?convert(val) {
?? ??? ??? ??? ?return val ? "成年" : "未成年"
?? ??? ??? ?}
?? ??? ?}
?? ?})
理解：将a变量的值传递给过滤器,过滤器用第一个形参val接收此值，并经过过滤转换，返回结果
混入
意义在于提高复用性，将一些相同的逻辑函数进行封装，如数组去重，排序等，混入对象就是一个json对象，属性就是vue对象的配置项，但没有el
定义格式
let mixin1={
? ? ? ? data:{},
? ? ? ? methods:{}
}
let mixin2={
? ? ? ? data:{},
? ? ? ? methods:{}
}
局部混入
let vm=new Vue({
el:"",
mixins:[mixin1,mixin2],
data:{}
})
全局混入（不推荐使用）
?Vue.mixin(mixin1)
案例
?<div id="box">
? ? ? ? <p>msg:{{msg}}</p>
? ? ? ? <input type="button" value="测试" @click="fn02">?
? ? </div>
let m1 = {
?? ??? ?data: {
?? ??? ??? ?msg: "hello"
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?m1fn() {
?? ??? ??? ??? ?console.log("m1fn");
?? ??? ??? ?}
?? ??? ?}
?? ?}
?? ?let vm = new Vue({
?? ??? ?el: "#box",
?? ??? ?mixins: [m1],
?? ??? ?data: {},
?? ??? ?methods: {
?? ??? ??? ?fn02() {
?? ??? ??? ??? ?this.m1fn();
?? ??? ??? ??? ?console.log(this.msg);
?? ??? ??? ?}
?? ??? ?}
?? ?});
面试问题：自定义指令、过滤器、混入的使用场景
- 自定义指令：主要用来完成dom操作，并用在模板上
- 过滤器：主要完成数据格式的转换，不做逻辑运算，如日期的转换，true和false转换成对应的结果
- 混入：主要完成功能，将一些相同的逻辑函数进行封装，提高代码复用性，如排序，数组去重
?
|