精华内容
下载资源
问答
我要提问

  • 自定义指令

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

      

    1. 注册全局指令:
      2. 

    

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

    

      

    1. 注册局部指令
      2. 

    

     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>
    收起
    展开全文

  • 自定义指令 自定义局部指令 自定义全局指令 指令的封装

     2021-04-08 21:32:52
    自定义指令 概念 vue 官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外 vue 还允许开发者自定义指令 有时候内置指令并不能满足我们所有场景的需求，或者说有时候我们想为元素附加一些特别的功能，这... 
    自定义指令
    

    概念
    

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

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

    一 .自定义局部指令
    

    1.定义局部自定义指令
    

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

    语法
    

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

    

    说明
    

      

    1. inserted钩子函数：被绑定元素插入父节点时调用，它只会触发一次
      2. 

    2. 如果想在dom更新时也触发自定义指令，可以添加updated钩子函数
      3. 

    3. 关于钩子函数的参数

        

      1. el:指令所绑定的元素，可以用来直接操作 DOM
        2. 

      2. binding:一个对象，包含多个属性，特别是里面的value，通过它可以获取指令的绑定值，当用户给指令绑定了值的时候，通过binding.value可以获取
        3. 

      

      4. 

    

    注意：el和binding只是形参，可以自定义参数的名称
    

    2.使用局部自定义指令
    

      

    1. 和之前的内置指令一样，使用v-指令名称来使用我们自定义的指令
      2. 

    2. 在使用指令的时候，可以为指令绑定动态参数(从binding.value获取)
      3. 

    

    代码演示
    

    品牌名称:<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. 

    2. v-指令名称使用这个全局指令
      3. 

    

    // 引入全局指令
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. 

    2. 封装指令的配置主体  const 自定义指令名称 = {inserted(el,binding){}}
      3. 

    3. 暴露封装的自定义指令 export
      4. 

    4. 在需要的位置使用解构的方式引入 import {指令名} from '封装指令的文件的路径'
      5. 

    5. 注册指令 directives:{指令名}
      6. 

    6. 使用 按照内置指令的方式来使用 (正常使用)
      7. 

    

    代码演示:
    

    // 引入全局指令
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
  }
}

    

    总结
    

    封装暴露 > 组件当中(引入 注册 使用)
    收起
    展开全文
    vue

  • (精华)2020年7月14日 vue 自定义指令directive的使用
    function initPopHtml(title... var popOut = document.getElementById('popOut') ; if(popOut) { return; } var popOut = document.createElement('div'); popOut.id='popOut';... popOut.className = 'pop-out';... } 
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        javascript   
                                
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                        ... 
                    
                        20 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    14,404
            

            

                精华内容
                    5,761
            

        

        

            
热门标签

            
        


        


        

            关键字：
自定义指令