Detailed explanation of basic instructions and custom instructions for form data collection cases of vue

1. The core attributes of vue

1. Collect form data

1.1. Collect data cases

You can use this v-model to achieve binding of this data, but in some input boxes, some other instructions are needed to be used in combination with this v-model instruction.

1.1.1, type type input box

In this way, the input box can be directly obtained through this v-model. becausev-model is to collect the value value of the input box by default

account：<input type="type" v-model = ""> <br/><br/>
password：<input type="type" v-model = ""> <br/><br/>

<!-- vueIn the exampledatadata -->
 data:{
	userInfo:{
     	account:'',
         possword:''
     }
 }

1.1.2, radio box of type radio

It is different from the type above, because the text type above has an input value, while the data of this type has no input value, only a single-select value, so you need to add this value inside this label to get the selected value.

gender：
male<input type="radio" name="sex" v-model = ""  value="male">
female<input type="radio" name="sex" v-model = "" value="female"> <br/><br/>
    
<!-- vueIn the exampledatadata -->
 data:{
	userInfo:{
     	sex:''
     }
 }

1.1.3, checkbox type checkbox

In this check box, as it is the same as this radio box, there is only selection and no specific input of this value value, so you need to add this value inside the tag. In addition to adding this value value inside the tag, you also need to receive the value selected by this check box through an array in the data of the vue instance.

Hobby:
study<input type="checkbox" v-model = "" value="study">
sports<input type="checkbox" v-model = "" value="sport">
Play games<input type="checkbox" v-model = "" value="games">  <br/><br/>

<!-- vueIn the exampledatadata -->
 data:{
	userInfo:{
     	hobby:[]
     }
 }

If the check box does not have this value, then the essence of the check is a Boolean property. If you need to check the precautions, this value may not be needed, and the value received in the data is also a Boolean value.

<input type="checkbox" v-model = ''>Accept and subscribe

<!-- vueIn the exampledatadata -->
 data:{
	userInfo:{
     	agree:''
     }
 }

1.1.4, select type drop-down box

Since this is also a selection box, no specific data is entered, so the value value needs to be configured in the option. And the data data in the vue instance can be received using a string.

Region：
<select v-model="">
    <option value="">请选择Region</option>
    <option value="Jiangxi">Jiangxi</option>
    <option value="Guangdong">Guangdong</option>
    <option value="Guizhou">Guizhou</option>
    <option value="Guizhou">Hunan</option>
</select> <br/><br/>

<!-- vueIn the exampledatadata -->
 data:{
	userInfo:{
     	city:''
     }
 }

1.2. Collect form data summary

text

If the input box is a text attribute, the value collected by v-model is the value value, and the value entered by the user is the value value.

<input type = "text">

radio

If the input box is a radio box, then the v-model collects the value value, and the value value needs to be configured in the tag.

<input type = "radio">

checkbox

If the input box is a check box, it needs to be discussed in different situations.

1. If the value attribute is not configured in the input, then the collected checked is whether to check, which is a boolean value.

2. If there is a property with the value configured in the input input box:

(1). If the initial value in data is a non-array, such as a string, then the collected boolean value is also checked.

(2).If the initial value in data is an array, then the collected array consisting of value is an array composed of values

1.3, three modifiers of v-model

lazy

It means that data is collected without focus. As follows, when entering data in the text box, there is no need to collect data based on user input or delete in real time. Instead, when clicking on other components and losing focus, it will collect all data.

 <textarea =""></textarea> <br/><br/>

number

The input string is converted into a valid number. For example, when entering the user's age or phone number, if the backend does not check whether this is all numbers, then you can check it through this command. This instruction is usually used with the number type of this input box

age：<input type="number"  = ""> <br/><br/>

trim

Finish the input data and remove spaces. In actual development, if the backend does not promptly despace the data transmitted from the frontend, it can also deduplicate the data through this instruction on the frontend.

account：<input type="type"  = ""> <br/><br/>

2. Instructions

2.1, Basic Instructions

There are many directives that can be used directly in vue, such as some frequently used instructions, as follows

v-bind：One-way binding			v-model：Two-way binding 			v-for：Iterate through the array			v-on：Listen to events
v-if：Conditional Rendering(Control the existence of nodes)		v-show：Conditional Rendering(Control whether the node is displayed)		v-else：Cooperatev-ifuse

In addition to the frequently used basic instructions above, vue also provides many other instructions.

2.2.1，v-text

It can be used directly in the tag, and the text content will be rendered at the node where the tag is located.

<div v-text = "name"></div>
<div>{{name}}</div>
<!-- vueIn the exampledatadata -->
data:{
	name:'zhs'
}

However, when using this tag, v-text will replace the content of the entire node. If you use {The interpolation syntax of {}} will obtain the value, and it will not be replaced, so use it directly{{}}It is more flexible to get values.

However, if the entire node only has that value in the data, such as the above only has the name value, then v-text and this interpolation syntax are equivalent. If there are other values ​​in the node, then this v-text is not recommended. As follows, if there are two words "Hello" in the node, you cannot use v-text, but you need to use the following double curly braces interpolation syntax to get the value.

<div v-text = "name"></div>
<div>Hello，{{name}}</div>

Similarly, this node will not parse the value containing the tag in the data data. As follows, if the value in the instance is a value containing a label, when using v-text, the value of this str will be directly rendered in the node in the form of text, without parsing the label inside.

<div v-text = "str"></div>
<!-- vueIn the exampledatadata -->
data:{
	str:"<h3> Hello!</h3>"
}

2.2.2，v-html

This v-html is used the same as this v-text text, and can replace the content of the entire node. But the difference from v-text is that v-html can parse the content in data data in html. If the string in the data has html tags, then these tags will be parsed directly.

<div v-text = "str"></div>
<!-- vueIn the exampledatadata -->
data:{
	str:"&lt;a href = ""> Click me to jump to Baidu</h3>"
}

However, when using this v-html, it will have certain security problems. If you render html dynamically on the website, it will easily lead to XSS attacks. Therefore, you must use v-html on trusted content.

2.2.3，v-clock

This instruction is a command with no value. If the network speed is slow, the vue instance loads slowly, so that the html page is loaded normally on the page, allowing users to see some unloaded unfriendly pages, you can use this v-clock.

v-clock is generally used with the attribute style in this css. If the network speed is slow, this result is{name}} is directly rendered on the page in text. You can use the display property first to temporarily hide the corresponding html content. After loading it into the vue instance, the v-clock instruction will be deleted, and the display cannot be used, so the corresponding value of this name will be displayed normally.

<style>
    //Only the v-clock attribute has the following style	[v-clock]{
    	display:none;
	}    
</style>
<div id = "root">
	<h1 v-clock>{{name}}</h1>
</div>
<!-- vueIn the exampledatadata -->
data:{
	name:'zhs'
}

2.2.4，v-once

This instruction is also an instruction without a value. After the value is used in the tag, the first rendering of this value is a dynamic instruction. After the value is rendered, the content will become a static content. When the data changes in the future, the result where the v-once is located will not be updated.

<div id = "root">
	<h1 v-once>The initial value is：{{n}}</h1>
    <h1>currentnThe value of：{{n}}</h1>
    <button @click="n++">Click men+1</button>
</div>
<!-- vueIn the exampledatadata -->
data:{
	n:1
}

2.2.5，v-pre

This node also has no value. If this instruction is added to the node, then vue will skip the compilation process of the node, which will directly render the content written by the developer on the node on the page. Therefore, it is best not to add this instruction randomly. However, by adding this instruction, you can speed up compiling some nodes that do not use the instruction syntax and interpolation syntax faster.

The first h1 tag below is plain text and has nothing to do with the vue instance. Therefore, in order to speed up compilation, you can directly use this v-pre directive.

<div id = "root">
	<h1 v-pre>vueIt's actually very simple</h1>
    <h1>currentnThe value of：{{n}}</h1>
    <button @click="n++">Click men+1</button>
</div>
<!-- vueIn the exampledatadata -->
data:{
	n:1
}

2.2, custom commands

2.2.1, Functional custom directives

It is to customize some instructions that do not exist in vue. They can be implemented through this directives in vue instances. They are on the same level as data, and they implement this custom command by defining functions. You do not need to add v- when defining functions, but you need to add it when using them.

Assume a requirement, define av-bigThe function of the command is similar to that of v-text, but it will enlarge the bound value by 10 times. The completed code implementation is as follows:

<div >
    <h1>The value of the current element is：<span v-text = "n"></span></h1>
    <h1>enlarge10The value after the times is：<span v-big = "n"></span></h1>
    <button @click="n++">Click men+1</button>
</div>

<script type="text/javascript" >
     = false    //Production prompts when preventing vue from starting    new Vue({
        //Specify which container service the current instance is. The id corresponds to #, class corresponds. el:'#root',        //Data is used to store data, only the container corresponding to el can be used        data:{
            n:1
        },
        directives:{
            // element: a real dom element span            // binding: the binding between the tag and the element, that is, the binding between the span and this big            big(element,binding){
                //Modify the value in the element                 =  * 10;
                (element,binding)
            }
        }
    })
</script>

And there are two times when the big function is called

1: When the command is successfully bound to the element, it is the first time it is used.

2: The template where the instruction is located is called when it is re-parsed, such as data changes

2.2.3, object-based custom directives

Another requirement is to customize a v-fbind directive, which is similar to v-bind function, but can allow the input element it binds to get the focus by default.

<div >
    <input type="text" v-fbind:value = "n">
</div>

<script type="text/javascript" >
     = false    //Production prompts when preventing vue from starting    new Vue({
        //Specify which container service the current instance is. The id corresponds to #, class corresponds. el:'#root',        //Data is used to store data, only the container corresponding to el can be used        data:{
            n:1
        },
        directives:{
            fbind:{
                //When the directive and element are successfully bound                bind(element,binding){
                     =  * 10
                },
                //When the element where the instruction is located is inserted into the page                inserted(element,binding){
                    ();
                },
                //The template where the instruction is located is called when it is re-parsed                update(element,binding){
                     =  * 10
                }
            }
        }
    })
</script>

From the above two paragraphs, we can find that the writing of this functional formula is the abbreviation of the object formula. Since the two functions binding and update do basically the same thing, you only need to write one copy in the functional formula. This inserted is to solve the problem that the command has bound the element, but the element is still in memory and has not been applied to the page.

2.2.3, Global Instructions

The above two mainly talk about local instructions in vue instances. If multiple instances need to use this instruction, it can be defined as global instructions.

Functional global directives

//(Instruction name, callback function)("big",function(element,binding){
   //Modify the value in the element    =  * 10;
   (element,binding)
)

Object-based global instructions

//(Instruction name, configuration object)("fbind",fbind:{
    //When the directive and element are successfully bound    bind(element,binding){
         =  * 10
    },
    //When the element where the instruction is located is inserted into the page    inserted(element,binding){
        ();
    },
    //The template where the instruction is located is called when it is re-parsed    update(element,binding){
         =  * 10
    }
})

This allows global instruction configuration to be implemented, and its underlying principle is the same as that of filters.

This is the article about Vue's form data collection, basic instructions and custom instructions. For more related Vue's basic instructions and custom instructions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!