可复用技术之2-指令directive

最新推荐文章于 2021-08-18 15:36:24 发布

bling flower

最新推荐文章于 2021-08-18 15:36:24 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/C05230/article/details/108920891

版权

使用原因：想要进行一些dom操作
使用方式：通过 v-name来进行使用
全局指令：

 Vue.directive('name',{
    钩子函数
          bind(el,binding,vnode,oldVnode){}   //指令绑定之后执行，只绑定一次
          inserted(el){el.focus()}    //插入之后，实现页面刷新自动聚焦
          update      //当所在组件的内容发生改变时调用
          componentUpdated
          unbind    //只调用一次
      参数：
          el:当前指令绑定的dom元素
          binding:对象，指令的详细参数
          vnode:虚拟节点(返回值是对象)
          oldVnode:原始的虚拟节点，仅在update或componentUpdated中使用

        })

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script>
        window.onload=function(){
            //全局指令
            Vue.directive('myfocus', {
                bind(el,binding,vnode,oldVnode){
                    console.log(vnode)
                }, 
                inserted(el){
                    el.focus();  //实现input输入框聚焦
                }
            })
            Vue.directive('mychange',{
                bind(el,binding,vnode,oldVnode){
                    console.log(binding)

                    el.innerHTML=binding.value  //将value值替换掉hello
                }, 
                
            })
            var app=new Vue({
                el:'#app',
                data:{
                    value:'lisi'
                },
                methods:{

                },
                components:{
                    
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <h1 v-mychange='value'>hello</h1>    //注：value是vue实例中的data中的变量,将value给binding
        <input v-myfocus type="text" v-model='value'>
    </div>
</body>
</html>

局部指令:
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script>
        window.onload=function(){
            var app=new Vue({
                el:'#app',
                data:{
                    str:'当然是小仙女啦'
                },
                methods:{},
                components:{},
                directives:{
                    'myfocus':{
                        inserted(el,binding,vnode,oldVnode){
                            el.focus()
                        },
                        update(el,binding,vnode,oldVnode) {
                            console.log(binding)
                        },

                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        {{str}}
        <input type="text" v-myfocus='str' v-model='str'>
    </div>
</body>
</html>

bling flower

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可复用技术之2-指令directive

使用原因：想要进行一些dom操作使用方式：通过 v-name来进行使用全局指令： Vue.directive('name',{ 钩子函数 bind(el,binding,vnode,oldVnode){} //指令绑定之后执行，只绑定一次 inserted(el){el.focus()} //插入之后，实现页面刷新自动聚焦 update //当所在组件的内容发生改变时调用 component
复制链接

扫一扫