Vue custom command directive instance details, vuedirective

Vue custom command directive instance details, vuedirective

The following describes the vue custom command directive. The specific content is as follows:

 

Official Website instances

In addition to some core internally defined commands (v-model,v-if,v-for,v-showIn addition, vue also allows users to register some of their own functional commands. Sometimes you really want to operate on the Dom, which is the most suitable for custom commands.

Let's take a look at the example: When a page is loaded, the element gets the focus (autofocus is not supported in mobile Safari), that is, when the page is loaded, the form automatically gets the focus without any operation, the code of the cursor automatically on a form is as follows:

Vue. directive ('zsqfocal s', {// register a global custom command 'v-zsqfocal ', in main. in the js file, inserted: function (el) {// automatically calls el when the bound element is inserted into the DOM. focus () // focus element }})

If you want to register a local command, the component also accepts a direves ves option:

<Script> export default {direves ves: {// command definition zsqfocus: {inserted: function (el) {// get focus el. focus () }}</script>

Then you can use the new v-zsqfocus attribute on any component in the template, as shown below:

<Template> <input v-zsqfocus/> // call </template>

Taking the same example as the official website, directives and methods and mounted can be used at the same level at the same time.

PS: Let's take a look at the instance code of vue's custom directive. The specific code is as follows:

<Template> <div> <input v-model = "dir1" v-my-directive1 = "dir1"/> <input v-model = "dir2" v-my-directive2 = "dir2"/> </ div> </template> <script> export default {data () {return {dir1: '', dir2:''}, directives: {// bind the function directly. The function is equivalent to update, and does not prepare for the job or scan the job. myDirective1 (val) {console. log (val)}, myDirective2: {bind () {// preparations for first binding to elements}, update (val, old) {// call the update console immediately after being bound to an element with an initial value. The update console is called every time example2 changes. log (val)}, unbind () {// cleaning before destruction }}}</script>

Summary

The above is a detailed description of the vue custom command directive instance provided by Alibaba Cloud. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!