自定义指令

<!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>
    <script src="../js/vue.js"></script>
    <style>
 
    </style>

</head>
<body>
   
    <div id="root"></div>
     
    <script>  
        //  directive
 
        //局部指令
        // const directives = {
        //     focus:{
        //         mounted(el){
        //             el.focus()
        //         }
        //     }
        // }
 
       var app = Vue.createApp({  
            data(){
                return {
                    hello:true
                }
            },
        //    mounted(){
        //     // <input ref="input" />
        //     //  this.$refs.input.focus()

        //    },
            // directives,
            template:`  
                <div>
                    <div v-if="hello">
                        <input v-focus />
                    </div>
                </div>  
            `,  

        })

        // 全局指令
        app.directive('focus',{
            beforeMount(el){
                console.log('beforeMount','beforeMount-el:',el);
            },
            mounted(el){
                console.log('mounted','mounted-el:',el);
                el.focus()
            },
            beforeUpdate(){
                console.log('beforeUpdate')
            },
            updated(){
               console.log('updated')
            },
            beforeUnmount(){
                console.log('beforeUnmount')
            },
            unmounted(){
                console.log('unmounted')
            }
        })

       const vm = app.mount('#root')

    </script>

</body>
</html>
 
------------------
<!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>
    <script src="../js/vue.js"></script>
    <style>
        .header{
            position: absolute;
        }
    </style>

</head>
<body>
   
    <div id="root"></div>
     
    <script>  
        // 自定义指令 directive
 
 
       var app = Vue.createApp({  
            data(){
                return {
                    top:120,
                    distance:110
                }
            },
         
            // template:`  
            //     <div>
            //         <div v-pos="top" class="header">
            //             <input/>
            //         </div>
            //     </div>  
            // `,
            template:`  
                <div>
                    <div v-pos:left="distance" class="header">
                        <input/>
                    </div>
                </div>  
            `,  

        })

        // 全局指令
        // app.directive('pos',{
        //     mounted(el,binding){
        //         el.style.top = binding.value + 'px'
        //     },
        //     updated(el,binding){
        //         el.style.top = binding.value + 'px'
        //     },
        // })

        // 简写
        // app.directive('pos',(el,binding) => {
        //     console.log(binding);
        //     el.style.top = binding.value + 'px'  
        // })

        app.directive('pos',(el,binding) => {  
            el.style[binding.arg] = binding.value + 'px'  
        })

       const vm = app.mount('#root')

    </script>

</body>
</html>
posted @ 2021-12-08 09:42  13522679763-任国强  阅读(25)  评论(0)    收藏  举报