Vue自定义指令、过滤器、混入的介绍和案例

最新推荐文章于 2022-11-10 20:59:50 发布

kekechen丶

最新推荐文章于 2022-11-10 20:59:50 发布

阅读量324

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_63851202/article/details/122421167

版权

自定义指令

官方指令在不够用的情况下，考虑自定义指令，自定义指令用来操作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);
           }
       }
   });