十.指令

Bertha 。 2023-06-21 03:51 78阅读 0赞

### 文章目录 ###

*  指令-directive
 *   *  一.自定义指令让文本框获取焦点
     *   *  1.\`jQuery\`写法-focus
         *  2.自定义全局指令-\`Vue.directive\`
         *  3.自定义局部指令-\`directives\`
         *  4.函数简写

# 指令-directive #

## 一.自定义指令让文本框获取焦点 ##

### 1.`jQuery`写法-focus ###

$(selector).focus();

### 2.自定义全局指令-`Vue.directive` ###

*  Vue中所有的指令, 在调用的时候, 都以`v-`开头
 *  自定义全局指令`v-focus`, 为绑定的元素自动获取焦点
    
     *  使用`Vue.directive`定义全局的指令
     *  参数1: 指令的名称, 在定义的时候, 指令的名称前面, 不需要加`v-`前缀, 因为默认前边加了`v-`. 但是在调用的时候, 必须在指令名称前加 `v-`前缀.
     *  参数2: 是一个对象, 这个对象身上, 有一些指令相关的函数, 这些函数可以在特定的阶段, 执行相关操作
     *  字符串要再加一个引号

//自定义全局指令 v-focus, 为绑定的元素自动获取焦点:
    //指令的名字 对象
    Vue.directive('focus',{ 
        inserted: function(el) { //钩子函数
            el.focus();
        }
    });
    
    //自定义局部指令 v-color 和 v-font-weight, 为绑定的元素设置指定的字体颜色和字体粗细: 
    directives: { 
        color: {  // 为元素设定指定的字体颜色
            bind(el, binding) { 
                el.style.color = binding.value;
            }
        },
        'font-weight': function (el, binding2){ // 自定义指令的简写形式, 等同于定义了 bind和update两个钩子函数
            el.style.fontWeight = bingding2.value;
            
        }
    }

*  inserted 表示被绑定元素插入父节点时调用

### 3.自定义局部指令-`directives` ###

*  定义局部指令因为可以有很多, 所以后边加了一个s. 定义的位置在new Vue中.
 *  样式, 只要通过指令绑定给了元素, 不管这个元素有没有被插入到页面中去, 这个元素肯定有了一个内联的样式.
 *  将来元素肯定会显示到页面中, 这时候, 浏览器的渲染引擎必然会解析样式, 应用给这个元素

//自定义局部指令 v-color 和 v-font-weight, 为绑定的元素设置指定的字体颜色和字体粗细: 
    directives: { 
        color: {  // 为元素设定指定的字体颜色
            bind(el, binding) { 
                el.style.color = binding.value;
            }
        },
        'font-weight': function (el, binding2){ // 自定义指令的简写形式, 等同于定义了 bind和update两个钩子函数
            el.style.fontWeight = binding2.value;
        }
    }

### 4.函数简写 ###

如果函数只写到`bind`和`update`上, 而并不关心其他的钩子. 可以用自定义指令的简写形式, 省去bind和update两个钩子函数.

Vue.directive('color',function(el, binding){ 
        el.style.color = binding.value;
    })

'fontsize': function (el, binding) { 
        //parseInt将字符串转成整数
        el.style.fontSize = parseInt(binding.value) + "px";
    }