Mustache syntax (double braces)
Write variables directly or write some simple expressions.
<h2>{{message}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{counter * 2}}</h2>
Other instructions
1,v-once
(1) The instruction does not need to be followed by any expression
(2) The representation elements and components are rendered only once and will not change with the change of data.
2,v-html
(1) This instruction is often followed by a string type
(2) The html of the string will be parsed and rendered
<h2 v-html="url"></h2> <!-- Among them, url: '<a href = "http://Www.baidu. Com "> Baidu < / a > '-- >
3,v-text
This instruction is often followed by a string type, which is rarely used, and will be replaced by a mustache statement.
4,v-pre
Used to skip the mutation process of this element and its child elements, and to display the original Mustache statement.
<h2>{{message}}</h2> <!-- analysis message Corresponding content in -->
<h2 v-pre>{{message}}</h2> <!-- Direct display{{message}} -->
5,v-cloak
In some cases, the browser may directly display the uncompiled Mustache tag.
This attribute exists before vue parsing, but not after parsing. It will be deleted during parsing.
v-bind (dynamic binding attribute)
Basic use of v-bind
<div id="app">
<img v-bind:src="imgURL" alt=""> <!-- v-bind command -->
<a v-bind:href="aHref">use Baidu Search</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgURL: 'https://img10.360buyimg.com/img/jfs/t1/160510/16/25709/36032/616cea7eEd14780cc/43b0d9ed8c9e9ab0.png',
aHref: 'http://www.baidu.com'
}
})
</script>
Grammar:
<img :src="imgURL" alt=""> <!-- v-bind command --> <a :href="aHref">use Baidu Search</a>
v-bind dynamic binding class
Object syntax
Syntax format:
<h2 :class="{Class name: Boolean value}">{{message}}</h2>
Array syntax
Usage 1: the passed in is a variable
<h2 class="title" :class="[active, line]">{{message}}</h2> //active and line are variables and do not need to write single quotes
Usage 2: when it is too complex, it can be placed in one methods perhaps computed in
<h2 class="title" :class="getClasses()">{{message}}</h2> //getClasses() method
Job (combination of v-bind and v-for)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=script, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in books" :class="{active:currentIndex === index}" @click="liClick(index)">
{{index}}.{{item}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: ['Journey to the West', 'The Dream of Red Mansion', 'Romance of the Three Kingdoms', 'Water Margin'],
// Using the state variable currentIndex
currentIndex: 0
},
methods: {
liClick(index) {
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
v-bind binding style
Object syntax
Syntax format:
<h2 :style = "{key(Attribute name): value(Attribute value)}">{{message}}</h2>
<h2 :style="{fontSize:'50px'}">{{message}}</h2> //'50px' must be enclosed in single quotation marks, otherwise it will be parsed as a variable
Array syntax (rarely used)
Syntax format:
<h2 :style="[baseStyle, overridingStyles]"></h2>
Calculation properties
Operation of calculating attributes
1. Basic use
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lee',
lastName: 'James'
},
// computed: calculated attribute ()
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
2. Complex operation
<div id="app">
<h2>Total price:{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{ id: 110, name: 'Journey to the West', price: 119 },
{ id: 111, name: 'The Dream of Red Mansion', price: 105 },
{ id: 112, name: 'Romance of the Three Kingdoms', price: 98 },
{ id: 113, name: 'Water Margin', price: 87 }
]
},
computed: {
totalPrice: function () {
let result = 0
for (let i = 0; i < this.books.length; i++) {
result += this.books[i].price
}
return result
}
}
})
</script>
Calculate the setter and getter of the property
Each calculated property contains a getter and setter. Generally, there is no set method and the property is read-only.
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lee',
lastName: 'Jane'
},
computed: {
fullName: {
set: function (newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function () {
return this.firstName + ' ' + this.lastName
}
}
}
})
</script>
Comparison of calculation properties and methods
The performance of the calculated attribute is higher than that of methods. Because the calculated attribute is cached, the calculated attribute will only be called once if it is used multiple times.
event listeners
Basic usage and syntax of v-on
Use the v-on command to monitor the user's events, such as clicking, dragging, keyboard, etc.
<body>
<div id="app">
<h2>{{counter}}</h2>
<!-- <button v-on:click="increment">+</button> -->
<!-- <button v-on:click="decrement">-</button> -->
<!-- use v-on Syntax sugar:-->
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increment() {
this.counter++
},
decrement() {
this.counter--
}
}
})
</script>
</body>
Note: v-on also has the corresponding syntax sugar. v-on:click can be written as @ click
Parameter transfer of v-on
During event listening,
<body>
<div id="app">
<!-- 1,The method called by the event has no parameters -->
<button @click="btn1Click">Button 1</button>
<button @click="btn1Click()">Button 2</button>
<!-- 2,When defining an event, the method itself requires a parameter -->
<button @click="btn2Click(123)">Button 3</button>
<button @click="btn2Click()">Button 4</button>
<!-- When defining an event, parentheses are omitted when writing a method, but the method itself requires a parameter, -->
<!-- At this time Vue Will default to browser generated event The event object is passed into the method as a parameter -->
<button @click="btn2Click">Button 5</button>
<!-- 3,Method definition event Object, and other parameters are required at the same time -->
<!-- Get browser parameters manually event Object: $event -->
<button @click="btn3Click(">Button 6</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btn1Click() {
console.log("btn1Click");
},
btn2Click(event) {
console.log('--------', event);
},
btn3Click(abc, event) {
console.log('+++++++++', abc)
}
}
})
</script>
</body>
Use of the v-on modifier
 |
|---|
<body>
<div id="app">
<!-- 1,.stop Use of modifiers: prevent bubbling of events -->
<div @click="divClick">
<!-- <button @click="btnClick">Button</button> -->
<button @click.stop="btnClick">Button</button>
</div>
<!-- 2,.prevent Use of modifiers: block default events -->
<form action="baidu">
<!-- <input type="submit" value="Submit" @click="submitClick"> -->
<input type="submit" value="Submit" @click.prevent="submitClick">
</form>
<!-- 3,Monitor the key cap of a keyboard -->
<!-- Monitor enter key -->
<input type="text" @keyup.enter="keyUp">
<!-- 4,.once Use of modifiers -->
<button @click.once="btn2Click">Button 2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btnClick() {
console.log("btnClick");
},
divClick() {
console.log("divClick");
},
submitClick() {
console.log('submitClick');
},
keyUp() {
console.log('keyUp');
},
btn2Click() {
console.log('btn2Click');
}
}
})
</script>
</body>
Conditional judgment
v-if,v-else-if,v-else
<body>
<div id="app">
<!-- <h2 v-if=isShow>{{message}}</h2> -->
<!-- <h2 v-else=isShow>isShow by false Show me when</h2> -->
<!-- <h2 v-if="score>=90">excellent</h2> -->
<!-- <h2 v-else-if="score>=80">good</h2> -->
<!-- <h2 v-else-if="score>=60">pass</h2> -->
<!-- <h2 v-else>fail,</h2> -->
<!-- Complex logic is recommended computed -->
<h2>{{result}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'How do you do',
isShow: true,
score: 99
},
computed: {
result() {
let showMessage = ' ';
if (this.score >= 90) {
showMessage = 'excellent';
} else if (this.score >= 80) {
showMessage = 'good';
} else if (this.score >= 60) {
showMessage = 'pass';
} else {
showMessage = 'fail,';
}
return showMessage;
}
}
})
</script>
</body>
User login switching case
<body>
<div id="app">
<span v-if="isUser">
<label for="username">User account</label>
<!-- placeholder: Gray prompt text in text box -->
<!-- <input type="text" id="username" placeholder="User account"> -->
<input type="text" id="username" placeholder="User account" key="username">
</span>
<span v-else>
<label for="email">User mailbox</label>
<!-- <input type="text" id="email" placeholder="User mailbox"> -->
<input type="text" id="email" placeholder="User mailbox" key="email">
</span>
<button @click="isUser=!isUser">Switch type</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
}
})
</script>
</body>
In the case, there is a small problem. The reuse problem is solved by adding different key s
 |
|---|
The difference between v-if and v-show
 |
|---|
Loop traversal
v-for traversal array
During the traversal, the index value (subscript value) is obtained
<!-- During the traversal, the index value is obtained(Subscript value) -->
<li v-for="(item,index) in names">
{{index + 1}}-{{item}}
</li>
v-for traversal object
<!-- 1,In the process of traversing the object, if you only get a value, what you get is value -->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 2,obtain key and value Format:(value, key) -->
<ul>
<li v-for="(value,key) in info">
{{key}}-{{value}}
</li>
</ul>
<!-- 3,obtain key,value and index -->
<ul v-for="(value,key,index) in info">
<li>
{{index}}-{{key}}-{{value}}
</li>
</ul>
The difference between v-for bound and unbound key s
 |
|---|
Responsive methods in arrays
Responsive
1. push(): add one or more elements to the end of the array
this.letters.push('aaa', 'bbb')
2. pop(): deletes the last element in the array
this.letters.pop()
3. shift(): deletes the first element in the array
this.letters.shift()
4. unshift(): adds one or more elements to the front of the array
this.letters.unshift('aaa', 'bbb')
5. splice(): delete / insert / replace elements
1) First parameter: start position (index value)
2) Second parameter:
(1) Delete element: indicates the number of elements to be deleted (if not transmitted, all subsequent elements will be deleted)
this.letters.splice(0,1) //Starting with the first element, delete an element
(2) Replace element: indicates the number of elements to replace, followed by the element used to replace the previous element
this.letters.splice(0,2,'aaa','bbb') //Replace the first and subsequent elements with 'aaa','bbb'
(3) Insert element: 0 followed by the element to be inserted
this.letters.splice(1, 0, 'aaa') //Insert an element 'aaa' before the second element
6. sort(): sort
7. reverse(): flip
8. Set (object to be modified, index value, modified value) (important)
Vue.set(this.letters, 0, 'bbb') //Change the first element in letters to 'bbb'
Non responsive
Modifying the elements in the array through the index value is non responsive and will not be displayed in the web page after modification.
this.letters[0] = 'bbbb'
Shopping cart case
When all the books in the shopping cart are removed, "shopping cart is empty" is displayed. The purchase quantity is at least 1
1,index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>Book name</th>
<th>Publication date</th>
<th>Price</th>
<th>Purchase quantity</th>
<th>operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<button @click="decrement(index)">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="removeHandler(index)">remove</button></td>
</tr>
</tbody>
</table>
<h2>Total price:{{totalPrice | showPrice}}</h2>
</div>
<h2 v-else>Shopping cart is empty</h2>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
2,style.css
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th,td {
padding:8px 16px;
border:1px solid #e9e9e9;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
3,main.js
const app = new Vue({
el: '#app',
data: {
books: [
{
id: 1,
name: '<Introduction to Algorithms',
date: '2006-9',
price: 85.00,
count: 1
},
{
id: 2,
name: '<UNIX Programming art',
date: '2006-2',
price: 59.00,
count: 1
},
{
id: 3,
name: '<Programming Pearl',
date: '2008-10',
price: 39.00,
count: 1
},
{
id: 4,
name: '<Code collection',
date: '2006-3',
price: 128.00,
count: 1
}
]
},
methods: {
increment(index) {
this.books[index].count++;
},
decrement(index) {
this.books[index].count--;
if (this.books[index].count < 1) {
this.books[index].count = 1;
}
},
removeHandler(index) {
this.books.splice(index, 1);
}
},
computed: {
totalPrice() {
let totalPrice = 0;
for (let i = 0; i < this.books.length; i++) {
totalPrice += this.books[i].price * this.books[i].count
}
return totalPrice
}
},
//filter
filters: {
showPrice(price) {
return '￥' + price.toFixed(2)
}
}
})