时间戳

首页 > 技术文章 > 前端面试准备笔记系列之vue(08)

前端面试准备笔记系列之vue(08)

chenfengbiji 2021-03-03 15:24 原文

01. 什么是自定义指令

vue里面有很多内置的指令，比如v-if、v-show,这些指令基本能满足觉得大多数业务场景，但是在一些特殊功能时，我们仍需要对底层dom进行操作，这是就需要自定义指令。

02. 自定义指令的钩子函数
  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次初始化设置。
  • inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind：只调用一次，指令与元素解绑时调用。
03. vue-cli如何新增自定义指令？
  • 创建局部指令
var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})
  • 全局指令
Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})
  • 指令的使用
<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>
04. vue如何自定义一个过滤器

过滤器使用：

  • 语法：{{表达式 | 过滤器}}
<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>

自定义私有过滤器

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

自定义全局过滤器

  • 接收两个参数：过滤器ID和过滤器函数。
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

推荐阅读