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

    2020-11-01 16:35:02
    vue的自定义指令 使用场景:对普通DOM 元素进行底层操作 全局自定义指令 id:指令id,definition:定义对象 Vue.directive(id,definition) 局部自定义指令:使用directives选项 自定义指令的钩子函数 钩子函数 ...

    vue的自定义指令

    使用场景:对普通DOM 元素进行底层操作
    全局自定义指令
    id:指令id,definition:定义对象

    Vue.directive(id,definition)
    

    局部自定义指令:使用directives选项
    自定义指令的钩子函数

    钩子函数 描述
    bind() 构造函数,第一次绑定时调用,只调用一次
    inserted() 被绑定元素插入父节点调用,父节点存在即调用
    update() 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值;以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数。
    compentUpdated() 被绑定元素所在模板完成一次周期更新时调用
    unbind() 析构函数,接触绑定时调用,只调用一次

    绑定指令属性

    el 绑定指令的元素
    binding 绑定对象,用于传值
    expression 指令表达式
    arg 参数
    name 指令id
    modifiters 指令修饰符
    descriptor 指令解析结果
    vm 上下文viewmodel
    vnode vue编译的虚拟节点

    自定义指令的代码格式

    Vue.directive('my-directive', {
        bind: function () {
            ...
        },
        update: function (newValue, oldValue) {
            ...
        },
        unbind: function () {
            ...
        }
    })
    

    自定义指令的简单案例实现
    input输入框自动获取焦点
    实现效果
    在这里插入图片描述
    具体代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>vue自定义指令-input自动聚焦</title>
    </head>
    <body>
      <div id="app">
        <input type="text" v-focus>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        Vue.directive(
          'focus',{
            inserted:function(el){
              el.focus()
            }
          }
        );
        var app =new Vue({
        el:'#app'
        })
      </script>  
    </body>
    </html>
    

    自定义指令实现改变背景颜色
    实现效果
    在这里插入图片描述
    具体代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>自定义指令——背景加红</title>
    </head>
    
    <body>
    //:传颜色参数
      <div id="app" v-colors:yellow>{{msg}}</div>
      <script src="../js/vue.js"></script>
      <script>
        Vue.directive('colors', {
          bind: function (el, binding) {
            el.style.color = '#fff',
              el.style.backgroundColor = binding.arg
            
          }
        })
        let app = new Vue({
          el: '#app',
          data: {
    
            msg: 'xmxixixi'
    
          },
        })
      </script>
    </body>
    
    </html>
    
    展开全文
  • Vue的自定义指令

    2020-05-17 21:12:26
    Vue的自定义指令 自定义指令的目的:需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 注册全局自定义指令 <div id="app"> 自动获取焦点:<input type="text" v-auto-focus> </div...

    Vue的自定义指令

    自定义指令的目的:需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

    • 注册全局自定义指令
    <div id="app">
        自动获取焦点:<input type="text" v-auto-focus>
    </div>
    <script>
        //全局指令
      Vue.directive("auto-focus", {
          inserted: function (el, binding) {
            // el 代表使用了此指令的那个 DOM 元素
            // binding 可获取使用了此指令的绑定值 等
            el.focus()
          }
        }
      );
    

    模版:

    Vue.directive("指令名称", {
          inserted: function (el, binding) {
            // el 代表使用了此指令的那个 DOM 元素    
            // binding 可获取使用了此指令的绑定值 
            //逻辑代码
          }
        }
      );
    
    • 注册局部指令
    <div id="app">
        自动获取焦点:<input type="text" v-focus>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {},
        //只在当前Vue实例中生效
        directives:{
          "focus":{
            inserted:function (el,binging) {
              //逻辑代码
              el.focus()
            }
          }
        }
      })
    
    </script>
    

    模版:

    directives:{
          "指令名称":{
            inserted:function (el,binging) {
              //逻辑代码
            }
          }
    }
    
    • 注意:
      注册时,
      指令名称前不要带 v-,因为内部处理会自动加上v-。
      指令名称中间不要有大写字母,开头可以出现大写字母

    • 使用自定义指令
      在引用指令时,指令名前面加上 v-
      直接在元素上在使用即可 :v-指令名=‘表达式’,例如:

    <input type="text" v-auto-focus>
    
    展开全文
  • VUE的自定义指令

    2020-12-12 17:06:29
    文章目录前言一、VUE自定义指令的创建?1.全局自定义指令创建2.局部自定义指令创建总结 前言 VUE除了核心功能默认内置指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象...


    前言

    VUE除了核心功能默认内置的指令 (v-modelv-show),Vue
    也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM
    元素进行底层操作,这时候就会用到自定义指令。


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、VUE自定义指令的创建?

    1.全局自定义指令创建

    <div id="app">
            <input type="text" v-focus>//使用v-focus自定义指令
    </div>
        
    <script>
        // 注册一个全局自定义指令 `v-focus`
        Vue.directive('focus', {
            inserted: function (el) {
                el.focus()
            }
        })
    
        let vm = new Vue({
            el:"#app",
            data:{
    
            }
        })
    </script>
    

    上面创建了一个v-focus获焦指令,可以看到我们使用了directive关键字,directive有两个参数。

    第一个参数是名字,需要加双引号(为你的自定义指令取名)。

    第二个参数为你具体想要执行的指令,directive中除了有inserted之外还有bindupdate等钩子函数,但我们一般将指令写在inserted中。

    inserted方法携带一个参数,这个参数就是我们的DOM页面元素,这个参数是必带的,方法中我们给这个DOM页面元素绑定了一个focus获焦的函数方法,至此我们的全局自定义指令创建完毕。

    下面再通过一个VUE实例绑定我们的页面DIV,并在页面的DIV中加入V-focus来使用即可。

    这样就实现了我们全局自定义指令的创建与使用,自定义指令也是有全局与局部之分的,如果你不想这个指令让其他实例使用,那么就可以创建一个局部的自定义指令

    2.局部自定义指令创建

    我们仍然使用focus获焦事件,创建局部自定义指令与全局自定义指令的区别:
    1、局部变量写在一个VUE实例中
    2、directives末尾加不加s。创建局部变量需要加s,全局则不需要

    <div id="app2">
            <input type="text">
        </div>
    
    <script>
    let vm2 = new Vue({
            el: "#app2",
            data: {
    
            },
         //创建局部指令directives需要加s
            directives: {
                focus: {
                    inserted: function (el) {
                        el.focus()
                    }
                }
            }
        })
    </script>
    

    总结

    本篇内容至此已结束,如有错误,欢迎评论指出。共勉~

    展开全文

空空如也

空空如也

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

vue的自定义指令

vue 订阅