精华内容
下载资源
问答
  • vue自定义指令-vue-reclick

    千次阅读 2017-12-23 16:18:29
    vue自定义指令

    前文

      先来bb一堆废话哈哈..
    
      用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用.
    
      刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是就想说自己封装一个 
      自定义指令来解决这个问题,于是便有了自己的第一个vue自定义指令 vue-reclick . 
    
    

    甩一个地址 https://github.com/webfansplz/vue-reclick

    哈哈,好了!广告打完了,开始进入正题(等一下,听说star有奖哦)…

    1.使用场景

    vue 2.0中,有的情况下,你需要对普通DOM元素进行底层操作,这时候就需要用到自定义指令!

    2.api详解

     其实关于vue自定义指令的使用 vue官方文档已经说的非常清楚.这里只是简单的照搬,哦不,讲一下 (23333..)..
     1.首先创建一个指令自定义对象directObj。
    
     let directObj = {}.
    
     2.vue为所有指令的钩子函数都提供一些函数参数。
    
     let args = {
      el:'指令所绑定的元素,可以用来直接操作 DOM ',
      binding:{
       name:'指令名,不包括 v- 前缀。',
       value:'指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。',
       oldValue:'指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。',
       expression:"字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"",
       arg:"传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"",
       modifiers:"一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。",
       vnode:"Vue 编译生成的虚拟节点。",
       oldVnode:"上一个虚拟节点"
      }
     }
    
     3.在directObj上可根据需要定义一些钩子函数
    
     directObj.bind = function({...args }){
    
         //只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
     } 
    
     directObj.inserted= function({...args }){
    
         //被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
     } 
    
     directObj.update= function({...args }){
    
         //所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
         指令的值可能发生了改变,也可能没有。 
         但是你可以通过比较更新前后的值来忽略不必要的模板更新 
     }
    
     directObj.componentUpdated= function({...args }){
    
         //指令所在组件的 VNode 及其子 VNode 全部更新后调用。
     }
    
     directObj.unbind= function({...args }){
    
         //只调用一次,指令与元素解绑时调用。
     }
    
     4.注册自定义指令
      (1).全局注册:
    
          Vue.directive('指令名称','指令对象');
          例:Vue.directive('reclick',directObj);
          注意:全局注册自定义指令需在实例化Vue之前.
    
      (2).局部(组件)注册:
    
          export default{ 
           directives:{
             '指令名称':'指令配置'
           }
          }
    
          例:
    
          export default{ 
           directives:{
             'reclick':directObj
           }
          }

    3.封装自定义指令

     好了,简单的讲(抄)完 自定义指令相关的api,接下来我们通过vue-reclick来简单的讲解一下如何封装一个vue自定义指令吧.
    
     由于vue-reclick 只是用来解决一个问题的小东西,所以代码也相对简单,这里主要讲一个封装自定义指令的过程.
    
     下面我们先来看下vue-reclick的源码:
     ;(function() {
      /**
       * 函数节流
       *
       * @param {any} method 方法名
       */
      function throttle(method) {
        clearTimeout(method.tId);
        method.tId = setTimeout(function() {
          method.call();
        }, 200);
      }
      /**
       * 事件绑定
       *
       * @param {any} element  绑定dom
       * @param {any} event    事件类型
       * @param {any} listener 方法
       */
      function addEvent(element, event, listener) {
        if (element.addEventListener) {
          element.addEventListener(event, listener, false);
        } else if (element.attachEvent) {
          element.attachEvent('on' + event, listener);
        } else {
          element['on' + event] = listener;
        }
      }
      var vueReclick = {};
      var reclick = {
        bind: function(el, binding) {
          addEvent(el, 'click', function() {
            throttle(binding.value);
          });
        },
        unbind: function(el) {
          addEvent(el, 'click', function() {});
        }
      };
    
      vueReclick.install = function(Vue) {
        Vue.directive('reclick', reclick);
      };
    
      if (typeof exports == 'object') {
        module.exports = vueReclick;
      } else if (typeof define == 'function' && define.amd) {
        define([], function() {
          return vueReclick;
        });
      } else if (window.Vue) {
        window.vueReclick = vueReclick;
        Vue.use(vueReclick);
      }
    })();
    1.将所有代码包裹在一个立即执行函数之中.
    
      立即执行函数有自己的作用域,可以避免变量冲突与污染.    
    
      将独立的功能封装在自包含模块中.  
    
    2.vue-reclick功能相关的代码这里简单说明下.
    
      这里封装了两个方法(1.throttle,2.addEvent)
    
      一个指令配置对象(reclick)
    
      在reclick对象里定义了bind方法,在指令绑定到dom的时候,在dom上绑定点击事件,并获取指令绑定的方法名称.
      在触发点击事件的时候通过函数节流的方法来调用该方法,从而解决短时间快速点击触发多次方法的问题.
    
      在reclick对象里定义了unbind方法,在指令与dom解绑的时候,将传入方法与dom进行解绑..
    
    3.定义一个vueReclick插件对象,并在该对象上定义一个install方法.
    
    (Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器)
    
    4.在install方法里全局注册指令
    
     vueReclick.install = function(Vue) {
        Vue.directive('reclick', reclick);
     };
    
    5.兼容多种模块规范暴露该插件
    
      if (typeof exports == 'object') {
        module.exports = vueReclick;
      } else if (typeof define == 'function' && define.amd) {
        define([], function() {
          return vueReclick;
        });
      } else if (window.Vue) {
        window.vueReclick = vueReclick;
        Vue.use(vueReclick);
      }
    
    6.到这一步,其实一个简单的自定义组件就已经大功告成了.
    
    7.最后.我们来讲一下如何在项目中引入vueReclick并使用.
    
      (1).非node环境中
    
        在第5点我们在else if(window.Vue)中其实已经Vue的全局方法来使用该插件.
        所以我们可以直接在项目中使用该指令.
        例:https://github.com/webfansplz/vue-reclick/blob/master/example/index.html
    
      (2).node环境中
    
        我们可以在项目入口文件中引入该插件,然后全局使用它,下面我们会讲解如何将插件发布到Npm.
        例:
        import vueReclick from 'vue-reclick';
        Vue.use(vueReclick);

    4.将封装好的插件发布到npm.

    1.在Npm官网注册一个账号
    
    2.在项目目录下 使用npm login 登录. 
    
    3.在项目目录下 使用npm publish 上传插件
    
    4.大功告成,这样以后我们在所有项目中就都可以使用npm install 来下载我们自己封装好的插件啦!.
    展开全文
  • 1.vue自定义指令 2.vue插槽,具名插槽 vue常用API vue生命周期

    目录

    1.vue自定义指令

    2.vue插槽

    3.具名插槽

    4.vue常用API

    5.组件/vue生命周期


    1.vue自定义指令

    <body>
        <div id="root">
        <h1 v-fontsize='"38px"' v-color='"pink"'>55hfgdsjhfsjkfs</h1> //指令使用v-自定义指令名称来使用,如果自定义的指令名称是驼峰命名的话,需要把大写变成小写,前边再加-连接
        </div>

        <script src="./vue.js"></script>
        <script> 
        // Vue.directive('fontSize', {  //全局指令,第一个参数是指令名称,第二个参数是一个回调函数
        //    inserted (el, data) {   //回调函数名字写死,两个参数,第一个参数是自定义指令作用的元素,第二个指令是一个对象,里面的value值就是自定义指令等号后面给的值
        //        el.style.fontSize=data.value
        //    },
        // });
            const app = new Vue({
                el: '#root',
                directives:{      //  局部指令,只能在这个vue实例中使用,其他用法跟全局指令一样
                    'fontsize':{
                        inserted (el,data) {
                            el.style.fontSize=data.value
                        }
                    },
                        'color':{
                            inserted(el,data){
                            el.style.color=data.value
                            }
                        
                    }
                }
            });
        </script>

    2.vue插槽

    <div id="root">
    <com1>哈哈哈哈哈哈哈哈哈哈哈</com1> //如果不使用插槽的话,在组件里面写的值会被组件覆盖不显示
        </div>
        <template id="com1">
            <div>
                <h1>如果我是dj你会爱我吗</h1>
                <slot></slot>    //使用插槽,表示插入的值在这个地方显示
            </div>
        </template>

        <script src="./vue.js"></script>
        <script>
    let com1={
        template:'#com1'
    }
     Vue.component('com1',com1);
    const app = new Vue({
                el: '#root',
               
            });
        </script>

    3.具名插槽

    <body>
        <div id="box">
    <first>
    <h3 slot='one'>此树是我栽</h3> //具名插槽,相当于有个slot属性,给个名字one
    <h4 slot="two">要从此路过</h4>
    留下买路财
    </first>
        </div>
        <template id="first">
            <div>
                <h2>此山是我开</h2>
                <slot name='one'></slot> //想把哪个放在这个地方,就用slot标签,name值就是上面slot的值
                <slot name='two'></slot>
                <slot></slot>
            </div>
        </template>

        <script src="./vue.js"></script>
        <script>
    let first={
        template:'#first'
    }
    Vue.component('first',first)    
        new Vue({
                el:'#box'
            })
        </script>
    </body>

    4.vue常用API

    <body>
     <div id="app">
        <h1>
          姓名:{{user.name}}
        </h1>
        <h1>
          性别:{{user.sex}}
        </h1>
        <h1>年龄:{{user.age}}</h1>
        <div class="div" ref='box'></div>
        <button @click='getWgh'>获取div的宽度</button>
     </div> 
    </body>
    <script src="../vue.js"></script>
    <script>
        new Vue({
          el:"#app",
          data:{
              user:{
                name:"张三",
                sex:"男"
              },
          },
          // 如果想要在vue实例渲染后生命周期添加新的属性到实例中的data上,它不会触发更新。若必须要在渲染后添加新的属性更新视图就需要用到$set方法
           mounted(){
            // 参数一 将要处理的数据 参数二 添加的属性名 参数三 属性值
           this.$set(this.user,"age",24)
           },
           methods: {
            getWgh(){
              // vue中dom更新是一个异步的过程
                console.log( this.$refs.box.offsetWidth+"-----------------")    // 获取标签宽度    
                this.$nextTick(()=>{   // $nextTick当DOM更新完毕后执行回调
                  // 此时dom已经完全更新结束
                    console.log( this.$refs.box.offsetWidth)
                })
            }
           },
        })

    5.组件/vue生命周期

    beforeCreate创建前data,methods还没有创建

    created创建后,data,methods都已经创建完成了

    beforeMounted页面渲染前,数据都加载完毕了,但是还没渲染到网页上

    mounted渲染后,数据都渲染到了页面上

    beforeDestroy组件或者vue实例销毁前,数据都还可以使用

    destroyed销毁后,组件或者vue实例已经销毁,不能继续使用了

    展开全文
  • Vue.directive:用来注册自定义指令,对低级DOM元素进行访问,为DOM元素添加新的特性。 (就是简单的自己定义一个系统没有的指令方法,然后再HTML里使用自己定义的方法) 实现效果:为文本框自动获取焦点 ...

    Vue.directive:用来注册自定义指令,对低级DOM元素进行访问,为DOM元素添加新的特性。
    (就是简单的自己定义一个系统没有的指令方法,然后再HTML里使用自己定义的方法)
    在这里插入图片描述


    实现效果:为文本框自动获取焦点
    在这里插入图片描述


    展开全文
  • 自定义指令Vue实例的生命周期

    千次阅读 2020-07-25 01:21:13
    如v-model,v-bind,v-for,v-show等指令都是Vue内置的指令,但可以通过自定义指令来达到其他的效果。 Vue中所有的指令,在调用的时候,都以 v- 开头,所以自定义指令后调用时前面也要加 v- 。 使用 Vue.directive...
    如v-model,v-bind,v-for,v-show等指令都是Vue内置的指令,但可以通过自定义指令来达到其他的效果。
    Vue中所有的指令,在调用的时候,都以 v- 开头,所以自定义指令后调用时前面也要加 v- 。
    

    使用 Vue.directive() 定义全局的指令

    1. 第一个参数为指令的名称(注:在定义时,指令的名称前面,不需要加 v- 前缀),但在调用时,必须在指令名称前加上 v- 前缀来进行调用。
    2. 第二个参数是一个对象,这个对象有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作。常用的三个钩子函数为 bind , inserted , update。
    3. bind:每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次。
    4. inserted:表示元素插入到DOM中的时候,会执行inserted函数,触发一次。
    5. update:当组件(或VNode)更新的时候,会执行 update,可能会触发多次。

    钩子函数

    1. 第一个参数都为el,表示被绑定了指令的那个元素,这个el参数是一个原生的js对象,可直接用来操作DOM。
    2. 第二个参数binding,是一个对象,常用的属性有(具体可参考Vue.js官网)
      - name:指令名,不包括 v- 前缀
      - value:指令绑定的值(计算结果),如v-my-directive=“1 + 1”,绑定值为2
      - expression:字符串形式的指令表达式,如v-my-directive=“1 + 1”,表达式为"1 + 1"
    • 函数简写: 大多数情况下,可能只在 bind 和 update 钩子上做重复动作,并且不关心其他钩子函数,可以这样写:
    Vue.directive('color-swatch',function(el,binding){
    	el.style.backgroundColor = binding.value;
    	//这个function相当于在bind和update里面都写了一份
    })
    

    指令—自定义全局指令让文本框获取焦点,并改变字体样式:

    <div id="app">
            <input type="text" v-focus v-fontweight="900">
            <!--不能省略单引号,否则会把blue当作一个变量,而不是字符串-->
            <p v-fontsize="'50px'" v-color="'blue'">{{mes}}</p>
        </div>
        <script>
            Vue.directive('focus', {
                bind: function(el) {
                    //在元素刚绑定指令的时候,还没有插入到DOM中去,这时调用focus方法没用
                    //因为一个元素只有插入DOM之后才能获取焦点
                    //el.focus();
                    //样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有了一个内联样式
                    el.style.color = 'red'
                },
                inserted: function(el) {
                    el.focus();
                },
                update: function(el) {
    
                }
            })
    
            Vue.directive('color', {
                bind: function(el, binding) { //此为形参,可以改变变量名,下面同步即可
                    //el.style.color = 'red';
                    console.log(binding.name); //color
                    console.log(binding.value); //blue
                    console.log(binding.expression); //'blue'
                    el.style.color = binding.value; //通过binding来拿到传递的值
                }
            })
    
            //执行任何有关Vue操作前,都要先创建vue实例选定Vue控制区域,否则相关Vue操作都会无效
            var vm = new Vue({
                el: '#app',
                data: {
                    mes: '加油!'
                },
                methods: {},
                filters: {}, //定义私有过滤器
                directives: { //自定义私有指令
                    'fontweight': {
                        bind: function(el, binding) {
                            el.style.fontWeight = binding.value;
                            //fontWeight第二个单词首字母要大写,不然会失效
                        }
                    },
                    'fontsize': function(el, binding) {
                        //注意:这个function等同于写在了bind和update中去
                        el.style.fontSize = parseInt(binding.value) + 'px';
                    }
                }
            })
        </script>
    

    注: bind在Vue实例创建期间执行created函数时执行,但此时并未将数据渲染到内存中的DOM树,对不在DOM树中的元素调用方法是无效的,在插入DOM树之后调用方法才有效。
    所以和JS行为有关的操作,最好在inserted中去执行,防止JS行为不生效。和样式相关的操作,一般都可以在 bind 执行,不管这个元素有没有被插入到页面中去,这个元素肯定有了一个内联样式,浏览器的渲染引擎会解析样式,应用给这个元素。

    Vue实例的生命周期

    每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

    1. 概念: 从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期。
    2. 生命周期钩子: 就是生命周期函数(生命周期事件)的别名。
    3. 主要的生命周期函数分类:
      - 创建期间的生命周期函数:beforeCreate、created、beforeMount、mounted
      - 运行期间的生命周期函数:beforeUpdate、updated
      - 销毁期间的生命周期函数:beforeDestroy、destroyed

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue实例的生命周期函数</title>
        <script src="../lib/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <input type="button" value="修改mes值" @click="mes='快完成啦'">
            <h3 id="h3">{{mes}}</h3>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    mes: '明天继续坚持'
                },
                methods: {
                    show() {
                        console.log('执行了show方法')
                    }
                },
    
                //创建期间的生命周期函数
                beforeCreate() { //这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
                    console.log(this.mes); //undefined
                    //this.show(); //报错:this.show is not a function
                },
                created() { //这是我们遇到的第二个生命周期函数
                    console.log(this.mes); //明天继续坚持
                    this.show(); //执行了show方法
                },
                beforeMount() { //这是我们遇到的第三个生命周期函数,表示模板以及在内存中编译完成了,但尚未把模板渲染到页面中去
                    console.log(document.getElementById('h3').innerText); //{{mes}}
                },
                mounted() { //这是我们遇到的第四个生命周期函数,表示内存中的模板已挂载到页面中去,可以看见渲染好的页面
                    console.log(document.getElementById('h3').innerText); //明天继续坚持
                },
    
                //运行期间的生命周期函数
                beforeUpdate() { //此时数据更新(model)了,但界面(view)还没更新
                    console.log('界面上元素的内容:' + document.getElementById('h3').innerText); //界面上元素的内容:明天继续坚持
                    console.log('data中的mes数据:' + this.mes); //data中的mes数据:快完成啦
                },
                updated() { //此时已同步更新完成
                    console.log('界面上元素的内容:' + document.getElementById('h3').innerText); //界面上元素的内容:快完成啦
                    console.log('data中的mes数据:' + this.mes); //data中的mes数据:快完成啦
                }
                //给router-view加了个keep-alive导致组件缓存了,所以不会触发beforeDestory和destoryed
            })
        </script>
    </body>
    
    </html>
    
    展开全文
  • 本篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素 ,具有一定的参考价值,有兴趣的可以了解一下。
  • 在查看官方文档发现了自定义指令(自己学习的时候漏掉的知识点),但是一直有个问题,就是拖拽后点击事件也触发了。 这是因为两个原因: 拖拽事件放在了点击事件外 //最初的代码 <div v-drag> <el-button...
  • // 自定义指令 directives:{ drag(el,binding,vnode) { // 函数里面第三个参数vnode 它的vnode.context就是当前的vm实例 constthat = vnode.context } } ...
  • 文章目录一、过滤器使用的地方代码推进补充 ES6 padstart自动填充(一般用在时间过滤上面)二、自定义指令全局的指令自定义指令三、vue中操作Dom1、绑定2、操作DOM 一、过滤器 使用的地方 过滤器:过滤器可以用在两...
  • 老项目业务代码写的自定义指令,想在指令里面获取vue实例,来提示国际化字段。直接打印this是不行的。需要在bing()里写上第三个参数 const copy = { bind(el, { value }, vNode) { el.$value = value; el....
  • // 自定义指令 directives:{ drag(el,binding,vnode) { // 函数里面第三个参数vnode 它的vnode.context就是当前的vm实例 let that = vnode.context } }
  • 注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令自定义指令相当于为元素添加一个自定义属性,只不过是以v-开头的 ...
  • 文章目录Vue3高级语法补充自定义指令认识自定义指令实现方式一:默认实现实现方式二:局部自定义指令方式三:自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令认识Teleport(vue3)和组件...
  • 自定义指令 除了Vue核心的内置指令(例如:v-model 和 v-show等)以外,Vue也允许自己定义指令...接下来用自动获取焦点这个小例子,来介绍一下全局自定义指令。 注意:Vue.directive(‘参数名称’,{}) 定义全局指令...
  • 接下来要讲的是如何在vue中实现元素拖动,并且拿到拖动元素相对于父元素的位置偏移量X、Y 下面我们看下页面的基本...接下来,我们使用自定义指令去实现这个功能,这里还不清楚自定义指令内容的同学请看官网 :https:/...
  • <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="" v-model='keywords' v-focus>...Vue.directive('focus',{ bind:function(el){ el.fo...
  • Vue 中怎么自定义指令Vue 中怎么自定义过滤器, NextTick 是做什么的,Vue 如何去除url中的,computed 和事件 methods 有什么区别 全局注册 局部注册 Vue 中怎么自定义过滤器 可以用全局方法 Vue.filter() 注册...
  • Vue中通过自定义指令获取元素

    千次阅读 2017-03-31 08:36:18
    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的;http://www.tuicool.com/articles/6Jfiyyz 在 vue.js 中,获取某个DOM Element常用的...
  • vue自定义指令 focus获取焦点

    千次阅读 2019-11-28 16:38:42
    1.//全局自定义指令 代码要放在new Vue的上面 //注册一个全局自定义指令`v-focus` //使用Vue.directive()定义全局的指令v-focus //其中参数1:指令的名称,注意,在定义的时候,指令的名称前面,不需要加v-前缀 ...
  • 今天小编就为大家分享一篇vue 自定义指令自动获取文本框焦点的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export default { data(){  return{ msg : 'oldMsg'  }  }  methods : { ...
  • [原文](http://www.cnblogs.com/Eden-cola/p/vue-register-dom.html)在Vue中通过自定义指令获取元素 - 不带汽的可乐 - 博客园 不带汽的可乐 博客园 首页 新随笔 联系 订阅管理 随笔 - 11  文章 - 0  评论 ...
  • 什么是Vue自定义指令Vue自定义指令用起来就像Vue内置的v-model、v-on...之类,只不过实现了一些自己想要的功能。因为Vue自定义指令的钩子函数会传入一个el,它是自定义指令绑定到的那个DOM元素,所以Vue自定义指令...
  • 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。 v-xxx html+css的复用的主要形式是组件 你需要对普通 DOM 元素进A行底层操作,这时候就会用到自定义指令 App.vue内准备内容 <...
  • 目录 一、vue操作讲解 ...6,自定义指令获取焦点 7,自定义指令改变样式 8,Vue的生命周期 9,vue-resource 实现 get, post, jsonp请求 代码请参考我的github: https://github.com/masterzz/vue-l...
  • vue自定义指令

    2021-10-12 09:48:47
    通常情况下我们使用vue自带指令已经足够,但是在某些情况下自定义指令不能够满足我们的需求,我们就可以自定义指令,以 “使input输入框自动获取焦点” 为例,方法如下: 1、局部自定义指令 <template> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,630
精华内容 5,452
关键字:

自定义指令获取vue

vue 订阅