Vue instruction
v-text instruction
Set the text value of the label (textContent)
-
v-text
< p v-text = "data distortion" ></p>
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"> window.addEventListener('load',function(){ var app = new Vue({ el:'#app', data:{ message:'Dark horse programmer' } }) }) </script> </head> <body> <div id="app"> <h2 v-text="message"></h2> </div> </body> </html> -
{{data transformation}}
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"> window.addEventListener('load',function(){ var app = new Vue({ el:'#app', data:{ message:'Dark horse programmer' } }) }) </script> </head> <body> <div id="app"> <h2>{{message}}</h2> </div> </body> </html>Note: using method 1, you cannot add text to html, such as < H2 v-text = "message" > Shenzhen < / H2 >, "Shenzhen" is not displayed in the browser. Method 2 < H2 > {{message}} Shenzhen < / H2 >, which can be realized
Solution to the problem of method 1:
- < H2 v-text = "message + 'Shenzhen' > < / H2 >, the added content needs to use '' (single quotation mark)
- Modify the message in js and change the content of the message to 'dark horse programmer Shenzhen'
v-html instruction
Similar to innerHTML in js, it can parse html tags and combine rendering in vue
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
window.addEventListener('load',function(){
var app = new Vue({
el:'#app',
data:{
message:'<a href="javascript:;">Dark horse programmer</a>'
}
})
})
</script>
</head>
<body>
<div id="app">
<h2 v-h="message"></h2>
</div>
</body>
</html>
v-on instruction
Bind the event for the element and write the function in the methods object
<div id="app">
<input type="button" value="Event binding" v-on:click="method">
<input type="button" value="Event binding" v-on:mouseenter="method">
<input type="button" value="Event binding" v-on:dbclick="method">
</div>
var app = new Vue({
el:'#app',
methods:{
Function name:function(){
//content
}
}
})
In order to simplify the code, you can @ instead of v-on:, for example, v-on:click="fun", which can be changed to @ click="fun"
v-show instruction
According to the true or false expression, switch the display and hiding of elements, and the contents behind the instruction will be resolved to Boolean values
The essence is to modify the display style
Content classification in v-show:
- true or false
- Variables in Vue data objects
- Conditional expression
<div id="app"> <img src="address" v-show="true"> <!--display--> <img src="address" v-show="isShow"> <!--Do not display--> <img src="address" v-show="age>=18"> <!--Do not display--> </div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:16
}
})
</script>
v-if instruction
Switch the display and hiding of elements according to the true and false expression values (operate DOM elements)
The essence is the removal and addition of DOM elements
Content classification in v-if:
- true or false
- Variables in Vue data objects
- Conditional expression
The usage is the same as v-show
Usage differences between v-show and v-if
The elements that need to be switched frequently use v-show. On the contrary, use v-if, because operating the DOM tree consumes a lot of performance
v-bind instruction
Set the attributes of the element (such as src,title,class, etc.)
v-bind: attribute = "attribute value" or: attribute = "attribute value"
example:
<body>
<div id="#app">
<img v-bind:src="imgSrc" v-bind:title="imgTittle+'gfgf'">
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
imgSrc:"./img/01.jpg",
imgTitle:"123"
}
})
</script>
The path of the picture is a local relative path. When the mouse is placed on the picture, the title name you set will be displayed
Switch class, use ternary expression, or {class name: Interpretation condition / boolean}
<body>
<div id="app">
<img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="toggleActive">
<!-- isActive by true，class Just for active,Otherwise, it is empty -->
<img :src="imgSrc" :title="imgTitle" :class={active:isActive} @click="toggleActive" >
<!-- :class={active:isActive} This statement means the name of the label class Value by isActive Decide whether active-->
</div>
</body>
[case] picture switching
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#app {
width: 600px;
margin: 100px auto;
position: relative;
}
img {
width: 500px;
height: 500px;
border: 1px black solid;
}
#app a {
position: absolute;
top: 243px;
width: 48px;
height: 65px;
font-size: 20px;
background-color: rgba(125, 125, 125, 0.5);
}
.left {
left: 0px;
}
.right {
left: 453px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
window.addEventListener('load',function(){
var app = new Vue({
el:"#app",
data:{
imgSrc:["./img/01.jpg", "./img/02.jpg"],
imgTitle:["Modern beauty", "Ancient beauty"],
index:0
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
})
</script>
</head>
<body>
<div id="app">
<img :src="imgSrc[index]" :title="imgTitle[index]">
<a href="javascript:;" class="left" @click="prev" v-show="index!=0"> < </a>
<a href="javascript:;" class="right" @click="next" v-show="index < imgSrc.length-1"> > </a>
</div>
</body>
</html>
v-for instruction
We can render a list based on an array with the v-for instruction. The v-for instruction requires a special syntax in the form of item in items, where items is the source data array and item is the alias of the array element being iterated
Simple understanding: item s is the source data array in the Vue object. items are defined at will and represent the members of the source data array. v-for copies the specified labels (including descendant labels and internal contents) according to the number of data
Note: the update of array length will be synchronized to the page, which is responsive
<ul>
<li v-for="item in array">Hello</li>
</ul>
Like the above li, if there is content, when using the v-for instruction, the content in li - "Hello“
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
window.addEventListener('load',function(){
var app = new Vue({
el:"#app",
data:{
array:[1,2,3]
}
})
})
</script>
</head>
<body>
<div id="app">
<ul>
<li v-for="i in array">
{{i}}
</li>
</ul>
</div>
</body>
</html>
Output results: 1 2 3
We can bring in the index. The index does not need to be defined again
<ul>
<li v-for="(item,index) in array">
{{index}}and{{item}}
</li>
</ul>
Output results: 0 And 1 1 And 2 2 And 3
We can traverse the data in the object
<div id="app">
<ul>
<li v-for="i in obj">
{{i.name}}
</li>
</ul>
</div>
<script>
window.addEventListener('load',function(){
var app = new Vue({
el:"#app",
data:{
array:[1,2,3],
obj:[{name:"Lee"},
{name:"hello"}]
}
})
})
</script>
Output results: Lee hello
v-on supplement: passing custom parameters, event modifiers
@keyup.enter = "function name (x,y)" - it means that the event is triggered only when the "enter" key is pressed and released, and parameters can be passed, otherwise the function will not be called
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="addStudent('Chen',40)">Add new students</button>
<ul>
<li v-for="(item,index) in student":title="item.age">
{{index+1}}---->{{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
student:[
{name:"Zhao",age:18},
{name:"money",age:19},
{name:"Sun",age:20},
{name:"Lee",age:21},
]
},
methods:{
addStudent:function (x,y) {
var o={name:x,age:y};
this.student.push(o);
}
}
})
</script>
</body>
</html>
v-model instruction
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.
Two way binding: that is, the data in the tag and the corresponding data in Vue are bound to each other. If one party's data is changed, the other party's data will change with it
<div id="app">
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Bidirectional data binding"
}
})
</script>
[specific examples]
<div id="app">
<button @click="setMessage">modify message</button>
<input type="text" name="Text box" v-model="message" @keydown.enter="getMessage">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"not bad"
},
methods:{
getMessage:function(){
alert(this.message);
},
setMessage:function(){
this.message = "I don't know what to change";
}
}
})
</script>