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

    2020-09-09 22:43:32
    自定义指令的作用 除了内置指令外,Vue 也允许注册自定义指令。有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候 使用自定义指令更为方便。 自定义指令文档: ...

    自定义指令的作用
    除了内置指令外,Vue 也允许注册自定义指令。有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候
    使用自定义指令更为方便。
    自定义指令文档: https://cn.vuejs.org/v2/guide/custom-directive.html
    注册与使用自定义指令方式

    1. 注册全局指令:
    // 指令名不要带 v-
     Vue.directive('指令名', { 
     	// el 代表使用了此指令的那个 DOM 元素 
     	// binding 可获取使用了此指令的绑定值 等 
     	inserted: function (el, binding) {
     		 // 逻辑代码
     	 }
    })
    
    1. 注册局部指令
     directives : {
     	 '指令名' : { // 指令名不要带 v- 
     	 	inserted (el, binding) {
     	 		 // 逻辑代码 
     	 	}
     	 }
     }
    

    注意:注册时,指令名不要带 v-
    3. 使用指令:
    引用指令时,指令名前面加上 v-
    直接在元素上在使用即可 : v-指令名='表达式

    <!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>Document</title>
    </head>
    <body>
        <div id="app">
            <p v-upper-text="message">xxxxx</p>
            自动获取焦点:<input type="text" v-focus>
        </div>
        <div id="app2">
            <p v-upper-text="msg">xxxxx</p>
            
        </div>
        <script src="./node_modules/vue/dist/vue.js"></script>
        <script>
            // 注册全局自定义指令,可以在多个Vue管理的入口下使用该指令
            // 第一个参数为指令名,但是不要有v-开头
            Vue.directive('upper-text',{
                //一般对样式 的操作在bind中,bind函数只调用一次
                bind: function (el) {
                    el.style.color = 'red'
                },
                //一般对js操作在inserted中,inserted也是只调用一次
                // el是当前指令作用的那个Dom元素,
                // binding用于获取使用了当前指令的绑定值(value)、表达式(expression)、指令名(name)等
                inserted: function (el, binding) {
                    // 将所有字母文本内容转换为大写
                    el.innerHTML = binding.value.toUpperCase()
                }
            })
    
            new Vue({
                el: '#app',
                data: {
                    message: 'mengxuegu, 陪你学习伴你梦想'
                },
                //注册局部自定义指令:只能在当前Vue实例管理的入口 下引用这个指令
                directives: {
                    'focus': { // 指令名,
                        bind: function () {
    
                        },
                        // 刷新页面自动获取焦点
                        inserted: function (el, binding) {
                            //被 v-focus 作用的那个元素在刷新页面后会自动 获取焦点
                            el.focus()
                        }
                    }
                }
            })
    
            new Vue({
                el: '#app2',
                data: {
                    msg: 'hello'
                }
            })
        </script>
    </body>
    </html>
    
    展开全文
  • 自定义指令 概念 vue 官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外 vue 还允许开发者自定义指令 有时候内置指令并不能满足我们所有场景的需求,或者说有时候我们想为元素附加一些特别的功能,这...

    自定义指令

    概念

    vue 官方提供了v-textv-forv-modelv-if等常用的指令。除此之外 vue 还允许开发者自定义指令
    有时候内置指令并不能满足我们所有场景的需求,或者说有时候我们想为元素附加一些特别的功能,这时候就可以通过自定义指令来实现

    vue 中的自定义指令分为两类,分别是:
    局部自定义指令:组件内定义的指令,只有在当前组件中可以使用
    全局自定义指令:通过Vue创建的指令,可以在所有组件中使用

    一 .自定义局部指令

    1.定义局部自定义指令

    局部自定义指令需要在组件的directives结构中定义,它是一个单独的结构

    语法

    directives:{
        指令名称:{
            inserted(el,binding){ 		
             }
         }
    }
    

    说明

    1. inserted钩子函数:被绑定元素插入父节点时调用,它只会触发一次
    2. 如果想在dom更新时也触发自定义指令,可以添加updated钩子函数
    3. 关于钩子函数的参数
      1. el:指令所绑定的元素,可以用来直接操作 DOM
      2. binding:一个对象,包含多个属性,特别是里面的value,通过它可以获取指令的绑定值,当用户给指令绑定了值的时候,通过binding.value可以获取

    注意elbinding只是形参,可以自定义参数的名称

    2.使用局部自定义指令

    1. 和之前的内置指令一样,使用v-指令名称来使用我们自定义的指令
    2. 在使用指令的时候,可以为指令绑定动态参数(从binding.value获取)

    代码演示

    品牌名称:<input type="text"
                 v-model="userdata.brandName"
                 v-myfocus
                 v-mycolor='"red"'>
    ----------------------------------------------------------------------
    // 添加局部自定义指令
      directives: {
        myfocus: {
          // el就是当前绑定这个指令的元素,可以用来直接操作dom
          inserted (el) {
            el.focus()
          }
        },
        mycolor: {
          inserted (el, binding) {
            el.style.color = binding.value
          }
        }
      }
    

    二 .自定义全局指令

    1.定义全局自定义指令

    语法

    一般选择在src/utils 文件夹下定义项目所用公共工具
    语法格式

    // 全局指令
    Vue.directive(指令名称,{
        // 配置及处理
        inserted(el,binding){
            
        }
    })
    

    暴露所写的全局自定义指令

     import Vue from 'vue'
    
     export const mycolor = Vue.directive('mycolor',{
         inserted(el,binding){
             el.style.color = binding.value
         }
     })
    

    说明:

    使用Vue.component创建全局自定义指令
    代码逻辑跟自定义局部指令一样 注意书写格式
    inserted钩子函数:被绑定元素插入父节点时调用
    el,binding:钩子函数的参数
    在每个组件中都能引入使用

    2.使用全局自定义指令

    1. 引入定义好的全局指令
    2. v-指令名称使用这个全局指令
    // 引入全局指令
    import  youcolor  from '@/utils/mydirectives.js'
    // 使用全局指令
    品牌名称:<input type="text"
                 v-model="userdata.brandName"
                 v-myfocus
                 v-mycolor='"red"'>
    ----------------------------------------------------------------------
    // 定义全局指令
    import Vue from 'vue'
    
    export const youcolor = Vue.directive('youcolor', {
      inserted (el, binding) {
        el.style.color = binding.value
      }
    })
    

    三 .指令的封装

    步骤

    1. 不用再引入vue
    2. 封装指令的配置主体 const 自定义指令名称 = {inserted(el,binding){}}
    3. 暴露封装的自定义指令 export
    4. 在需要的位置使用解构的方式引入 import {指令名} from '封装指令的文件的路径'
    5. 注册指令 directives:{指令名}
    6. 使用 按照内置指令的方式来使用 (正常使用)

    代码演示:

    // 引入全局指令
    import  {youcolor}  from '@/utils/mydirectives.js'
    // 注册指令 
    directives: {
        youcolor
    }
    // 使用全局指令
    品牌名称:<input type="text"
                 v-model="userdata.brandName"
                 v-youcolor='"red"'>
    ----------------------------------------------------------------------
    // 定义指令--封装 暴露
    export const youcolor = {
      inserted (el, binding) {
        el.style.color = binding.value
      }
    }
    

    总结

    封装暴露 > 组件当中(引入 注册 使用)

    展开全文
  • function initPopHtml(title... var popOut = document.getElementById('popOut') ; if(popOut) { return; } var popOut = document.createElement('div'); popOut.id='popOut';... popOut.className = 'pop-out';... }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,404
精华内容 5,761
关键字:

自定义指令