Custom command
In addition to the built-in instruction outside, Vue also allows custom instruction register. In some cases, you still need to perform operations on the underlying common DOM element, this time using a custom command more convenient.
The official document: https: //cn.vuejs.org/v2/guide/custom-directive.html
Global directive
Case: uppercase letters, color is red
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-upper-text="msg">xxxxx</p> </div> < Script > // Register Global custom instruction, this instruction can be used at a plurality of inlet Vue management // first parameter is the name of the command, but do not have v- beginning Vue.directive ( ' Upper-text ' , { // general operation of the pattern in the bind, bind function call only once bind: function (EL) { el.style.color = 'red' }, // General of js operation inserted in, is only called once inserted // EL element is the current directives of the Dom, // the Binding used to obtain the use of the current bound value (value) instruction, the expression (expression) instruction name (name) and the like inserted the: function (EL, Binding) { // all uppercase letters in a text content into el.innerHTML = binding.value.toUpperCase () } }) new view ({ on: ' #app ' , data: { msg: 'hello world' } }) </script> </body> </html>
Local instruction
Local instruction can only be used in the present vue example, if there is the id of div app2, shall not take effect
Case: Focus automatically obtain input box after refresh
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head > < body > < div ID = "App" > automatically obtains focus: < INPUT type = "text" V-Focus > </ div > <script> new view ({ on: ' #app ' , data: { message: 'hello world' }, // Register the local custom command: This command can only reference current at the inlet Vue instance management directives: { ' Focus ' : { // command name, the bind: function () { }, // refresh the page automatically gets the focus inserted The: function (EL, the Binding) { // is the element of v-focus effect after refresh the page will automatically gain focus el.focus () } } } }) </script> </body> </html>