vue经典面试题：谈一下对于vue指令的理解，如何封装一个指令

veggie_a_h

已于 2022-01-26 20:36:52 修改

阅读量465

点赞数 2

分类专栏：前端知识点基础 vue HTML 文章标签： vue.js javascript 前端 vue

于 2022-01-24 20:57:36 首次发布

本文链接：https://blog.csdn.net/wanghe1111_/article/details/122674862

版权

前端知识点基础同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

经典面试题：谈一下对于vue指令的理解，如何封装一个指令

简单来说，vue指令就是为了实现某种特定功能比如按条件渲染、绑定属性等，而封装的一些指令，这样使用者就能够快速实现一些功能。

内置指令的使用

v-if:根据其后表达式的 bool 值进行判断是否渲染该元素
v-else:紧跟着v-if搭配使用

v-show:其后表达式的 bool 值为 false 时，对渲染的出标签添加display：none;的样式

v-for:v-for的用法: v-for="(item, index) in arr" ，类似于数组的用法，一般用:key来搭配v-for，key的值必须保证不同。key的作用：帮助vue区分不同的元素，提升vue的渲染性能。
v-bind:（缩写为:）:用于绑定某些属性，响应地更新 html 特性
v-on:(缩写为@):用于监听指定元素的 DOM 事件
v-once: v-once这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。

封装指令

主要就是采用Vue.directive(指令名，{})这个api来封装一个指令。

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<head>
    <title>自定义指令</title>
</head>
<style type="text/css">
</style>

<body>
    <div id="app">
        <!-- 自定义指令，使得网页一打开就让输入框有焦点 -->
        <input type="text" name="" v-focus="msg">
        <input type="text" name="" v-color='msg'>
        <input type="text" name="" v-background='msg1'>
        <input type="text" name="" v-font="msg1">
    </div>
    <!-- 引入vue库 -->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
            自定义指令：
                Vue.directive()
            */
        Vue.directive('focus', {
            //加入inserted属性，指：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
            inserted: function (el, binding) {
                //el表示指令所绑定的元素
                el.focus(); //focus()方法就是获取焦点
                el.value = binding.value.color;// binding.value为自定义指令传的值，注意这里传入的值必须是data数据里面的值
            }
        });
        //利用bind
        Vue.directive('color', {
            // bind属性，只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
            bind: function (el, binding) {
                el.style.color = binding.value.color; //binding为传入的绑定对象，binding.value的值为自定义指令的值
                console.log(binding);
            }
        });
        var vue = new Vue({
            el: '#app',
            data: {
                msg: {
                    color: "orange"
                },
                msg1: {
                    backgroundColor: 'blue',
                    color: "red",
                    fontSize: "30px"
                }
            },
            methods: {

            },
            //自定义局部指令
            directives: {
                background: function (el, bingding) {
                    el.style.backgroundColor = bingding.value.backgroundColor;
                    el.style.color = bingding.value.color
                },

                font: {
                    bind: function (el, bingding) {
                        el.style.fontSize = bingding.value.fontSize;
                    }
                }
            },
        });
    </script>
</body>

</html>