Form operation

Form scope modifier

1. Number: converts the form value to a number

data:{
	inputmsg:'123'
}
<input type=text v-model.number="inputmsg">//The value of this form is output as data

1. trim: remove spaces at the beginning and end of the form

data:{
	inputmsg:'   123  '
}
<input type=text v-model.trim="inputmsg">//The value of this form is' 123 ', without spaces

1. lazy: switch input event to change event (trigger only when cursor is lost)

data:{
	inputmsg:123
}
<input type=text v-model.lazy="inputmsg">//When the form is input, the data in the corresponding data will not change immediately, but will change when the mouse leaves

input single line text box

data:{
	inputmsg:'Single line text'
}
<input type=text v-model="inputmsg">//This binds the input values in both directions

textarea multiline text box

data:{
	textareamsg:'Single line text'
}
<textarea type=text v-model="textarea"></textarea>//In this way, the value of textarea is bound in both directions

select drop-down list

1. single election

data:{
	select:1//Variable corresponds to the item selected by default, single variable definition
}
<select v-model="select">//Bind data in both directions on select
	<option value="0">0</option>//Each option is distinguished by value, which is also used to associate the corresponding binding variables.
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>

1. more choices

data:{
	select:['0']//If select is multiple, you need to define an array. The value in the array corresponds to the value item in the selected option
}
<select v-model="select" multipel='true'>//Bind data in two directions on select. The multipel property sets select to multi select
	<option value="0">0</option>//Each option is distinguished by value, which is also used to associate the corresponding binding variables.
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>

Radio radio box

data:{
	msg: 1 //The variable corresponds to the item selected by default,
}
	//male<input type="radio" name="sex" value="0" v-model="msg">//The radio boxes of the same group are bound to the same variable, and value is used as the distinction
    //female<input type="radio" name="sex" value="1" v-model="msg">

checkbox check box

data:{
	arr:["2",'1'] //The data bound to the check box is an array. The values in the array correspond to the option to select the corresponding check box.
}
	//eat<input type="checkbox" name="checkbox" value="1" v-model="arr">//The radio boxes of the same group are bound to the same variable, and value is used as the distinction
	//drink<input type="checkbox" name="checkbox" value="2" v-model="arr">
	//play<input type="checkbox" name="checkbox" value="3" v-model="arr">
	//Happy<input type="checkbox" name="checkbox" value="4" v-model="arr">

directive custom instruction

1. Global custom instruction
   Define the custom instruction outside the vue instance, which can be used by all components.

Vue.directive('focus',{//Focus is the name of the user-defined instruction. You need to add V - to the reference. Such as: v-focus
	inserted:function(el,binding){//inserted is the hook function of the user-defined instruction, el is the element calling the instruction, and it is the native html element. binding parameter, which can be left blank, as follows
	//inserted:function(el){//inserted is the hook function of the custom instruction, el is the element of the calling instruction, and is the native html element
	el.focus();//Focus of attention
	console.log(binding)//Parameters can be output
	}
})
//Quote
data:{
	msg:123
}
<input type='text' v-focus="msg">
<input type='text' v-focus >

1. Local custom instruction
   **The local custom instruction is defined in the directives parameter in the vue instance; it can only be used in its own components; * * as follows:

const vm = Vue({
	data:{}
	directives:{//Custom instructions. Others are the same as global instructions.
		focus:{
		inserted:function(el,binding){//inserted is the hook function of the user-defined instruction, el is the element calling the instruction, and it is the native html element. binding parameter, which can be left blank, as follows
			//inserted:function(el){//inserted is the hook function of the custom instruction, el is the element of the calling instruction, and is the native html element
		el.focus();//Focus of attention
		console.log(binding)//Parameters can be output
	}
		}
	}
})
//Same usage as global instruction

Calculated calculation properties

The calculated attributes can depend on the data, and the data does not need to be re rendered. Based on data rendering in data
Add the computed parameter to the vue instance;

data:{msg:123}
computed: {
	computed1:  function(){//computed1 is the name of the calculation attribute, and the reference can directly refer to the name. Just like variables in data.
		return this.msg.split('').reverse().join('')//The calculation property needs to return the calculation result by return.
	}
}
//Quote
<div>{{computed1}}</div>//The result is 321

	Difference between computed and methods methods methods.
	computed: there will be a cache. When the data in the data remains unchanged, it will not be re rendered.
	methods: there is no cache, and the function will be called again every time.

watch listener

	**Handle some asynchronous and expensive events**
	Add the watch parameter to the vue instance

data:{
	firstname:123,
	lastname:453,
	fullname:'123 453'
},
watch:{
	firstname: function(val){//Firstname is the data in the data to be monitored, val is the latest value of firstname
		this.fullname = val+' '+this.lastname;//When the monitored variable changes, perform the corresponding operation.
	},
	lastname: function(val){//lastname is the data in the data to be monitored, val is the latest value of lastname
		this.fullname = this.firstname+' '+val;//When the monitored variable changes, perform the corresponding operation.
	},
}

Filter filter

Data formatting, such as capitalization of the initial of a string.

Definition

Global definition. It is defined outside the vue instance, similar to the custom instruction, and can be used by all components. as

//The filter can carry parameters, starting from the second bit, such as
//**Vue.filter('filtername',function(value,arg1, arg2){//arg is the parameter passed by the filter**
Vue.filter('filtername',function(value){//filtername is the name of the filter, and value is the data that calls the filter.
	//Filter business logic
	return value.charAt(0).toUpperCase()+value.slice(1)
	//The first letter in charAt(0) data, toUpperCase to uppercase, toLowerCase to lowercase, slice from the second bit
})

Local filter. Add the filters parameter in the Vue instance to define the filter in the parameter, which is only valid in this component. as

data:{msy:asd},
filters:{
//The filter can carry parameters, starting from the second bit, such as
//**filtername: function(value,arg1, arg2){//arg is the parameter passed by the filter**
	filtername: function(value){
		return value.charAt(0).toUpperCase()+value.slice(1)
	}
}

usage

//It can be directly used in interpolation expressions, such as:
	//Usage of parameter passing, < div > {MSG | filtername (arg1,arg2)}} < / div >
	<div>{{msg | filtername}} </div>
	//The filter supports multiple functions, such as:
	<div>{{msg | filtername1 | filtername2}} </div>
	//It can also be used in property binding, such as:
	//The usage of parameter passing, < div: id = "MSG | filtername (arg1, arg2)" >
<div :id="msg | filtername"> </div>

life cycle

These methods are the same as method and data.

Main stage

**Mount (initialize related properties)**

1. beforeCreate / / called after instance initialization, before data observation and event configuration
2. Created / / called immediately after the instance is created.
3. beforeMout / / called before the mount starts
4. mouted //el is replaced by the newly created vm.$el. After mounting it to an instance, the hook is called. The function indicates that the initialization is complete. usage

mounted: function(){
	//operation
}

Update (change operation of element or component)
6. beforeUpdate / / called when updating data, which occurs before virtual DOM patching
7. updated / / if the virtual DOM is re rendered and patched due to data update, the hook will be called after that
Destroy (destroy related properties)

1. Call before beforeDestroy / / instance destruction
2. After destroyed / / instance destruction, call