1, Collect form data

1. If: < input type = "text" / >, the v-model collects the value value and the user inputs the value value.

   account number:<input type="text" v-model.trim="userInfo.account"> <br/><br/>
   password:<input type="password" v-model="userInfo.password"> <br/><br/>

2. If: < input type = "radio" / >, the v-model collects the value value, and the value value should be configured for the tag.

   male<input type="radio" name="sex" v-model="userInfo.sex" value="male">
   female<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>

3. If: < input type = "checkbox" / >

   //1. If the value attribute of input is not configured, what is collected is checked (checked or unchecked, Boolean value)
   <input type="checkbox" v-model="userInfo.agree">Read and accept<a href="http://www.atguigu. Com "> User Agreement</a>
   
   agree:''
   
   
   //2. Configure the value attribute of input: (1) if the initial value of V-model is a non array, what is collected is checked (checked or unchecked, Boolean value);(2)v-model If the initial value of is an array, what is collected is value Array of
   study<input type="checkbox" v-model="userInfo.hobby" value="study">
   Play games<input type="checkbox" v-model="userInfo.hobby" value="game">
   having dinner<input type="checkbox" v-model="userInfo.hobby" value="eat">
   
   hobby:[]
   

   　　

4. Note: three modifiers of v-model: (1) lazy: collect data after losing focus; (2) Number: convert the input string into a valid number; (3) trim: enter the leading and trailing spaces to filter

2, Filter

1. Definition: display the data to be displayed after specific formatting (applicable to some simple logic processing).
2. use:

   <div id="root">
   	<h2>Displays the formatted time</h2>
   	<!-- Calculation attribute implementation -->
   	<h3>Now:{{fmtTime}}</h3>
   	<!-- methods realization -->
   	<h3>Now:{{getFmtTime()}}</h3>
   	<!-- Filter implementation -->
   	<h3>Now:{{time | timeFormater}}</h3>
   	<!-- Filter implementation (parameter transmission) -->
   	<h3>Now:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>    //Filters can also receive additional parameters, and multiple filters can also be connected in series

   	<h3 :x="msg | mySlice">Rice, rice</h3>
   </div>
   
   <div id="root2">
   	<h2>{{msg | mySlice}}</h2>
   </div>
   
   <script type="text/javascript">
   Vue.config.productionTip = false
   //Global filter
   Vue.filter('mySlice',function(value){
   	return value.slice(0,4)
   })
   		
   new Vue({
   	el:'#root',
   	data:{
   		time:1621561377603, //time stamp
   		msg:'Hello, fan, fan'
   	},
   	computed: {         //Calculation attribute implementation
   		fmtTime(){
   			return dayjs(this.time).format('YYYY year MM month DD day HH:mm:ss')
   		}
   	},
   	methods: {          //methods implementation
   		getFmtTime(){
   			return dayjs(this.time).format('YYYY year MM month DD day HH:mm:ss')
   		}
   	},
   	//Local filter
   	filters:{
   		timeFormater(value,str='YYYY year MM month DD day HH:mm:ss'){
   			return dayjs(value).format(str)
   		}
   	}
   })
   
   new Vue({
   	el:'#root2',
   	data:{
   		msg:'hello,fanafan!'
   	}
   })
   </script>
   

3, Built in instruction

1. Instructions learned at present:
   v-bind: one way binding parsing expression, which can be abbreviated as: xxx
   v-model: bidirectional data binding

   v-for: traversing arrays / objects / strings

   v-on: binding event listening, which can be abbreviated to@

   v-if: conditional rendering (whether dynamic control nodes exist)

   v-else: conditional rendering (whether dynamic control nodes exist)

   v-show: conditional rendering (whether dynamic control nodes are displayed)
2. v-text instruction: renders text content to its node.

   <div v-text="name"></div>
   
   data:{
   	name:'Rice, rice'
   }
   

3. v-html instruction: render the content containing HTML structure to the specified node.
   V-html has security problems!!!! It is very dangerous to dynamically render arbitrary HTML on the website, which is easy to lead to XSS attack. Be sure to use v-html on trusted content and never on content submitted by users!
4. V-cloak instruction (no value): (1) it is essentially a special attribute. After the Vue instance is created and takes over the container, the v-cloak attribute will be deleted. (2) Using css and v-cloak can solve the problem of {xxx}} displayed on the page when the network speed is slow.

   <div id="root">
   	<h2 v-cloak>{{name}}</h2>
   	</div>
   	<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
   

5. V-once instruction: (1) after the initial dynamic rendering, the node where v-once is located is regarded as static content. (2) Future data changes will not cause the update of the structure of v-once, which can be used to optimize performance.
6. v-pre instruction: skip the compilation process of its node. It can be used to skip: nodes that do not use instruction syntax or interpolation syntax will speed up compilation.