<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> Custom directive </title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3 v-hello>{{msg}}</h3> <button @click="change()"> </button> <h3 V-world :wbs888="username">{{MSG}}</h3> <input type="text" v-model=" MSG" V-focus > </div> <script> El,binding vue. directive('hello',{bind(el,binding){// Bind (el,binding){// bind(el,binding){// bind(el,binding){// // console.log(el); // The element to which the directive binds, DOM object el.style.color='red'; console.log(binding); //name console.log('bind: called when the directive is first bound to an element, only once, initialization can be performed '); {console.log(el) // binding. Arg: argument to the instruction console.log('inserted: called when the bound element is inserted into the DOM '); }, update(el,binding){console.log(el) console.log('update: this is called when the template to which the element is bound is updated '); }, componentUpdated(el,binding){console.log(el) console.log('componentUpdated: called when the template to which the element is bound completes an update cycle '); }, unbind(el,binding){console.log('unbind: call once when directive and element are unbound '); }}); Bind update hook function to vue. directive('world',function(el,binding){console.log(binding); // Bind update hook function to vue. directive('world',function(el,binding){console.log(binding); }) var vm=new Vue({el:'#app', data:{MSG :'welcome to app', username:' Alice '}, methods:{change(){this. MSG = 'hello '; {// Define local directives focus:{bind(el,binding){// Data is not yet render}, // Call inserted(EL,binding){el.focus() when the bound element is inserted into the DOM; }}}}); </script> </body> </html>Copy the code

Here’s a quick example

Encapsulate the function of the cartridge box and drag function

      function initPopHtml(title,html){  
            var popOut = document.getElementById('popOut');if(popOut) {
                    return;
                }              
                    var popOut = document.createElement('div');
                    popOut.id='popOut';
                    popOut.className = 'pop-out';

                    var innerText = `
                        <div class="heaad-title">${title}</div>
                        <div class="pop-inner">${html}</div> <div class="footer"><button type="button" class="btn-close" id="btnClose"> Close </button></div> ';
                        popOut.innerHTML = innerText;

                        document.querySelector('body').appendChild(popOut);
                        toMoveDrag(popOut);
                        document.getElementById('btnClose').addEventListener('click'.() = >{
                            popOut.remove();
                        });     
                }

            function toMoveDrag(boxDom){
                var moveFlag = false;
                var dis={};
                boxDom.querySelector('.heaad-title').onmousedown = function(e){
                    moveFlag=true; 
                    // Calculate the distance between the mouse drop point and the boundary
                    dis.x = e.clientX - boxDom.offsetLeft;
                    dis.y = e.clientY - boxDom.offsetTop;
                }
                document.onmousemove = function(e){              
                    if(! moveFlag) {return;
                    };
                    console.log(e.clientX);
                    // Sets the position of the current drag element based on the drag distance
                    boxDom.style.left = (e.clientX - dis.x) + 'px';
                    boxDom.style.top = (e.clientY - dis.y) + 'px';
                };
                document.onmouseup = function(e){
                    moveFlag=false; }}Copy the code

Instruction writing


  directives: {popwin: {bind(el,binding){
                el.onclick = function(){
                    // binding.value: Data for the list
                    
                    var data = binding.value;
                    var listUl = [];
                    listUl.push(`<ul class='user-list'>`)
                    data.forEach((item,index) = >{
                        console.log(item);
                        listUl.push(` < li > < span > name:${item.name}< / span > < span > age:${item.age}</span></li>`)
                    })
                    listUl.push(`</ul>`);
                    initPopHtml(el.innerText,`<div class="content">${listUl.join(' ')}</div>`); }},inserted(el,binding){},update(){},componentUpdated(){}}}Copy the code

2.4 Use Instructions

 <button type="button" v-popwin="teacherlist"</button><button type="button" v-popwin="studentlist">Student Information List</button>
Copy the code