V-text:
The function of the v-text instruction is to set the contents of the label
The default writing method replaces everything and uses the difference expression {}
You can replace the specified content
<body>
<div id="app">
<!-- This can show -->
{{ax}}seem
<!-- Vue Instruction: text instruction, nested internally, the value will be set and will not be displayed -->
<h2 v-text="ax">seem</h2>
<h2 v-text="ax+'!'"></h2>
</div>
<script>
var vo=new Vue({
el:"#app",
data:{
ax:"ha-ha"
}
})
</script>
</body>
V-html:
The v-html instruction is used to set the innerHtml of an element
The content has an html structure that will be parsed into tags
The v-text instruction will only parse into text regardless of its content
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="a">
{{mes}}
<h2 v-html="mes"></h2>
<h2 v-text="mes"></h2>
<h2 v-html="as"></h2>
<h2 v-text="as"></h2>
</div>
<script>
var app=new Vue({
el:"#a",
data:{
mes:"No,",
// In this way, html tags will be used to parse the tags, but not others
as:"<a href='#'> Click < / a >“
}
})
</script>
</body>
v-on instruction:
The v-on instruction is used to bind events to elements
The event name does not need to be written on
Instructions can be abbreviated as@
The bound method is defined in the methods property
You can use this. Attribute to get the attribute of data type
<body>
<div id="aop">
<!-- v-on:click:Click event -->
<input type="submit" value="Event binding" v-on:click="dolt">
<!-- Easy way:@clik==v-on:click Equal -->
<input type="submit" value="Event binding" @click="dolt">
<h2 @click="mes">{{foot}}</h2>
</div>
<script>
var aop=new Vue({
el:"#aop",
data:{
foot:"Broccoli"
},
// Method / where the method is placed
methods:{
// First method
dolt:function(){
console.log("1")
},
// The second method
mes:function(){
// Get the foot of data type
console.log(this.foot);
this.foot+="yummy!"
}
}
})
</script>
</body>
Counter:
<body>
<div style="background-color: silver;width: 65px;" id="aop" >
<input style="border-radius: 5px;" type="submit" value="-" @click="j1">
<span style="border: 1px;color: red ;">{{msg}}</span>
<input style="border-radius: 5px;" type="submit" value="+" @click="z1">
</div>
<script>
var aop=new Vue({
el:"#aop",
data:{
//The value I need
msg:1,
//Maximum value set
max:5,
//This is the minimum
min:0
},
methods:{
j1:function(){
if(this.msg!=this.min){
//If the value I need is not equal to the minimum value set, it will be reduced
this.msg--;
}else{
//If the value I need is equal to the minimum value set, then stop
alert("Minimum!")
}
},
z1:function(){
//If the value I need is not equal to the maximum value set, increase it
if(this.msg!=this.max){
this.msg++;
}else{
//If the value I need is equal to the maximum value set, then stop
alert("Maximum!")
}
}
}
})
</script>
</body>
Summary 1:
When creating Vue examples: el (mount point), data (data), methods (Methods)
The function of the v-on instruction is to bind events, which is abbreviated as the @ method. It uses this keyword to obtain data in data
The v-text instruction is used to set the text value of an element, abbreviated as {}}
The v-html instruction is used to set the innerHtml of an element
v-show:
Toggles the display and hiding of elements according to the authenticity of the expression
The function of the v-show instruction is to switch the display state of elements according to true and false
The principle is to modify the display of elements to realize display and hiding
The contents behind the instruction will eventually be resolved to Boolean values
Elements with a value of true are displayed and elements with a value of false are hidden
After the data changes, the display status of the corresponding element will be updated synchronously
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<!-- v-show:according to true/false To show and hide -->
<div style="background-color: red; width: 100px; height: 100px;" v-show="isshow"></div>
<input type="submit" @click="aa" value="display/hide">
</div>
<script>
var a=new Vue({
el:"#app",
data:{
isshow:true
},
methods:{
aa:function(){
//Take a counter example. For example, isshow is true=false and isshow is false=true
this.isshow=!this.isshow;
}
}
})
</script>
</body>
v-if:
Switch the display and hiding of elements according to the true or false expression (operate dom elements)
The function of the v-if instruction is to switch the display state of the element according to the true or false of the expression
The essence is to switch the display state by manipulating dom elements
The value of the expression is true. The element exists in the dom tree and is false. It is removed from the dom tree
Frequently switch v-show, otherwise use v-if, the switching consumption of the former is small
<body>
<div id="aop">
<p v-if="isshow">hide</p>
<p v-if="istrue">display</p>
<p @click="a">Click on me</p>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
isshow:true,
istrue:true
},
methods:{
a:function(){
this.isshow=!this.isshow;
this.istrue=!this.istrue;
}
}
})
</script>
</body>
v-bind:
Set the attribute of the element (for example: src.title.class)
v-bind: attribute name = expression
The v-bind instruction is used to bind attributes to elements
The complete writing method is v-bind: attribute name
In short, you can omit v-bind directly and only keep * *: attribute name**
You need to dynamically add or delete class es. It is recommended to use objects
<body>
<div id="app">
<!-- v-bind:Attribute name=expression -->
<img v-bind:src="ss" v-bind:title="title">
<!-- Simple writing: If the ternary expression is true Execute first false Just execute the second one -->
<img :src="ss" :class="anctiv?'active':''" @click="a" >
</div>
<script>
var ve=new Vue({
el:"#app",
data:{
ss:"img/aaaa.png",
title:"Watch pioneer",
anctiv:false
},
methods:{
a:function(){
this.anctiv=!this.anctiv
}
}
})
</script>
</body>
Picture switching:
<body>
<div id="aop">
<img :src="arry[index]">
<!-- If the array is the first one, the previous one will not be displayed If the array is the last one, the next one will not be displayed -->
<span @click="prev" v-show="index!=0" >Previous</span> <span @click="next" v-show="index<arry.length-1" >Next</span>
</div>
<script>
var vue=new Vue({
el:"#aop",
data:{
// Store all the pictures in an array
arry:["img/aaaa.png","img/bbb.jpg","img/ccc.jpg","img/ddd.jpg"],
index:0
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++
}
}
})
</script>
</body>
v-for:
Generate list structure from data
The function of the v-for instruction is to generate a list structure based on data
Arrays are often used in conjunction with v-for
The syntax is (item,index) in data
item and index can be used in conjunction with other instructions
The update of array length will be synchronized to the page, which is responsive
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<!-- v-for:that is foreach loop itme Variable name index Index name in expression arry The name of the variable you want to traverse -->
<p v-for="(itme,index) in arry">{{index+1}}{{itme}}</p>
<h2 v-for="itme in obh" v-bind:title="itme">{{itme.name}}</h2>
<button @click="add">add to</button>
<button @click="remove">remove</button>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
arry:[1,2,3,4,5],
obh:[
{name:"hah"}
]
},
methods:{
add:function(){
// add to
this.obh.push({name:"292"})
},
remove:function(){
// The leftmost data is removed by default
this.obh.shift()
}
}
})
</script>
</body>
v-on:
Pass custom parameters, event modifiers
Event bound methods are written in the form of function calls, and custom parameters can be passed in
When defining a method, you need to define formal parameters to receive the incoming arguments
The event is followed by the. Modifier, which can limit or (Supplement) the event
. enter can limit the triggered key to enter
There are many kinds of event modifiers
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<!-- @keyup: After a keyboard event enter It is a carriage return event and a supplementary event -->
<input type="text" @keyup.enter="sayHi">
<input type="button" @click="h(777,'Fei Zhang')" value="Submit">
</div>
<script>
var v=new Vue({
el:"#aop",
methods:{
sayHi:function(){
alert(
"Have you eaten yet"
)
},
h:function(p1,p2){
console.log(p1)
}
}
})
</script>
</body>
v-model:
Gets and sets the value of the form element (bidirectional data binding)
The function of v-model instruction is to set and obtain the value of form elements conveniently
The bound data is associated with the form element value
Value of bound data < --- > form element
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<!-- v-model: Bidirectional binding -->
<input type="text" v-model="mas" @keyup.enter="s">
<button @click="set">Modify value</button>
{{mas}}
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
mas:"ha-ha"
},
methods:{
s:function(){
alert(this.mas)
},
// You can modify the value directly
set:function(){
this.mas="ha-ha s"
}
}
})
</script>
</body>
CRUD:
The most important thing is to master the method API
Add:
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<input type="text" v-model="msg" @keyup.enter="add" >
<ul>
<li v-for="(itme,index) in arry">
<label>{{itme}}</label>
</li>
</ul>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
arry:["Write code","having dinner","sleep"],
msg:""
},
methods:{
// Store values in an array
add:function(){
this.arry.push(this.msg)
}
}
})
</script>
</body>
Delete:
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<input type="text" v-model="msg" @keyup.enter="add" >
<ul>
<li v-for="(itme,index) in arry">
<label @click="remove(index)">{{itme}}</label>
</li>
</ul>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
arry:["Write code","having dinner","sleep"],
msg:""
},
methods:{
// Store values in an array
add:function(){
this.arry.push(this.msg)
},
// splice: delete the specified content. The parameters are the index and the number of deletes (how many to delete)
remove:function(index){
this.arry.splice(index,1)
}
}
})
</script>
</body>
Empty:
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<input type="text" v-model="msg" @keyup.enter="add" >
<ul>
<li v-for="(itme,index) in arry">
<!-- adopt remove Method incoming index Index and then delete the element -->
<label @click="remove(index)">{{itme}}</label>
</li>
</ul>
<!-- Statistics: it also calculates many pieces of data -->
<footer style="color: red;">Data is:{{arry.length}}strip</footer>
<footer @click="clea">empty</footer>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
arry:["Write code","having dinner","sleep"],
msg:""
},
methods:{
// Storing values in an array is called adding
add:function(){
this.arry.push(this.msg)
},
// splice: delete the specified content. The parameters are the index and the number of deletes (how many to delete)
remove:function(index){
this.arry.splice(index,1)
},
// empty
clea:function(){
this.arry=[];
}
}
})
</script>
</body>
Hide:
v-show
Full code CRUD
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="aop">
<input type="text" v-model="msg" @keyup.enter="add" >
<ul>
<li v-for="(itme,index) in arry">
<!-- adopt remove Method incoming index Index and then delete the element -->
<label @click="remove(index)">{{itme}}</label>
</li>
</ul>
<!-- Statistics: it also calculates many pieces of data If the length of the array is greater than 0 true Less than 0 is false So it's hidden-->
<footer style="color: red;" v-show="arry.length>0">Data is:{{arry.length}}strip</footer>
<footer @click="clea" v-if="arry.length>0">empty</footer>
</div>
<script>
var v=new Vue({
el:"#aop",
data:{
arry:["Write code","having dinner","sleep"],
msg:""
},
methods:{
// Storing values in an array is called adding
add:function(){
this.arry.push(this.msg)
},
// splice: delete the specified content. The parameters are the index and the number of deletes (how many to delete)
remove:function(index){
this.arry.splice(index,1)
},
// empty
clea:function(){
this.arry=[];
}
}
})
</script>
</body>