前端VUE3.0,DAY28，vue自定义指令

最新推荐文章于 2022-07-18 22:20:58 发布

疯子的梦想＠

最新推荐文章于 2022-07-18 22:20:58 发布

阅读量124

点赞数

分类专栏：前端文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/weixin_48681463/article/details/120041064

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY28

自定义指令

1.自定义指令，即DOM元素需要自己进行操作，比如v-show是内嵌指令，背后有个display的DOM操作是vue帮我们操作了，那么自定义就是不用vue，人工进行操作DOM。

案例需求示范1

2.需求:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>当前的n值是<span v-text="n"></span></h2>
        <h2>放大10倍的n值是<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    n: 1

                }
            },
        })

    </script>
</body>

</html>

在这里插入图片描述

浏览器报错了，说big指令有问题，因为这是我们自定义的。注意一点，我们在起名的时候叫big，但是用的时候要用v-big。在这里插入图片描述
正确的代码编写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>当前的n值是<span v-text="n"></span></h2>
        <h2>放大10倍的n值是<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    n: 1
                }
            },
            //在directives中写自定义指令，起名叫big，不加v
            directives: {
                //写法一，写成函数的形式，但不能解决一些细节问题，写法简单
                //绑定获取的元素标签，即这里element应该指span标签，然后binding绑定big这个自定义指令
                big: function (element, binding) {
                    element.innerText = binding.value * 10
                    //innerText修改标签内的值，把获取的绑定的值乘以10。
                }
            }
        })

    </script>
</body>

</html>

在这里插入图片描述
注意：自定义的big函数何时被调用？
1.当指令与元素成功第一次绑定时。
2.指令所在的模板被重新解析时。

案例需求示范2

3.需求:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
4.下段代码是用对象式的写法，我们将自定义指令fbind对象式写法，是如何被调用的进行一个打印出来的显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>当前的n值是<span v-text="n"></span></h2>
        <h2>放大10倍的n值是<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr>
        <!--一上来就获取输入框的焦点-->
        <input type="text" v-fbind:value="n">
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    n: 1
                }
            },
            //在directives中写自定义指令，起名叫big，不加v
            directives: {
                //写法一，写成函数的形式，但不能解决一些细节问题，写法简单
                //绑定获取的元素标签，即这里element应该指span标签，然后binding绑定big这个自定义指令
                big: function (element, binding) {
                    element.innerText = binding.value * 10
                    //innerText修改标签内的值，把获取的绑定的值乘以10。
                },
                //写法二，对象的写法
                fbind:{
                    //bind是vue自带的，当指令与元素成功绑定时执行
                    bind() {
                        console.log('bind');
                    },
                    //指令所在的元素（标签）被插入页面时调用
                    inserted() {
                        console.log('inserted');
                    },
                    //指令所在的模板被重新解析时调用
                    update() {
                        console.log('updata');
                    },
                    // element.value = binding.value
                    // element.focus()
                }
            },
        })

    </script>
</body>

</html>

刚一进页面，没有聚焦到输入框，可以看到打印输出了bind和instred。
在这里插入图片描述
点击鼠标后，发现出现update。

那么我们验证了代码中bind、instred、update的运行顺序。所以依次在这三个函数内添加内容，就可以实现自定义函数fbind的细节。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2>当前的n值是<span v-text="n"></span></h2>
        <h2>放大10倍的n值是<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr>
        <!--一上来就获取输入框的焦点-->
        <input type="text" v-fbind:value="n">
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    n: 1
                }
            },
            //在directives中写自定义指令，起名叫big，不加v
            directives: {
                //写法一，写成函数的形式，但不能解决一些细节问题，写法简单
                //绑定获取的元素标签，即这里element应该指span标签，然后binding绑定big这个自定义指令
                big: function (element, binding) {
                    element.innerText = binding.value * 10
                    //innerText修改标签内的值，把获取的绑定的值乘以10。
                },
                //写法二，对象的写法
                fbind: {
                    //bind是vue自带的，当指令与元素成功绑定时执行
                    bind(element, binding) {
                    //给获取的标签绑定值
                        element.value = binding.value
                    },
                    //指令所在的元素（标签）被插入页面时调用
                    inserted(element, binding) {
                        //聚焦页面输入框
                        element.focus()
                    },
                    //指令所在的模板被重新解析时调用
                    update(element, binding) {
                        element.value = binding.value
                        element.focus()
                    },
                    // element.value = binding.value
                    // element.focus()
                }
            },
        })

    </script>
</body>

</html>

在这里插入图片描述

总结

自定义指令两种不同写法，分别是函数形式和对象形式。

疯子的梦想＠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端VUE3.0,DAY28，vue自定义指令

VUE3.0,DAY28自定义指令案例需求示范1案例需求示范2总结自定义指令1.自定义指令，即DOM元素需要自己进行操作，比如v-show是内嵌指令，背后有个display的DOM操作是vue帮我们操作了，那么自定义就是不用vue，人工进行操作DOM。案例需求示范12.需求:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。<!DOCTYPE html><html lang="en"><head> <meta c
复制链接

扫一扫

专栏目录