Local application vue instruction
1. Content binding, event binding
1-1 v-text set label text value
<div id ="app">
//All contents will be replaced
<h2 v-text="message"></h2>
//The difference expression {}} can replace part of the content
<h2>Shenzhen{{message +"!"}}</h2>
</div>
var app =new Vue({
el:"#app",
data:{
message:"Set label content"
}
})
//Set label content
//Shenzhen set label content!
1-2 v-html setting innerHTML of element
<div id ="app"> //html in the content will be parsed into tags <p v-html="content"></p> //v-text parses the content into text <p v-text="content"></p> </div>
var app =new Vue({
el:"#app",
data:{
content:"<a href="https://Www.baidu.com "> Baidu</a>
}
})
1-3 v-on binding events for elements
<div id="app">
<input type="button" value="Event binding" v-on:cilck="method">
<input type="button" value="Event binding" v-on:monseenter="dolt">
<input type="button" value="Event binding" v-on:dblcilck="dolt">
<input type="button" value="Event binding" @dblcilck="dolt">
<input @click="changeFood">{{food}}</h2>
</div>
var app = new Vue({
el:"#app",
data: {
food:"Fried egg with Broccoli"
},
methods:{
dolt:function(){
alert("do it");
},
changeFood:function(){
this.food+="it's so delicious."
}
},
})
1-4 application case - counter
<div id="app">
<div id="input-num">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
</div>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
if(this.num<10){
this.num++;
}else{
alert("Up to 10 additional pieces can be purchased");
}
},
sub:function(){
if(this.num>0){
this.num--;
}else{
alert("Current minimum purchase quantity");
}
}
},
})
1-5 case sections:
- When creating a vue instance: el set the mount point; data set the data; methods set the method
- The function of the v-on instruction is to bind events, abbreviated as@
- Method to obtain the data in data through the this keyword
- The v-text instruction is used to set the text value of an element, abbreviated as {}}
v-show switches the element display state according to the true or false expression
- The principle is to modify the display of elements to realize display and hiding
- The contents after the instruction are parsed into Boolean values
- The position is displayed as true and hidden as false
- After the data changes, the display status of the corresponding element will be updated synchronously
<div id="app">
<input type = "button" value = "Toggle display state" @click="changeIsShow">
<img src="Picture address" v-show="isShow">
<input type = "button" value ="Cumulative age" @click= "addAge">
//When true, the picture is displayed and false, the picture is hidden
<img src="Picture address" v-show="age >= 18">
</div>
var app = new Vue({
el:"app",
data:{
isShow:false, //Element hiding
//isShow:false,
age:16
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
1-6 v-if switch the display state of the element according to the true or false expression (directly manipulate the dom element)
- The essence is to switch the display state by manipulating dom elements
- The value of the expression is true, and the element exists in the dom tree;
- If the value of the expression is false, it will be removed from the dom tree in the element;
- Use v-show for frequent switching, and v-if for the reverse
<div id = "app"> <input type ="button" @click ="toggleIsShow"> //v-if, operate on the dom tree and directly remove the text from the dom tree <p v-if="isShow">I'm a v-if Test text</P> //v-isShow, change the element style through display, display block and hide none <p v-isShow="isShow">I'm a v-isShow Test text</P> </div>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
toggleIsShow:function(){
this.isShow = !this.isShow;
}
}
})
1-7 v-bind setting element attributes (such as src,title,class)
<style>
.active{
border:1px solid red;
}
</style>
<div id="app">
<img v-bind:src="imgSrc">
<img v-bind:title="imgTitle+'!!!'" >
//Ternary expression mode
<img v-bind:class="isActive?'active':''" @click="toggleActive">
//Object form
<img v-bind:class="{active:isActive}">
</div>
var app = new Vue({
el:"#app",
data:{
imgSrc:"Picture address",
imgTitle:"Classmate Lyon",
isActive:false,
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive;
}
}
})
1-8 application case - picture switching
Case study:
Define picture address (array mode)
Add picture index
Picture switching logic
Display state switching
<div id="app"> <img:src="imgArr[index]" /> <a href="javaScript:void(0)" @click="prev" v-show="index!=0">Previous</a> <a href="javaScript:void(0)" @click="prev" v-show="index < index.length - 1">Next</a> </div>
var app = new Vue(){
el:"#app",
data:{
imgArr:[],
index:0,
imgSrc:
},
methods:{
prev:function(){
if(this.index > 0){
this.index--;
}else{
this.index = this.index +1;
}
},
next:function(){
if(this.index < 10){
this.index++;
}else{
this.index = this.index -1;
}
}
}
1-9 v-for generates list structure based on data
- Data is often used in conjunction with v-for
- (item,index) in data
- item and index can be used in conjunction with other instructions
- The update of array length is synchronized to the page
<div id="app">
<input type="button" value="Add data" @click="add">
<input type="button" value="Remove data" @click="remove">
<ul>
<li v-for = " (item,index) in arr">{{index + 1}}Lyon to:{{item}}</li>
</ul>
<h2 v-for ="item in vegetables">{{item.name}}</h2>
</div>
var app=new Vue({
el:"app",
methods:{
arr:["Shenzhen","Guangzhou","Shanghai","Beijing"],
vegetables:[
{name:"broccoli"},
{name: "Spicy chicken"}
]
},
methods:{
add:function(){
this.vegetables.push({name: "Small crisp flesh"});
},
remove:function(){
this.vegetables.shift();
}
},
})
1-10 v-on
- Event bound methods are written in the form of called functions, and user-defined parameters can be passed in
- When defining a method, you need to define formal parameters to receive the arguments of the passed in parameters
- Events are followed by. Modifiers to restrict events
- . enter can limit the key triggered to enter
<div id="app">
<input type="button" value ="click" @click="doIt(666,'Buddy')"/>
<input type="text" @keyup.enter="sayHi">
</div>
var app=new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log("p1");
console.log("p2");
},
sayHi:function(){
alert("Dinner!")
}
}
})
1-11 v-model instruction gets and sets the value of form elements (bidirectional data binding)
- The bound data is associated with the value of the form element
<div id = "app">
<input type ="text" v-model ="message" @keyup="getM">
<input type ="button" v-model ="modify message" @keyup="setM">
<h2>{{message}}</h2>
</div>
var app = new Vue(){
el:"#app",
data:{
message:"Classmate Lyon";
},
methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="Good evening, classmate Lyon"
}
}
}
1-12 application case - little black Notepad
newly added
Generate list structure v-for
Get user input v-model
Press enter to add data v-on
delete
Click v-on splice to delete the specified content
Statistics
Count number v-text length
empty
Click clear all information v-on to clear the array
Hide v-show
<div id="app">
<div id="">
<input type = "text" v-model="inputValue">
</div>
<div id="">
<ul>
<li v-for="(item,index) in arr">{{index}}item</li>
<div class = "view">
<span>{{index + 1}}</span>
<label>{{item}}</label>
<button @click = "remove(index)"></button>
</div>
</ul>
<input type="text" v-model="message" @keyup.enter = "add">
</div>
<footer>
<span v-if="arr.length != 0">
<strong>{{arr.length}}</strong>
</span>
<button @ click = "clear">Clear</button>
</footer>
</div>
var app = new Vue(){
el:"#app",
data:{
arr:[];
inputValue:"";
},
methods:{
add:function(){
this.arr.push(this.inputValue)
},
remove:function(index){
console.log(index);
this.list.splice(index,1);
},
clear:function(){
this.arr = [];
}
}
}
}