精华内容
下载资源
问答
  • Vue自定义指令写法

    千次阅读 2018-06-01 11:05:58
    原文作者: Sarah Drasner原文链接: The Power of Custom Directives in Vue当你最初学习JavaScript框架的时候, 有点像一个小孩在一个糖果商店里面. 你接受一切对于你来说可用的东西, 它会让我们的开发变得更简单. ...
    原文作者: 
    Sarah Drasner
    
    原文链接:  The Power of Custom Directives in Vue

    当你最初学习JavaScript框架的时候, 有点像一个小孩在一个糖果商店里面. 你接受一切对于你来说可用的东西, 它会让我们的开发变得更简单. 尽管如此, 我们都有一个经验: 框架不是万能的, 不可能全面覆盖各种各样的情况.

    令人兴奋的是, Vue的功能令人难以置信的丰富. 尽管有可能有些特殊情况没有被Vue框架本身所覆盖, 但是你可以非常快速轻松的创建自定义指令.

    什么是指令?

    我曾经在我的Vue.js入门里面写过一篇关于指令的文章, 现在不妨让我们回顾一下:

    指令只一种可以附加到DOM元素的微命令(tiny commands). 它们通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来控制一些行为, 它们通常很有用.

    如果你正在使用Vue(或者Angular), 你可能已经很熟悉其中的一些指令, 如: v-if, v-else等等. 我们将从了解一些基础开始, 但是如果你更愿意直接看例子, 请直接往下滚动. 这些例子也能很好的让你理解这些概念.

    以下是一些指令的使用方法, 以及对应的例子片段. 这些例子不是规定性的, 它们只是一些用例. 这里的"例子"实际上是"指令".

    v-example: 这将实例化一个指令, 但不接受任何参数. 虽然不带参数的指令, 在使用的过程中并不是很灵活, 但是你仍然可以通过这种类型的指令对DOM元素做一些操作.

    v-example="value": 这将传递一个值给指令, 并且该指令根据该值计算出要做的操作.

    <div v-if="stateExample">I will show up if stateExample is true</div>
    

    v-example="'string'": 这将让你把'string'作为一个表达式.

    <p v-html="'<strong>this is an example of a string in some text</strong>'"></p>
    

    v-example:arg="value": 这允许我们传入一个参数给指令. 下面的例子中, 我们绑定到一个类, 将其样式化为一个对象, 单独存储.

    <div v-bind:class="someClassObject"></div>
    

    v-example:arg.modifier="value": 这允许我们使用修饰语. 下面的例子中, 允许我们在点击事件时, 调用preventDefault().

    <button v-on:submit.prevent="onSubmit"></button>
    

    领悟自定义指令

    既然我们已经大致过了一遍所有的我们所用过的指令类型方法, 让我们想一想我们如何通过自己编写的自定义指令来实现它们? 使用自定义指令的一个很好的例子是滚动事件, 让我们看看如何实现它.

    首先, 最基本的是如何创建一个全局的指令. (是的, 它什么也不做.) 仅仅是创建了一个指令.

    Vue.directive('tack');
    

    HTML:

    <p v-tack>This element has a directive on it</p>
    

    我们有几个可用的钩子, 每个钩子可以选择一些参数. 钩子如下:

    • bind: 一旦指令附加到元素时触发
    • inserted: 一旦元素被添加到父元素时触发
    • update: 每当元素本身更新(但是子元素还未更新)时触发
    • componentUpdate: 每单组件和子组件被更新时触发
    • unbind: 一旦指令被移除时触发

    就个人而言,  bind update 也许是这五个里面最有用的两个钩子了.

    每个钩子都有elbinding, 和vnode参数可用. updatecomponentUpdated钩子还暴露了oldVnode, 以区分传递的旧值和较新的值.

    el, 跟你所期待的一样, 就是所绑定的元素. binding是一个保护传入钩子的参数的对象. 有很多可用的参数, 包括namevalueoldValueexpressionargumentsarg及修饰语. vnode有一个更不寻常的用例, 它可用于你需要直接引用到虚拟DOM中的节点. binding和vnode都应该被视为只读.


    绑定一个自定义指令

    既然我们已经知道了这一点, 就可以开始研究如何在实际中使用一个自定义指令. 让我们完善刚才所创建的第一个指令, 让它变得有用:

    Vue.directive('tack', {
        bind(el, binding, vnode) {
            el.style.position = 'fixed'
        }
    });
    

    在HTML元素中:

    <p v-tack>I will now be tacked onto the page</p>
    

    毫无疑问, 它完全可以按照我们所希望的工作. 但是它还不够灵活, 如果我们可以传入一个值, 然后直接更新或者重用这个指令就好了. 例如, 我们想为这个元素指定一个值, 表示这个元素离顶部多远(多少个像素), 我们可以这样写(在CODEPEN上查看):


    // JS
    Vue.directive('tack', {
        bind(el, binding, vnode){
            el.style.position = 'fixed';
            el.style.top = binding.value + 'px';
        }
    });
    
    // HTML
    <div id="app">
        <p>Scroll down the page</p>
        <p v-tack="70">Stick me 70px from the top of the page</p>
    </div>
    

    假设我们想要区分从顶部或者左侧偏移70px, 我们可以通过传递一个参数来做到这一点(在CODEPEN上查看):


    // JS
    Vue.directive('tack', {
        bind(el, binding, vnode) {
            el.style.position = 'fixed';
            const s = (binding.arg === 'left' ? 'left' : 'top');
            el.style[s] = binding.value + 'px';
        }
    });
    
    // HTML
    <p v-tack:left="70">I'll now be offset from the left instead of the top</p>
    

    当然, 你可以同时传入不止一个值. 你可以像使用标准指令一样简单的使用自定义指令(在CODEPEN上查看):


    // JS
    Vue.directive('tack', {
        bind(el, binding, vnode) {
            el.style.position = 'fixed';
            el.style.top = binding.value.top + 'px';
            el.style.left = binding.value.left + 'px';
        }
    });
    
    // HTML
    <p v-tack="{top: '40', left: '100'}">Stick me 40px from the top of the page and 100px from the left of the page</p>
    

    基于我们的自定义指令, 我们可以创建和修改方法, 从而创建更为复杂的自定义指令. 这里, 我们将做一个waypoints-like例子, 用少量的代码实现特定滚动事件触发的动画效果(在CODEPEN上查看):

    // JS
    Vue.directive('scroll', {
        inserted: function(el, binding) {
            let f = function(evt) {
                if(binding.value(evt, el)) {
                    window.removeEventListener('scroll', f);
                }
            };
            window.addEventListener('scroll', f);
        }
    });
    
    // main app
    new Vue({
        el: "#app",
        methods: {
            handleScroll: function(evt, el) {
                if(window.scrollY > 50) {
                    TweenMax.to(el, 1.5, {
                        y: -10,
                        opacity: 1,
                        ease: Sine.easeOut
                    });
                }
                
                return window.scrollY > 100;
            }
        }
    });
    
    // HTML
    <div class="box" v-scroll="handleScroll">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque amet harum aut ab veritatis earum porro praesentium ut corporis. Quasi provident dolorem officia iure fugiat, eius mollitia sequi quisquam.</p>
    </div>
    

    为了让大家看得更清楚, 在这个代码片段中, 我们尽可能的保证它的简单易读. 在实际的APP中, 你可以构建非常友好的, 并且非常灵活的, 适合整个团队使用的自定义指令.

    在实际的构建中, 我会将指令代码放在"main.js"文件中, 该文件位于"src"目录的根目录下(如果你使用的是Vue-cli构建工具), 那么"App.vue"以及组件目录中的所有的.vue文件都可以访问它. 当然, 还要其他方法可以使用它, 但是我发现对于整个应用程序来说, 这是最灵活的实现方式.

    展开全文
  • VUE指令是什么,VUE自定义指令又是什么,下面就和大家分享一下个人对它们的理解
  • 主要介绍了vue自定义指令用法,结合实例形式总结分析了vue自定义指令常见写法与相关操作注意事项,需要的朋友可以参考下
  • Vue自定义指令

    2021-08-15 10:03:48
    Vue自定义指令使用:directives 自定义指令就是在vue中可以自己定义一些指令去运用:例: v-text:vue中的指令 v-ztext:自定义指令:(可以自己随意定义,v-****) 自定义指令写法: <span v-ztext="n"></...

    Vue自定义指令使用:directives
    自定义指令就是在vue中可以自己定义一些指令去运用:例:
    v-text:vue中的指令
    v-ztext:自定义指令:(可以自己随意定义,v-****)
    自定义指令写法:

    <span v-ztext="n"></span>
    <script>
    	new Vue({
    			el:'#root',
    			data:{
    				name:'尚硅谷',
    				n:1
    			},
    			directives:{
    			//写法一:简写
    			ztext(element,binding){ //参数一为真实dom元素,参数二为绑定元素对象
    			   console.log(binding.value)//获取到的时dom元素中的值
    			}
    			//写法二:完整写法
    			ztext:{
    				//指令与元素成功绑定时(一上来)
    					bind(element,binding){
    						element.value = binding.value
    					},
    					//指令所在元素被插入页面时
    					inserted(element,binding){
    						element.focus()
    					},
    					//指令所在的模板被重新解析时
    					update(element,binding){
    						element.value = binding.value
    					}
    			}
    		}
    	})
    <script>
    

    总结知识点:
    1》配置对象中常用的3个回调:
    (1).bind:指令与元素成功绑定时调用。
    (2).inserted:指令所在元素被插入页面时调用。
    (3).update:指令所在模板结构被重新解析时调用。

    2》备注:
    1.指令定义时不加v-,但使用时要加v-;
    2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。(有多个单词的时候不能写为驼峰,要用‘-’连接)

    展开全文
  • 如果Vue内置的指令不能满足功能需求的时候,可以进行自定义指令自定义指令的使用场景就是操作基础DOM,实现功能需求。 官方文档 1.关于自定义指令的钩子函数 自定义指令的五个钩子函数都是可选的,比如 v-once ...

    如果Vue内置的指令不能满足功能需求的时候,可以进行自定义指令。

    自定义指令的使用场景就是操作基础DOM,实现功能需求。

    官方文档

    1.关于自定义指令的钩子函数

    自定义指令的五个钩子函数都是可选的,比如 v-once 指令。

    1. bind

      指令第一次绑定到元素上;只调用一次;可以做相关初始化的操作;

    2. inserted

      被绑定的元素插入到其父元素节点时调用;

    3. update

      当所在组件的VNode更新时调用;但是update和VNode的更新顺序不定,所以需要比较;

    4. componentUpdated

      指令所在组件的VNode及其子VNode全部更新完成后调用;

    5. unbind

      解绑;只调用一次

    2.写法

    和组件一样,自定义指令也分全局指令和局部指令。

    全局指令:

    Vue.directive('my-directive', {
      // 只调用一次,指令第一次绑定到元素时调用
      bind (el, binding, vnode) {
      },
      // 被绑定元素插入父节点时调用
      inserted (el, binding, vnode) {
        console.log('inserted')
      },
      // 所在组件的 VNode 更新时调用
      update (el, binding, vnode) {
        console.log('update')
      },
      // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
      componentUpdated (el, binding, vnode) {
        console.log('componentUpdated')
      },
      unbind (el, binding, vnode) {
        console.log('unbind')
      }
    });
    

    局部指令:

    @Component({
      components: {
        child,
      },
      directives: {
        'my-directive': {
          // 只调用一次,指令第一次绑定到元素时调用
          bind(el, binding, vnode) {},
          // 被绑定元素插入父节点时调用
          inserted(el, binding, vnode) {
            console.log("inserted");
          },
          // 所在组件的 VNode 更新时调用
          update(el, binding, vnode) {
            console.log("update");
          },
          // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
          componentUpdated(el, binding, vnode) {
            console.log("componentUpdated");
          },
          unbind(el, binding, vnode) {
            console.log("unbind");
          },
        },
      },
    })
    

    3.自定义指令的模块化

    // module-directive.js
    export default {
      // 只调用一次,指令第一次绑定到元素时调用
      bind(el, binding, vnode) {},
      // 被绑定元素插入父节点时调用
      inserted(el, binding, vnode) {
        console.log("inserted");
      },
      // 所在组件的 VNode 更新时调用
      update(el, binding, vnode) {
        console.log("update");
      },
      // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
      componentUpdated(el, binding, vnode) {
        console.log("componentUpdated");
      },
      unbind(el, binding, vnode) {
        console.log("unbind");
      }
    }
    

    创建好模块化的指令后,通过index.js管理指令:

    import myDirective from './modules/myDirective'
    export { myDirective }
    

    统一管理模块化指令后,在main.js中进行全局注册:

    import * as directives from './directives'
    Object.keys(directives).forEach(index => Vue.directive(index, directives[index]))
    

    全局注册后,即可通过 v-DIRECTIVE_NAME使用。

    需要注意的是,在翻其他博主的文章时,有提到自定义指令不能在数据更新的时候同步响应。

    这个问题是和自定义指令的钩子函数有关,具体情况需要根据自己指令的需求去调整。

    附上链接

    展开全文
  • vue自定义属性、过滤器vue自定义指令全局局部过滤器全局局部 vue自定义指令 回顾 vue指令 : 扩展了html标签属性功能 使用方法 属性写法 v-属性名=“值” 自定义指令 1 全局 Vue.directive(“指令名”,{ 钩子函数 ...

    vue自定义指令、过滤器


    vue自定义指令

    • 回顾
      vue指令 : 扩展了html标签属性功能
      使用方法 属性写法 v-属性名=“值”
    • 自定义指令
      1 全局
      Vue.directive(“指令名”,{ 钩子函数 })
      Vue.directive(“指令名”,{
      bind(){ },
      inserted(el,binding){ },一般使用inserted
      update(){ },
      unbind(){ }
      })
      2 局部 只能在注册的组件中使用
      let Home = {
      direcitves:{
      指令名:{钩子函数}
      }
      }

    全局

    例1 、自定义指令------自动获取焦点

    <body>
     <div id="app">
        <input type="text" v-focus="100"> 
     </div>
    <script>
      Vue.directive("focus",{
        inserted(el,binding){
          console.log(el);//此时的el是input这个标签
          el.focus();
          console.log(binding)//此时的binding是对象
          /*
          {name: "focus", rawName: "v-focus", value: 100, expression: "100", modifiers: {…}, …}
          */
        }
      })
      let vm = new Vue({
        el:'#app',
        data: { 
        }
      })
    </script> 
    
    

    例2 自定义指令 -----回到顶部

    //css代码
     <style>
        button{
          position:fixed;
          bottom:100px;
          right:50px;
          display: none;
        }
      </style>
     // 布局
    <body  style="height:2000px">
      <div id="app">
        <button v-scroll="1000">回到顶部</button> 
      </div>
    </body>
    //js代码
    <script>
      Vue.directive("scroll",{
        inserted(el,binding){
          //获取传入的值 即binding.value
          var scrollTop = binding.value;
          //绑定事件(给window)
          window.onscroll = function(){
            // 获取滚动条滚动距离
            var sTop = document.documentElement.scrollTop||document.body.scrollTop;
            // 将滚动距离与传入的值作比较
            // 滚动距离>传入的值   button显示 否则隐藏
            if(sTop>scrollTop){
              el.style.display="block"
            }else{
              el.style.display="none"
            }
          }
          // 给按钮绑定事件
          el.onclick = function(){
            // window.scrollTo(0,0)
            document.documentElement.scrollTop=document.body.scrollTop=0
          }
        },
        //用于提高性能
        unbind() {
          //如果在inserted里面创建了定时器、或者绑定了全局事件  则需要在这里清除定时器、解绑全局事件
          window.onscroll = null
        }
      })
      let vm = new Vue({
        el:'#app',
        data: { 
        }
      })
    </script>  
    
    

    局部

    只能在当前实例上使用focus这个指令

      let Home = {
        directives:{
          focus: {
            inserted(el,binding){
            }
          },
          unbind() { 
          }
        }
      }
    

    过滤器

    主要用于模板中,对模板中渲染的数据做一层过滤(对数据做一层简单的修改再输出)

    全局

     <div id="app">
        {{ num | currency}}  // 页面显示  ¥107
      </div>
    <script>
      // 定义过滤器 给num自动加¥
      Vue.filter("currency",(v)=>{
        return "¥"+v;
      })
      let vm = new Vue({
        el:'#app',
        data: { 
          num:107
        }
      })
    </script> 
    

    局部

    组件的filters属性写过滤器

    
    let vm = new Vue({
        el:'#app',
        data: { 
          num:107
        },
        filters: {
          currency:(v)=>{
            return "¥"+v;
          }
        }
      })
    

    带默认值的过滤器

    <body  style="height:2000px">
      <div id="app">
        {{ num | currency}}  //没传值  页面显示 ¥107
        {{ num| currency("$")}} //传值  页面显示 $107
      </div>
    <script>
      let vm = new Vue({
        el:'#app',
        data: { 
          num:107
        },
        filters: {
          currency:(v,sign="¥")=>{
            return sign+v;
          }
        }
      })
    </script> 
    
    展开全文
  • Vue 自定义指令

    2019-06-01 08:35:30
    关于自定义指令写法(全局和局部),有哪些钩子函数,钩子函数的参数这里就不做讲解,Vue文档很清楚,可以直接看文档的;https://cn.vuejs.org/v2/guide/custom-directive.html 一、 自定义双向数据绑定 这个指令的...
  • Vue 自定义指令 index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &...
  • vue自定义指令

    2019-10-04 22:29:37
    Vue全局自定义指令 接下来用自动获取焦点这个小例子,来介绍一下全局自定义指令。 注意:Vue.directive(‘参数名称’,{}) 定义全局指令,它有两个参数 参数1:指令名称,注意在定义的时候,指令名称前不需要...
  • Vue自定义指令封装及用法

    千次阅读 多人点赞 2020-02-24 16:02:41
    Vue自定义指令 vue中的指令很多,例如v-if,v-for,v-model等等,当然尤大大也给我们提供了自定义属性这一 玩意儿,让我们也可自己定义指令,例如v-hello,v-fuck等等,那我们为什么需要自定义指令呢?那好,我就问你一...
  • 先来说说vue自定义指令的设计初衷,在官网上有这么一段话: 有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 虽然我们极力避免操作底层dom,但凡事总有例外,所以vue给我们留下...
  • vue自定义指令用法

    2020-05-12 11:42:12
    vue中,普通 DOM 元素进行底层操作,这时候就可能用到自定义指令。也就是说我们在操作普通DOM的时候有可能会用到自定义指令自定义指令和自定义组件一样,也是先注册后使用,其注册和组件的注册很类似,也分为...
  • vue自定义指令directive

    2018-09-20 09:40:00
    自定义指令写法和组件类似,只是方法是directive,同样分为全局和局部注册。官网的说法: 在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就...
  • vue 自定义指令

    2019-03-04 16:45:09
    自定义指令 Vue.directive(&amp;amp;amp;quot;指令名&amp;amp;amp;quot;,{}); Vue.directive内部钩子函数 1). bind(){} // 绑定元素时执行,只执行一次(常用) 2). inserted(){} // 当被绑定元素插入到dom...
  • Vue自定义指令和组件一样存在着全局注册和局部注册两种方式。 全局指令 先来说注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令,第一个参数为自定义指令名称(指令名称...
  • 23. Vue 自定义指令

    2020-03-19 22:07:17
    需求 可以看到上面的输入框在刷新页面并没有进行自动聚焦,那么这时候可以使用...这些都可以基于Vue自定义指令来实现。 简介 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令...
  • vue自定义指令的使用

    2020-09-17 18:11:06
    什么是自定义指令,有哪些钩子函数及自定义指令的使用场景? 有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,256
精华内容 2,102
关键字:

vue自定义指令写法

vue 订阅