精华内容
下载资源
问答
  • vue自定义全局指令
    2021-07-03 09:30:08

    自定义指令

    内置指令不能满足或者不方便操作时,vue也允许注册自定义指令, 对普通DOM进行底层操作时, 会使用到自定义指令绑定到元素上执行相关操作

    自定义指令分为 全局指令 和 局部指令 , 同时存在时以局部指令为准(局部优先级高)

    自定义指令常用的钩子函数: — tip: 自定义指令中不能直接操作vue中的数据和方法,也就是自定义指令中的this不是vue对象

    • bind — 第一次绑定到元素时调用
    • update — 数据更新时调用(指令绑定元素更新时调用,可能在其子元素更新前调用)
    • inserted — 被绑定元素插入父节点时调用(想操作绑定的元素,节点操作一般要找到其父级元素,再通过父级元素找到并操作它)
    • componentUpdated — 数据更新时调用(指令绑定元素与其子元素全部更新才调用)
    • unbind — 只调用一次, 指令与元素解绑时调用(可使用v-if测试,值为false时元素被删除,被调用)

    自定义全局指令格式: (一般用全局格式)

    Vue.directive(‘指令名’, {
    bind(el) { },
    update(el){ }
    });

    tip: 简写: 同时且只使用bind和update这两个钩子函数时,可以简写:
    Vue.directive(‘指令名’, (el,bindings)=>{
    // 直接写函数方法
    // el是当前绑定元素,bindings是额外的传的参数
    })

    计算属性 - computed

    当数据源内的数据需要进行运算时, 在程序中多处使用这个计算结果, 正常会每次使用都会进行运算, 性能不够好,
    所以vue提供了计算属性,在computed属性呃逆定义的方法,只要数据源不改变,就只有第一次调用时会运算,然后缓存起来,后面再调用就读缓存
    只有数据源改变, 才会重新运算, 性能提升

    定义方法格式( 标准写法 — 简写 )

    标准写法
    computed:{
    csum:{
    get() { return this.n1 + this.n2 },
    set(v) { this.n1 = v; this.n1 = v; return this.n1 + this.n2 } // v是通过修改csum传来的参数, 可接收后操作
    // vm.csum = 10; 以这种形式修改
    }
    }

    简写
    conputed:{
    cusm() {
    // 直接写方法
    return this.n1 + this.n2
    }
    }

    侦听器 - watch

    使用watch来侦听data中数据的变化, watch中的属性一定是data中已经存在的数据,

    当需要监听一个对象的改变时,普通的监听无法监听到对象内部属性的改变,只能监听到data内的数据变化,

    此时就需要 deep属性 对对象进行深度监听

    书写格式
    // data内已存在username:‘aaa’
    watch: {
    username( newVal, oldVal ) { // newVal就是改变后的值, 可以获取后直接操作 }
    }

    // 深度监听 — 监听对象内数据 — 元素内v-model=“obj.username”
    // data内已存在obj: { username:‘aaa’ }
    watch: {
    obj: {
    deep: true,
    watch: {
    handler( newVal, oldVal ){ // 操作 }
    }
    }
    }

    过滤器 - filter

    数据渲染之前可以对数据进行进一步处理

    小胡子语法 {{ title | mySubstring(5) }} — title是定义在data内

    Vue.filter( ‘mySubstring’, (value, len)=>{
    return value.substr(0, len) // 字符串截取方法
    })

    // 第一个形参value接收的永远是 | 之前的参数, 方法()内传的参数在筛选器内第二个参数开始

    更多相关内容
  • vue自定义全局指令

    千次阅读 2021-08-03 14:29:20
    先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。 批量注册指令,新建 directives/index.js 文件 import copyfrom './copy' import ...

    指令

    Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。

    批量注册指令,新建 directives/index.js 文件

    import copyfrom './copy'
    import longpressfrom './longpress'
    // 自定义指令
    const directives = {
      copy,
      longpress,
    }
     
    exportdefault {
      install(Vue) {
        Object.keys(directives).forEach((key) => {
          Vue.directive(key, directives[key])
        })
      },
    }
    

    在 main.js 引入并调用

    import Vuefrom 'vue'
    import Directivesfrom './JS/directives'
    Vue.use(Directives)
    

    指令定义函数提供了几个钩子函数(可选):

    bind: 只调用一次,指令第一次绑定到元素时调用,可以定义一个在绑定时执行一次的初始化动作。
    inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
    update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值。
    componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
    unbind: 只调用一次, 指令与元素解绑时调用。

    v-LazyLoad 图片懒加载

    背景:在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度,造成不良的用户体验,所以进行图片懒加载优化势在必行。

    需求:实现一个图片懒加载指令,只加载浏览器可见区域的图片。

    思路:

    图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的
    拿到所有的图片 Dom ,遍历每个图片判断当前图片是否到了可视区范围内
    如果到了就设置图片的 src 属性,否则显示默认图片
    图片懒加载有两种方式可以实现,一是绑定 srcoll 事件进行监听,二是使用 IntersectionObserver 判断图片是否到了可视区域,但是有浏览器兼容性问题。

    下面封装一个懒加载指令兼容两种方法,判断浏览器是否支持 IntersectionObserver API,如果支持就使用 IntersectionObserver 实现懒加载,否则则使用 srcoll 事件监听 + 节流的方法实现。

    const LazyLoad = {
      // install方法
      install(Vue, options) {
        const defaultSrc = options.default
        Vue.directive('lazy', {
          bind(el, binding) {
            LazyLoad.init(el, binding.value, defaultSrc)
          },
          inserted(el) {
            if (IntersectionObserver) {
              LazyLoad.observe(el)
            }else {
              LazyLoad.listenerScroll(el)
            }
          },
        })
      },
      // 初始化
      init(el, val, def) {
        el.setAttribute('data-src', val)
        el.setAttribute('src', def)
      },
      // 利用IntersectionObserver监听el
      observe(el) {
        var io =new IntersectionObserver((entries) => {
          const realSrc = el.dataset.src
          if (entries[0].isIntersecting) {
            if (realSrc) {
              el.src = realSrc
              el.removeAttribute('data-src')
            }
          }
        })
        io.observe(el)
      },
      // 监听scroll事件
      listenerScroll(el) {
        const handler = LazyLoad.throttle(LazyLoad.load, 300)
        LazyLoad.load(el)
        window.addEventListener('scroll', () => {
          handler(el)
        })
      },
      // 加载真实图片
      load(el) {
        const windowHeight = document.documentElement.clientHeight
        const elTop = el.getBoundingClientRect().top
        const elBtm = el.getBoundingClientRect().bottom
        const realSrc = el.dataset.src
        if (elTop - windowHeight < 0 && elBtm > 0) {
          if (realSrc) {
            el.src = realSrc
            el.removeAttribute('data-src')
          }
        }
      },
      // 节流
      throttle(fn, delay) {
        let timer
        let prevTime
        return function (...args) {
          const currTime = Date.now()
          const context =this
          if (!prevTime) prevTime = currTime
          clearTimeout(timer)
     
          if (currTime - prevTime > delay) {
            prevTime = currTime
            fn.apply(context, args)
            clearTimeout(timer)
            return
          }
     
          timer = setTimeout(function () {
            prevTime = Date.now()
            timer =null
            fn.apply(context, args)
          }, delay)
        }
      },
    }
     
    

    exportdefault LazyLoad


    使用,将组件内 标签的 src 换成 v-LazyLoad

     

    v-permission 权限验证

    背景:在一些后台管理系统,我们可能需要根据用户角色进行一些操作权限的判断,很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余。针对这种情况,我们可以通过全局自定义指令来处理。

    需求:自定义一个权限指令,对需要权限判断的 Dom 进行显示隐藏。

    思路:

    自定义一个权限数组
    判断用户的权限是否在这个数组内,如果是则显示,否则则移除 Dom

    function checkArray(key) {
      let arr = ['1','2','3','4']
      let index = arr.indexOf(key)
      if (index > -1) {
        return true // 有权限
      }else {
        return false // 无权限
      }
    }
     
    const permission = {
      inserted: function (el, binding) {
        let permission = binding.value// 获取到 v-permission的值
        if (permission) {
          let hasPermission = checkArray(permission)
          if (!hasPermission) {
            // 没有权限 移除Dom元素
            el.parentNode && el.parentNode.removeChild(el)
          }
        }
      },
    }
    

    exportdefault permission
    使用:给 v-permission 赋值判断即可

    <divclass="btns">
      <!-- 显示 -->
      <button v-permission="'1'">权限按钮1</button>
      <!-- 不显示 -->
      <button v-permission="'10'">权限按钮2</button>
    </div>
    

    v-draggable 拖拽指令

    需求:实现一个拖拽指令,可在页面可视区域任意拖拽元素。

    思路:

    设置需要拖拽的元素为相对定位,其父元素为绝对定位。
    鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。
    鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值,并改变元素的 left 和 top 值
    鼠标松开(onmouseup)时完成一次拖拽

    const draggable = {
      inserted: function (el) {
        el.style.cursor ='move'
        el.onmousedown = function (e) {
          let disx = e.pageX - el.offsetLeft
          let disy = e.pageY - el.offsetTop
          document.onmousemove = function (e) {
            let x = e.pageX - disx
            let y = e.pageY - disy
            let maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)
            let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)
            if (x < 0) {
              x = 0
            }else if (x > maxX) {
              x = maxX
            }
     
            if (y < 0) {
              y = 0
            }else if (y > maxY) {
              y = maxY
            }
     
            el.style.left = x +'px'
            el.style.top = y +'px'
          }
          document.onmouseup = function () {
            document.onmousemove = document.onmouseup =null
          }
        }
      },
      exportdefault draggable<br><br>
    }
    
    <template> <div class="el-dialog" v-draggable></div> </template>
    
    展开全文
  • 自定义指令总结: 一、定义语法: (1).局部指令: new Vue({ directives:{指令名:配置对象} }) 或 new Vue({ directives{指令名:回调函数} }) new Vue({ el:'#root',...

    自定义指令总结:

    一、定义语法:

    (1).局部指令:

    new Vue({														
    	directives:{指令名:配置对象}  
    }) 					
    

    new Vue({														
    	directives{指令名:回调函数}
    }) 					
    
    new Vue({
    	el:'#root',
    	data:{
    		name:'尚硅谷',
    		n:1
    	},
    	directives:{
    		//big函数何时会被调用?1.指令与元素成功绑定时(一上来)。2.指令所在的模板被重新解析时。
    		/* 'big-number'(element,binding){
    			// console.log('big')
    			element.innerText = binding.value * 10
    		}, */
    		big(element,binding){
    			console.log('big',this) //注意此处的this是window
    			// console.log('big')
    			element.innerText = binding.value * 10
    		},
    		fbind:{
    			//指令与元素成功绑定时(一上来)
    			bind(element,binding){
    				element.value = binding.value
    			},
    			//指令所在元素被插入页面时
    			inserted(element,binding){
    				element.focus()
    			},
    			//指令所在的模板被重新解析时
    			update(element,binding){
    				// element.value = binding.value
    			}
    		}
    	}
    })
    

    (2).全局指令:

    Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

    //定义全局指令
    Vue.directive('fbind',{
    	//指令与元素成功绑定时(一上来)
    	bind(element,binding){
    		element.value = binding.value
    	},
    	
    	//指令所在元素被插入页面时
    	inserted(element,binding){
    		element.focus()
    	},
    	
    	//指令所在的模板被重新解析时
    	update(element,binding){
    		element.value = binding.value
    	}
    }) 
    

    二、配置对象中常用的3个回调?生命周期:

    (1).bind:指令与元素成功绑定时调用。
    (2).inserted:指令所在元素被插入页面时调用。
    (3).update:指令所在模板结构被重新解析时调用。
    

    三、备注:

    1.指令定义时不加v-,但使用时要加v-;
    2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。

    <div id="root">
    	<h2>{{name}}</h2>
    	<h2>当前的n值是:<span v-text="n"></span> </h2>
    	<!-- <h2>放大10倍后的n值是:<span v-big-number="n"></span> </h2> -->
    	<h2>放大10倍后的n值是:<span v-big="n"></span> </h2>
    	<button @click="n++">点我n+1</button>
    	<hr/>
    	<input type="text" v-fbind:value="n">
    </div>
    

    在这里插入图片描述

    展开全文
  • Vue.directive 注册全局指令 <!-- 使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。 --> <input type="text" v-focus> <script> // 注意点:...

    自定义指令

    • 内置指令不能满足我们特殊的需求
    • Vue允许我们自定义指令

    Vue.directive 注册全局指令

    <!-- 
      使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。 
    -->
    <input type="text" v-focus>
    <script>
    // 注意点: 
    //   1、 在自定义指令中  如果以驼峰命名的方式定义 如  Vue.directive('focusA',function(){}) 
    //   2、 在HTML中使用的时候 只能通过 v-focus-a 来使用 
        
    // 注册一个全局自定义指令 v-focus
    Vue.directive('focus', {
      	// 当绑定元素插入到 DOM 中。 其中 el为dom元素
      	inserted: function (el) {
        		// 聚焦元素
        		el.focus();
     	}
    });
    new Vue({
      el:'#app'
    });
    </script>
    

    Vue.directive 注册全局指令 带参数

      <input type="text" v-color='msg'>
     <script type="text/javascript">
        /*
          自定义指令-带参数
          bind - 只调用一次,在指令第一次绑定到元素上时候调用
    
        */
        Vue.directive('color', {
          // bind声明周期, 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
          // el 为当前自定义指令的DOM元素  
          // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
          bind: function(el, binding){
            // 根据指令的参数设置背景色
            // console.log(binding.value.color)
            el.style.backgroundColor = binding.value.color;
          }
        });
        var vm = new Vue({
          el: '#app',
          data: {
            msg: {
              color: 'blue'
            }
          }
        });
      </script>
    

    自定义指令局部指令

    • 局部指令,需要定义在 directives 的选项 用法和全局用法一样
    • 局部指令只能在当前组件里面使用
    • 当全局指令和局部指令同名时以局部指令为准
    <input type="text" v-color='msg'>
     <input type="text" v-focus>
     <script type="text/javascript">
        /*
          自定义指令-局部指令
        */
        var vm = new Vue({
          el: '#app',
          data: {
            msg: {
              color: 'red'
            }
          },
       	  //局部指令,需要定义在  directives 的选项
          directives: {
            color: {
              bind: function(el, binding){
                el.style.backgroundColor = binding.value.color;
              }
            },
            focus: {
              inserted: function(el) {
                el.focus();
              }
            }
          }
        });
      </script>
    
    展开全文
  • 除了核心功能默认内置的指令 (v-model和v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM ...// 注册一个全局自定义指令 `v-focus...
  • vue自定义全局指令和vue自定义非全局指令
  • vue全局自定义指令

    2022-08-17 10:46:15
    通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。新建src/directives/LimitNumber.js文件。批量注册指令,新建 directives/index.js 文件。二、全局批量注册自定义...
  • 自定义指令需要在directives节点下创建私有自定义指令,创建好的指令通过v-指令名放到元素中 <template> <div id="App"> <p v-color>这个文字编程红色</p> </div> </template&...
  • // 全局自定义拖拽组件 export default (Vue) => { Vue.directive('drag', { //1.指令绑定到元素上回立刻执行bind函数,只执行一次 //2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js...
  • 学习vue如何自定义全局指令 一.全局之定义指令 1.用法 1.在new Vue之前调用Vue.directive('指令名',{ inserted(el){ } } ),指令名不要加v- 2.instered(el){ 自定义指令的具体功能 },使用该指令dom元素被...
  • 1、编写监控屏幕大小改变的指令 // 监听屏幕宽度改变 export const resize = { // 初始化绑定指令 inserted (el, binding) { // 指令的绑定值,是一个function函数 const callback = binding.value; // 获取...
  • Document 自定义选中焦点
  • 1.首先在src目录下建立一个指令文件夹及文件 2.进入drag.js,复制下面代码 export const drag = { inserted(el) { let oDiv = el // 左边距最大值 let maxLeft = el.parentNode.clientWidth - el....
  • 今天小编就为大家分享一篇对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue初学者,可能会遇到的问题。 报错信息为Failed to resolve directive:所定义的指令
  • vue自定义指令 Directive

    2022-02-14 20:09:28
    自定义指令分为全局自定义指令和局部的自定义指令 全局自定义指令 是通过Vue.directive(‘第一个参数是指令的名称’,{第二个参数是一个对象,这个对象上有钩子函数}) 下边举例说明: Vue.directive('focus', { // ...
  • 超实用的全局Vue自定义指令

    千次阅读 2020-12-17 10:29:43
    Vue 自定义指令 ...先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。 批量注册的方法 新建 directives/index.js 文件 import cop
  • 主要给大家介绍了关于vue自定义指令限制输入框输入值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 在main.js中全局注册自定义指令 Vue.directive('myfocus', { inserted: (el, binding) => { if (binding.value == true || binding.value == undefined) { el.focus() } } }); 使用自定义的自动获取焦点...
  • 1.vue2中自定义全局指令 ① 定义 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) ② 使用 <...
  • Vue自定义指令

    千次阅读 2022-03-12 09:20:56
    先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用新的改变 在src目录下新建directives/index.js文件import waterMarker from './...
  • // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 如果想注册局部指令,组件中也接受一个...
  • vue3.2setup语法糖自定义全局指令,局部指令+实战小demo+防抖优化

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,935
精华内容 7,974
关键字:

vue自定义全局指令