Vue custom command directive instance details, vuedirective

Source: Internet
Author: User

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>


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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.