1. V – for instructions
Generate a list structure from the data
Grammar:
<div id="app">
<ul>
<li v-for="(item,index)in arr">
{{index}}{{item}}
</li>
<li v-for ="{{item,index}} in objArr">
{{item.name}}
</li>
</ul>
</div>
Copy the code
Var app = new Vue ({el: "# app," data: {objArr arr: [1, 2, 3, 4, 5] : [{name: "jack"}, {name: "rose"}]}})Copy the code
/ / the source code: <body> <div id="app"> <input type="button" value=" add data "@click="add"> @ click = "remove" > < ul > < li v - for = "(item, index) in arr" > {{index + 1}} four great classics is {{item}} < / li > < / ul > < h2 v - for = "item in person" :title="item.name">{{item.name}}</h2> </div> <script> var app = new Vue({ el: "#app", data: { arr: [" journey to the west ", "three kingdoms", "water margin", "a dream of red mansions"], person: [{name: "Monkey King"}, {name: "pig eight quit"}, {name: "the sand monk"}]}, the methods: {the add: Function () {this.person.push({name: "this.person"})}, remove: function () {this.person.shift()}}) </script> </body>Copy the code
Conclusion:
-
The V-for directive generates a list structure from the data.
-
Arrays are often used in conjunction with the V-for instruction.
-
Syntax is (item,index)in data.
-
Item and index can be used in conjunction with other instructions.
-
The array length updates are synchronized to the page and are responsive.
2. V – added on
Pass custom parameters, event modifiers
Grammar:
<div id="app">
<input type="button" @click="doIt(p1,p2)">
<input type="button" @keyup.enter="sayHi">
</div>
Copy the code
var app =new Vue({
el:"#app",
data:{
},
methods:{
doIt:function(p1,p2){},
sayHi:function(){}
}
})
Copy the code
<body> <div id="app"> <input type="button" value=" @click="doIt('老铁',666)"> <input type="text" @keyup.enter="sayHi"> </div> <script> var app = new Vue({ el: "#app", data: { }, methods: { doIt: function (p1, p2) { alert(p1); alert(p2) }, sayHi: function () { alert("Hello") } } }) </script> </body>Copy the code
Conclusion:
The method of the event binding is written as a function call, and custom parameters can be passed in.
When you define a method, you need to define parameters to accept arguments that are passed in.
Follow the events. Modifiers can restrict events.
.Enter can restrict the key that triggers the event to enter.
3. V – model instruction
Getting and setting the value of a form element (two-way data binding)
Grammar:
<div id="app">
<input type="text" v-model="message" />
</div>
Copy the code
Var app = new Vue({el: "#app", data: {message: "#app"}})Copy the code
Data is bound in both directions.
Conclusion:
The V-MOel directive makes it easy to set and get form element values.
The value of the binding element is associated with the value of the form element.
Binding data and form element values are bidirectionally bound.