1、 What is two-way data binding

Vue.js It's a MV VM frame , That is, two-way data binding , That is, when the data changes , The view changes , When the view changes , The data will also change synchronously . This is also a Vue.js It's the essence of .
   It is worth noting that , What we call data bidirectional binding , It must be for UI Control , Not UI Control does not involve data bidirectional binding . One way data binding is a prerequisite for using state management tools . If we use vue x So the data flow is also single , There will be conflicts with bidirectional data binding .

1.1、 Why do you want to achieve two-way binding of data

stay Vue.js in , If you use vuex, In fact, the data is one-way , The reason is that the data is bi-directional binding , This is for UI Controls , For us to deal with forms , Vue.js Two way data binding is very comfortable to use . That is, they are not mutually exclusive , Use single items in global data streams , Easy to track ; Local data flow using bidirectional , Easy to operate .

2、 Using bidirectional data binding in forms

You can use it. v-model Instruction in form 、 And elements . It automatically selects the correct method to update the element based on the control type . Even though it's magical , but v-model It's just grammar sugar in essence . It listens for user input events to update data , In addition, some special treatment is carried out for some extreme scenes .
   Be careful :v-model All form elements will be ignored valuecheckedselected The initial value of the property and always Vue Instance data as data source . You should go through JavaScript In the component's data Initial value declared in option !

2.1、 Single line text

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"> Text entered :<input type="text" v-model="message" value="hello">{{message}}</div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",data:{message:""}});</script></body></html>

2.2、 Multiline text

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"> Multiline text :<textarea v-model="pan"></textarea>&nbsp;&nbsp; Multiline text is :{{pan}}</div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",data:{message:"Hello hello!"}});</script></body></html>

2.3、 Single check box

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"> Single check box :<input type="checkbox" id="checkbox" v-model="checked">&nbsp;&nbsp;<label for="checkbox">{{checked}}</label></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",data:{checked:false}});</script></body></html>

2.4、 Multiple check boxes

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"> Multiple check boxes :<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">&nbsp;&nbsp;<label for="jack">Jack</label><input type="checkbox" id="join" value="Join" v-model="checkedNames">&nbsp;&nbsp;<label for="join">Join</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames">&nbsp;&nbsp;<label for="mike">Mike</label><span> Selected value :{{checkedNames}}</span></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",data:{checkedNames:[]}});</script></body></html>

2.5、 Radio button

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"> Radio button <input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><span> Selected value :{{picked}}</span></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",data:{picked:'Two'}});</script></body></html>

2.6、 A drop-down box

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><!--     Gender :
<input type="radio" name="sex" value=" male " v-model="pan"> male 
<input type="radio" name="sex" value=" Woman " v-model="pan"> Woman 
<p> Selected :{{pan}}</p>--> A drop-down box :<select v-model="pan"><option value="" disabled>--- Please select ---</option><option>A</option><option>B</option><option>C</option><option>D</option></select><span>value:{{pan}}</span></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",data:{pan:"A"}});</script></body></html>

Be careful :v-model The initial value of the expression failed to match any options , The meta system will be rendered as “ Not selected ” state . stay iOS in , This prevents the user from choosing the first option , Because in this case ,iOS Not trigger change event . therefore , It is more recommended to provide a disable option with a null value like above .

3、 What is a component

  • Components are reusable Vue example , To put it bluntly, it's a set of reusable templates , Follow JSTL Custom labels for 、Thymeleal Of th:fragment The same is true of equal frames , Usually an application is organized as a nested component tree :

    [ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-Hd7IIJq2-1601903559165)(04 Form double binding 、 Components .assets/1595251605760.png)]

  • for example , You may have a header 、 Sidebar 、 Content area and other components , Each component also contains other links like navigation 、 Components like blogs .

3.1、 first Vue Components

Be careful : In actual development , We don't develop components in the following way , instead vue-cli establish ,vue Template file development , The following methods are just for you to understand what components are .
   Use Vue.component() Method registration component , The format is as follows :

<div id="app"><pan></pan></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">// Register components first Vue.component("pan",{template:'<li>Hello</li>'});// Re instantiate Vuevar vm = new Vue({el:"#app",});</script>

explain :

  • Vue.component(): Certified components
  • pan: Name of custom component
  • template: Templates for components

3.2、 Use props Property passing parameters

There's no point in using components like above , So we need to pass parameters to components , You need to use props The attribute is !
   Be careful : By default props The value in the property cannot be uppercase ;

<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><!-- Components , Values passed to components :props--><cpn v-for="item in items" v-bind:itemChild="item"/></div><!--1. Import vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script>//  Define a vue Components component Components Vue.component("cpn",{props: ['itemChild'],template:  `<li>{{itemChild}}</li>`})var vm = new Vue({el: '#app',data: {items: ['Java','Linux',' front end ']}});</script></body></html>


  • v-for="item in items": Traverse Vue The name defined in the instance is items Array of , And create the same number of components
  • v-bind:itemChild="item": The item Item is bound to the component props Definition is named itemChild Attribute ;= The one on the left of number one itemChild by props The name of the property defined , On the right is item in items Traversal in item Item value