vue actual combat
1. Vue introduction
Progressive JavaScript framework -- Excerpted from the official website
Progressive
- Easy to use: already know HTML, CSS and JavaScript, read the guide now and start building applications!
- Efficiency: a thriving ecosystem can scale freely between a library and a complete framework
- Flexible: 20kB min+gzip running size, ultrafast virtual DOM, the most worry free optimization
summary
Vue is a javascript framework js that simplifies page js operations. It is designed to be applied layer by layer from bottom to top. Vue's core library only focuses on view layers
bootstrap is a css framework that encapsulates css
Back end service developer
Vue progressive javascript framework: let's easily complete data and view binding = = = > two-way binding MVVM by operating few DOM elements or even any DOM elements in the page
2. Getting started with Vue
Download Vuejs
<!-- Development environment version with helpful command line warnings --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Production environment version, optimized size and speed --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
Vue's first getting started application
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1>{{username}}</h1>
<h1>{{password}}</h1>
<h4>{{username.toUpperCase()}}</h4>
<h4>{{username.length}}</h4>
<h4>{{username == "hello vue"}}</h4>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<!--write vue Code of-->
<script>
//Create a vue instance
var app = new Vue({
el: "#app",//element: used to define a scope for Vue instances
data: { //It is used to define some related data for Vue instances and customize various data
msg: "Vuejs Welcome and look forward to your joining",
username: "Hello Vue!",
content: "hello vue",
password: "123456"
}
})
</script>
The data attribute in vue defines objects, arrays, and related data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h2>{{count}}</h2>
<h2>{{user.id}} == {{user.name}} == {{user.age}} == {{user.salary}}</h2>
<h2>{{schools[0]=='Beijing Campus'}} == {{schools[1]}} == {{schools[2].length}}</h2>
<h2>{{users[1].id}} == {{users[1].name}} == {{users[2].name}}</h2>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / specify the scope of vue instance
data: { //Used to define a series of data for vue instances
msg: "Hello Vue",
count: 0,
user: {id: 21, name: "Xiao Zhu", age: 23, salary: 23000.23},
schools: ["Beijing Campus", "Shanghai Campus", "Guangzhou Campus", "Shenzhen Campus"],
users: [
{id: 22, name: "Xiao Zhu Yi", age: 23, salary: 23000.23},
{id: 23, name: "Xiao Zhu Er", age: 24, salary: 24000.23},
{id: 24, name: "Xiao Zhu San", age: 25, salary: 25000.23}
]
}
})
</script>
summary
- Only one vue instance can exist in a page. You cannot create multiple vue instances
- el attribute in Vue instance (object): represents the scope of Vue. In the future, Vue syntax can be used within the scope of Vue
- Data attribute in Vue instance (object): it is used to bind some relevant data to Vue instance. The bound data can directly obtain the attribute value corresponding to the variable name in data through {variable name in data attribute}}
- When using {}} to obtain data in data, you can write expressions, operators, call related methods, and logical operations in {}}
- Any CSS selector [jquery selector] can be written in the el attribute, but it is recommended to use the id selector in Vue development. Note: the el attribute value cannot specify the body or html tag
3. v-text and v-html
v-text
v-text: used to obtain the data in the data attribute and render the data to the specified label in the form of text, similar to innerText in javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2><span>{{msg}}</span></h2>
<h2><span v-text="msg"></span></h2>
</div>
</body>
</html>
<!--introduce vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "welcome to beijing"
}
})
</script>
summary
- The difference between {}} (interpolation expression) and v-text data acquisition is
- Using v-text value will overwrite the original data in the label. Using interpolation expression will not overwrite the original data of the label
- Using v-text can avoid interpolation flicker in poor network environment
v-html
v-html: used to obtain the data in the data, parse the HTML tag contained in the data, and render it to the interior of the specified tag, which is similar to innerHTML in javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2><span>{{msg}} xxxx</span></h2>
<h2><span v-text="msg">xxxxx</span></h2>
<h2><span v-html="msg">xxxxxx</span></h2>
</div>
</body>
</html>
<!--introduce vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "welcome to beijing"
}
})
</script>
Use of v-text and v-html instructions
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h2>{{msg}} hello {{msg}} Xiao Zhu {{msg}}</h2>
<h2>Xiao Zhu <span v-text="msg"></span></h2>
<h2 v-html="msg">{{msg}}</h2>
<h2>{{content}}</h2>
<h2 v-text="content"></h2>
<h2 v-html="content"></h2>
<!--
v-text and v-html: Function: used to obtain vue Instance data Attribute declared data
Usage syntax: get on which tag and define directly on which tag v-text v-html
v-text="Attribute name"
{{}} Value sum v-text Value difference;
1.{{}}The value will not empty the original data of the label v-text Empty tag original data {{}}===>This method takes the value of interpolation expression
2.{{}}Interpolation flicker in value v-text v-html The value does not have interpolation flicker
recommend: Both methods can be used {{}} More flexible
v-text (innerText), v-html (innerHtml)difference:
1.use v-text Value:Render the acquired data directly to the specified label
2.use v-html Value:First, the acquired data is processed html Label resolution,After parsing, render to the specified label
-->
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "Hello Vue",
content: "<a href='http://www.baidu. COM / > Click me to view details < / a >“
}
})
</script>
4. Simplified expression of event binding (v-on) in Vue:@
Basic syntax for binding events in Vue
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--
js Medium event( event):
Three elements of the event:
Event source: a specific action occurs HTML label
Events: click events when a specific action event occurs onclick ondblclick onmouseover onmouseout keyup keydown .....
Listener: event handlers are generally js Is an event handler function(){}
v-on Instruction:
Function: used to bind events to tags in the page
Syntax: use on the corresponding label v-on:Event name="Event handler name"
-->
<button v-on:click="test">vue Event binding in</button>
<input type="button" value="Let me change my age" v-on:click="changeAge">
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / used to specify the scope of Vue instance
data: { //Used to bind a series of data to a vue instance
msg: "Hello Vue"
},
methods: { //It is used to bind a series of functions and methods to vue instances
test: function () { //Define a test function
alert("vue in test")
},
changeAge: function () {
alert("Click trigger"),
console.log(this.age)//Represents the current vue instance
console.log(this.aa())//Delegate call method
},
aa: function () {
}
}
})
</script>
summary
Three elements of event
- Event source: dom element where event occurs
- Event: a specific action occurs click
- Listener: the event handler after a specific action occurs is usually a function in js
- In Vue, the binding of events is completed through the v-on instruction. V-on: event name, such as: v-on:click
- In the assignment statement of v-on: event name, it is the function name triggered by the current event
- . in Vue, the functions of events are uniformly defined in the methods attribute of Vue instances
- In the event defined by Vue, this refers to the current Vue instance. In the event, you can use this to obtain the relevant data in the Vue instance and call the relevant methods in methods in the future
The v-on instruction basically uses this to obtain the vue instance itself in a function
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--Bidirectional binding mechanism MVVM Model <===> ViewModel((listener) <===> View(view)-->
<h2>{{count}}</h2>
<h2>{{count}}</h2>
<button v-on:click="test" v-on:mouseover="test1">Point me</button>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / used to define data Model
data: {
msg: "Hello Vue",
count: 23
},
methods: { //Used to define methods
test: function () {
//If the data in data is obtained in the vue definition method, note: this can be directly used in the user-defined method, and this represents the current instance
console.log(this);
console.log(this.msg);
console.log(this.count);
//this.count = this.count+1;
this.count++;
//Trigger aa event
this.aa();
},
test1: function () {//Method of mouse passing
console.log("test1 mouseover")
},
aa: function () {
console.log("aaa");
}
}
})
</script>
The v-on instruction is basically used to pass parameters in functions
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}} </h2>
<h2>Age:{{count}}</h2>
<button v-on:click="incrementAge">Point every time I give age+1</button>
<button v-on:click="changeAge(40)">Point every time I give age+uncertain</button>
<button v-on:click="changeAgeAndMsg({count:2, msg:'i love vue'})">Point every time I give age+Uncertain, at the same time msg uncertain</button>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {//Used to define data
msg: "Hello Vue",
count: 23
},
methods: {//Used to define methods
incrementAge: function () {
this.count++;
},
changeAge: function (count) {
console.log(count);
this.count += count;
},
changeAgeAndMsg: function (param) {
console.log(param);
this.count += param.count;
this.msg = "hello vue" + param.msg;
}
}
})
</script>
Simplified writing of binding event in Vue @ binding event
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>Age:{{age}}</h2>
<input type="button" value="adopt v-on Event modified each time+1" v-on:click="changeAge">
<input type="button" value="adopt@Bind event modify age each time-1" @click="editAge">
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / used to specify the scope of Vue instance
data: { //Used to bind a series of data to a vue instance
age: 23
},
methods: { //It is used to bind a series of functions and methods to vue instances
changeAge: function () {
this.age++;
},
editAge: function () {
this.age--;
}
}
})
</script>
summary
When binding events in vue in the future, the event binding of v-on can be simplified by @ symbol.
Two ways to write event functions in Vue
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h2>Age:{{count}}</h2>
<!--
v-on instructions: Used to bind specific events to corresponding tags
v-on Instruction simplification @ grammar: @Event name=Event handler name
-->
<button v-on:click="test">Point to my age+1</button>
<button @click="test1(5)">Point to my age+5</button>
<button @click="test2(5)">Point to my age+5</button>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: { //Used to define the data Model
msg: "Hello Vue",
count: 23
},
methods: {//Used to define methods
test: function () {
this.count++;
},
test1: function (count) {//Original defined function: function name: function () {} -------- > simplified function: function name () {}
this.count += count;
},
test2(count) {
console.log(this.count)
this.count += count;
}
}
})
</script>
summary
There are two ways to write event definitions in vue:
- One is: function name: function() {}
- One is: function name () {} = = = "recommended
Event delivery parameters in Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h2>Age:{{count}}</h2>
<input type="button" value="change count Value specified for" @click="changeCount(23,'xiaohei')">
</div>
</body>
</html>
<!--introduce vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "welcome to beijing",
count: 10
},
methods: {
changeCount(count, name) {
console.log(this.count);
console.log(this.msg);
this.count = count;
alert(name);
//this.msg = name;
}
}
})
</script>
summary
When using an event, you can directly pass parameters to the event at the event call, and receive the passed parameters by defining corresponding variables at the event definition.
5,v-show v-if v-bind
v-show
v-show: used to control whether a tag element in the page is displayed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h2 v-show="false">welcome to beijing</h2>
<h2 v-show="show">Welcome to Beijing, this is vue Variables defined in true</h2>
<input type="button" value="Show hidden labels" @click="showmsg">
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "hello vue",
show: false
},
methods: {
showmsg() {//Define events
this.show = !this.show;
}
}
})
</script>
summary
- When using v-show, you can directly write boolean values to control the display of elements, or you can control the display and hiding of labels through variables
- In v-show, you can control the display and hiding of labels through boolean expressions
v-if
v-if: used to control whether page elements are displayed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h2 v-if="false">Beijing</h2>
<h2 v-if="show">welcome to beijing</h2>
</div>
</body>
</html>
<!--introduce vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "welcome to beijing",
show: false
},
methods: {}
})
</script>
Difference between v-if and v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--
v-if , v-show Instruction:
Function: used to pass vue Method controls which tags are displayed and hidden in the page
Syntax: controls which tag is displayed or hidden, and which tag is added directly v-if="true|false|Logical operation expression" v-show="true|false|Logical operation expression"
difference:
1.v-if The bottom layer is through control dom The element node on the tree realizes the display and hiding of page labels dom tree
2.v-show The bottom layer is through the control tag css in display Property to display and hide page labels css style
v-show Only compile once, which is actually control css，and v-if Constantly destroy and create, so v-show Better performance.
Usage Summary:
In general, v-if Higher screen cutting overhead, and v-show Better initial rendering.
Therefore, if very frequent switching is required, use v-show Better;
If conditions rarely change at run time, use v-if Better;
Quick change v-show
Slow change v-if
-->
<h2 v-if="isShow">{{msg}}</h2>
<h2 v-show="isShow">{{msg}}</h2>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / represents the scope of vue instance
data: {//Used to bind data to vue instances
msg: "hello vue",
isShow: true
},
methods: {}//Used to define a series of related methods for vue instances
})
</script>
Case 1 of v-if and v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--Management status-->
<h2 v-show="isShow">{{msg}}</h2>
<button @click="hideH2">Used to hide h2 label</button>
<button @click="showH2">Used to display h2 label</button>
<button @click="showHideH2">Used to show|hide h2 Label (method)</button>
<button @click="isShow=!isShow">Used to show|hide h2 Label (method) direct operation data Medium attribute</button>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / represents the scope of vue instance
data: { //Used to bind data to vue instances
msg: "hello vue",
isShow: true
},
methods: { //Related methods used to define some columns for vue instances
hideH2() {
this.isShow = false
},
showH2() {
this.isShow = true
},
showHideH2() {
this.isShow = !this.isShow;
// if(this.isShow){
// this.isShow=false;
// }else{
// this.isShow=true;
// }
}
}
})
</script>
Case 2 of v-if and v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<div style="width: 200px;height: 200px;background: red" v-show="isShow" @mouseover="hideDiv"></div>
<br/>
<div style="width: 200px;height: 200px;background: red" v-show="isShow" @mouseover="isShow=false"></div>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / represents the scope of vue instance
data: { //Used to bind data to vue instances
msg: "hello vue",
isShow: true
},
methods: { //The related methods used to define some columns for vue instances
hideDiv() {
this.isShow = false;
}
}
})
</script>
v-bind
v-bind: used to bind the attributes of the tag, so as to dynamically modify the attributes of the tag through vue
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--
v-bind: Binding action: Used to bind html Give an attribute in the tag to vue Instance management
Benefit: once the attribute is handed over to vue After instance management,It can be modified later vue The binding attribute in the instance achieves the effect of dynamically modifying the label attribute
Syntax: on the corresponding label v-bind:Attribute name
-->
<img v-bind:width="width" v-bind:height="height" v-bind:src="src" @mouseover="changeATM" @mouseout="changeMM">
<br/>
<button @click="changeATM">Modified to Altman</button>
<button @click="changeMM">Change to beauty</button>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / represents the scope of vue instance
data: {//Used to bind data to vue instances
msg: "hello vue",
width: 200,
height: 200,
src: "https://img2.baidu.com/it/u=1909694165,3400923478&fm=26&fmt=auto&gp=0.jpg"
},
methods: {//Related methods used to define some columns for vue instances
changeATM() {
this.src = "1.jpg";
this.width=150;
},
changeMM() {
this.src="https://img2.baidu.com/it/u=1909694165,3400923478&fm=26&fmt=auto&gp=0.jpg";
this.width=200;
}
}
})
</script>
class style binding case of v-bind
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
<style>
.aa {
width: 200px;
height: 200px;
border: 10px red solid;
}
.bb {
width: 200px;
height: 200px;
border: 10px green dashed;
}
</style>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--v-bind: Used to html Label attribute binding vue Instance, which will be modified in the future vue Instance to dynamically modify label attributes-->
<h2 v-bind:class="cls?'aa':'bb'" @mouseover="changeClsBB" @mouseout="changeClsAA"></h2>
<button @click="changeClsAA">Change style to AA</button>
<button @click="changeClsBB">Change style to BB</button>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / represents the scope of vue instance
data: { //Used to bind data to vue instances
msg: "hello vue",
cls: true,
message: "I should show yes ATM"
},
methods: {//Related methods used to define some columns for vue instances
changeClsAA() {
this.cls = true;
},
changeClsBB() {
this.cls = false;
}
}
})
</script>
v-bind simplified writing method: attribute name
vue provides a simplified way to bind the attributes of the tag for our convenience in the future, such as v-bind: attribute name after simplification: attribute name
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
<style>
.aa {
width: 200px;
height: 200px;
border: 10px red solid;
}
.bb {
width: 200px;
height: 200px;
border: 10px salmon dashed;
}
</style>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--
v-bind: Binding: to html Label a property bound to vue Instance management
Simplified writing
Syntax::Attribute name="Attribute value" recommend
-->
<!--Class selector -->
<div v-bind:class="cls" @mouseover="cls='bb'" @mouseout="cls='aa'"></div>
<br/>
<div :class="cls" @mouseover="cls='bb'" @mouseout="cls='aa'"></div>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / represents the scope of vue instance
data: {//Used to bind data to vue instances
msg: "hello vue",
cls: 'aa'
},
methods: {//Related methods used to define some columns for vue instances
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
<style>
.aa {
width: 200px;
height: 200px;
border: 10px red solid;
}
</style>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<img :src="src" :width="width" :height="height" :title="msg" :class="{aa:showCss}" alt="">
<input type="button" value="Dynamic control adding style" @click="addCss">
<input type="button" value="Change picture" @click="changeSrc">
</div>
</body>
</html>
<!--introduce vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / represents the scope of vue instance
data: {//Used to bind data to vue instances
msg: "welcome to beijing",
showCss:true,
src: "1.jpg",
width: 200,
height: 200,
},
methods: {//Related methods used to define some columns for vue instances
addCss() {
this.showCss = !this.showCss;
},
changeSrc() {
this.src = "https://img2.baidu.com/it/u=1909694165,3400923478&fm=26&fmt=auto&gp=0.jpg"
}
}
})
</script>
6. Use of v-for
v-for: used to traverse objects (arrays are also a kind of objects)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--
v-for Instruction: function: used to implement in the page vue Traversal of data defined in
Syntax: add directly to the corresponding label v-for instructions
a.Traversal object: v-for="value,key,index in data Variable name in"
b.Traversal array: v-for="item(Common type element),index in data Variable name in"
c.Traverse array objects: v-for="item(object),index in data Variable name in"
Note: in use v-for It is recommended to use it when possible v-for When provided key attribute key Attribute unique
-->
<h2>Traversal object</h2>
<span v-for="value,key,index in user"> [{{index+1}} {{key}} {{value}}]</span>
<h2>Traversal array</h2>
<span v-for="item,index in schools">{{index+1}} {{item}}</span>
<h2>Traverse the objects in the array</h2>
<table border="1" width="100%">
<tr>
<th>number</th>
<th>full name</th>
<th>Age</th>
<th>wages</th>
<th>brief introduction</th>
<th>operation</th>
</tr>
<tr v-for="user,index in users" :key="user.id">
<td>{{user.id}}</td>
<td v-text="user.name"></td>
<td>{{user.age}}</td>
<td>{{user.salary}}</td>
<td>{{user.content}}</td>
<td><a href="">delete</a> <a href="">modify</a></td>
</tr>
</table>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / represents the scope of vue instance
data: {//Used to bind data to vue instances
msg: "Hello vue",
user: {id: 21, name: "Xiao Zhu", age: 23, salary: 2300.00},//Define an object
schools: ["Peking University", "Shanghai University", "Tsinghua University"],
users: [
{id: 22, name: "Xiao Li Yi", age: 23, salary: 2300.23, content: "Xiao Li is a programmer"},
{id: 23, name: "Xiao Li Er", age: 24, salary: 2300.23, content: "Xiao Li Er is a programmer"},
{id: 24, name: "Xiao Li San", age: 25, salary: 2300.23, content: "Xiao Li San is a programmer"},
{id: 25, name: "Xiao Li Si", age: 26, salary: 2300.23, content: "Xiao Li Si is a programmer"},
]
},
methods: {//Related methods used to define some columns for vue instances
}
})
</script>
summary
When using v-for, you must pay attention to adding: key is the only key used to provide reuse and sorting for vue
7. v-model bidirectional binding
v-model: it is used to bind the value of the tag element to be consistent with the data in the vue instance object, so as to realize the two-way data binding mechanism
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--
v-bind: Binding function: used to bind html The properties of the tag are bound and handed to vue Instance management value All attributes except attributes
v-model: Model function: used to html Tagged value Property and give it to vue Instance management is mainly used on form elements, which can best reflect the two-way binding mechanism
Syntax: add directly to the form element label v-model="vue A variable in the instance"
-->
<input type="text" v-model="msg">
</div>
</body>
</html>
<!--introduce vue.js Core document-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / represents the scope of vue instance
data: { //Used to bind data to vue instances
msg: "hello vue",
},
methods: { //Related methods used to define some columns for vue instances
}
});
</script>
Form submission case used by v-model instruction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<form>
user name:<input type="text" v-model="user.username"><br/>
password:<input type="text" v-model="user.password"><br/>
Email:<input type="text" v-model="user.email"><br/>
QQ: <input type="text" v-model="user.qq"><br/>
Verification Code:<input type="text" v-model="user.code"><br/>
<input type="button" value="register" @click="reg">
</form>
</div>
</body>
</html>
<!--introduce vue.js Core document-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app ", / / represents the scope of vue instance
data: { //Used to bind data to vue instances
msg: "hello vue",
user: {}
},
methods: { //Related methods used to define some columns for vue instances
reg() {
alert("register");
//1. Get form data
console.log(this.user);
//2. Send ajax request
}
}
});
</script>
Memo small case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Basic introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--
1.Data in memo list to vue Instance management
2.Add memo
3.Delete memo
4.Empty memo
5.Total number of memoranda
-->
Please enter the content: <input type="text" v-model="content"><button @click="saveContent">Add to memo</button><br>
<ul v-if="lists.length!=0">
<li v-for="(content,index) in lists" :key="index">{{index+1}}. {{content}} <a href="javascript:;" @click="delContent(index)">delete</a>
</li>
</ul>
<ul v-if="lists.length==0">
<li><span style="color: red;">There is no data in the current memo!</span></li>
</ul>
<a v-show="lists.length!=0" href="javascript:;" @click="lists=[]">Empty memo</a>
<h3>Current memo total {{lists.length}} strip</h3>
</div>
</body>
</html>
<!--introduce vue.js Core document-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "Memo case",
lists: ["Eat delicious food tonight,What do you have to eat?,Eat roast duck", "Play games together tonight", "Study together tonight"],//Define original memo
content: "",
},
methods: {
saveContent() {
//console.log("memorandum");
if (!this.content) {
alert("Please enter the content...");
return false;
}
this.lists.push(this.content);
this.content = "";
},
delContent(index) {
//console.log(index);
this.lists.splice(index, 1);//Delete parameters according to subscript 1: where to start deleting parameters 2: delete several parameters
}
}
})
</script>
summary
- Two way binding of data can be realized by using v-model instruction
- The so-called two-way binding is called two-way binding. The change of data in the form leads to the change of data in the vue instance, and the change of data in the vue instance leads to the change of data in the form
MVVM architecture bidirectional binding mechanism
- Model: data bound in Vue instance
- VM: View Model listener
- View: data displayed on the page
8. Differences between methods method and computed calculation attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Series courses</title>
</head>
<body>
<div id="app">
<h1>{{msg}} {{counts}} {{counts}} {{counts}}{{counts}}{{counts}}{{counts}}{{counts}}</h1>
<!--
computed: Calculation attribute recommendation
Function: for love vue When a data is rendered to a page after the relevant business calculation is completed in the instance, it can be used if the data needs to be rendered after business processing computed
Benefits: Promotion vue Operating performance mainly uses computed For calculation related processing, the first calculation result will be cached for multiple use in future pages
use:{{Attribute name}}
-->
number: <input type="text" v-model="item.id">
name: <input type="text" v-model="item.name">
Price: <input type="text" v-model="item.price">
quantity: <input type="text" v-model="item.count">
<button @click="addCart">Add to cart</button>
<table border="1">
<tr>
<th>number</th>
<th>name</th>
<th>Price</th>
<th>Purchase quantity</th>
<th>Subtotal</th>
</tr>
<tr v-for="item,index in items" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><input type="button" value="+" @click="incrementCount(index)"> {{item.count}} <input type="button"value="-" @click="decrementConut(index)">
</td>
<td>{{(item.count * item.price).toFixed(2)}}</td>
</tr>
</table>
<!--<h3>Total price:{{totalPrice()}} element</h3>-->
<h3>Total price: {{ totalPrice }} element</h3>
<h3>Total price: {{ totalPrice }} element</h3>
<h3>Total price: {{ totalPrice }} element</h3>
<h3>Total price: {{ totalPrice }} element</h3>
<h3>Total price: {{ totalPrice }} element</h3>
<h3>Total price: {{ totalPrice }} element</h3>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "methods Methods and computed Differences in calculation properties",
count: 0,
item: {},
items: [
{id: 1, name: "iphone11", price: 23.00, count: 1},
{id: 2, name: "iphone12", price: 23.00, count: 1},
{id: 3, name: "iphone13", price: 23.00, count: 1},
]
},
methods: {
addCart() {
if (!this.item.id) {
alert("Please enter the number");
return false;
}
if (!this.item.name) {
alert('Please enter a name!');
return false;
}
if (!this.item.price) {
alert('Please enter price!');
return false;
}
if (!this.item.count) {
alert('Please enter quantity!');
return false;
}
if (!(this.item.count > 0)) {
alert('Please enter the correct quantity!');
return false;
}
this.items.push(this.item);//Put in array
},
incrementCount(idx) {
// console.log(idx);
// console.log(this.items[idx]);
this.items[idx].count++;
},
decrementConut(idx) {
if (!(this.items[idx].count > 1)) {
alert("Purchase quantity cannot be less than 1 piece!!!");
return false;
}
this.items[idx].count--;
},
totalPriceMethods() {
console.log("===================")
var totalPrice = 0;
for (var i = 0; i < this.items.length; i++) {
totalPrice += this.items[i].count * this.items[i].price;
}
return totalPrice.toFixed(2);
},
// counts() {
// console.log("methods.counts&&&&&&&&&&&&&&&&&&&&&&&&&&&&");
// return this.count + 10;
// }
},
computed: {
counts() {
console.log("computed.counts----------------------");
return this.count + 10;
},
totalPrice() {
//Call methods
return this.totalPriceMethods()
//Calculate yourself
// console.log("==============computed==============");
// //Calculate total price
// var totalPrice = 0;
// for (var i = 0; i < this.items.length; i++) {
// totalPrice += this.items[i].count * this.items[i].price;
// }
// return totalPrice.toFixed(2);
},
}
})
</script>
summary
- computed: calculated attribute recommendation
- Function: used to complete the relevant business calculation in the vue instance. When rendering a data page after working days, if the data needs to be rendered after business processing, you can use computed
- Benefits: to improve the running performance of vue, computed is mainly used for calculation, and the relevant processing will cache the first calculation results, so as to facilitate multiple use of pages in the future
- Use: {{property name}}
9. Event modifier
Modifier: used in conjunction with an event to determine the trigger condition of an event or the trigger mechanism to prevent an event
Common event modifiers
- . stop: stop
- . prevent: block
- . self: alone
- . once: once
stop modifier
- Used to prevent event bubbling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Series courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<div class="aa" @click="divClick">
<!--Used to prevent event bubbling-->
<!--When clicked button The button is not triggered divClick-->
<input type="button" value="Button" @click.stop="btnClick">
</div>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "hello vue"
},
methods: {
divClick() {
alert("div It was clicked...")
},
btnClick() {
alert("button It was clicked...")
}
}
})
</script>
prevent modifier
- Used to block the default behavior of labels
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Series courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--Used to block the default behavior of labels-->
<a href="http://www.baidu. COM / "@click.prevent =" aclick "> Baidu, you will know</a>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "hello vue"
},
methods: {
aClick() {
alert("Baidu once, you know")
}
}
})
</script>
self modifier
- Used to trigger events for the current tag = = = > only events that trigger specific actions on their own tags. They only care about the events triggered on their own tags and do not listen for event bubbles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Series courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--Only events that trigger the tag itself-->
<div class="aa" @click.self="divClick">
<input type="button" value="Button" @click.stop="btnClick">
<input type="button" value="Button 1" @click="btnClick1">
</div>
<!--Used to prevent event bubbling-->
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "hello vue"
},
methods: {
dicClick() {
alert("divClick...")
},
btnClick() {
alert("btnClick...")
},
btnClick1() {
alert("btnClick1...")
}
}
})
</script>
once modifier
- One time function: to trigger the specified event only once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Series courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--
.prevent: Default behavior used to block events
.once: Used to execute a specific event only once
-->
<a href="http://www.baidu. COM / "@ click. Prevent. Once =" aclick "> Baidu, you will know</a>
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "hello vue"
},
methods: {
aClick() {
alert("Baidu once, you know")
}
}
})
</script>
Code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Series courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--
.stop: Function: used to prevent the event from bubbling and to prevent the event from continuing to pass outward
.prevent: Function: used to block the default behavior of labels
.self: Function: only listen to events triggered by its own tag
.once: Function: this event is triggered only once
Syntax: @Event name event modifier="Event handler" ===>@click.stop="test"
-->
<button @click="test">Point me</button>
<h3>stop Modifier </h3>
<div style="width: 200px;height: 200px;background: red" @click="parent">
<div style="width: 100px;height: 100px;background: green" @click.stop="child">
<div style="width: 50px;height: 50px; background: antiquewhite" @click="child1"></div>
</div>
</div>
<h3>prevent Modifier </h3>
<a href="http://www.baidu. COM / "@click.prevent =" beta "> Click me</a>
<a href="javascript:;" @click.prevent="testa">Point me</a>
<h3>self Modifier (Event modifiers can be used together)</h3>
<div style="width: 200px;height: 200px;background: red" @click.self="parent">
<div style="width: 100px;height: 100px;background: aquamarine" @click.self.stop="child">
<div style="width: 50px;height: 50px;background:royalblue" @click="child1"></div>
</div>
</div>
<h3>once Modifier </h3>
<button @click.once="test">Click the I am button, and my click is triggered only once</button>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "Event modifier"
},
methods: {
test() {
console.log("test")
},
parent() {
console.log("parent")
},
child() {
console.log("child")
},
child1() {
console.log("child1")
},
testa() {
console.log("testa")
}
}
})
</script>
10. Key modifier
Function: it is used to bind with key events in the keyboard and modify specific key events
Key event modifier
- .enter
- .tab
- . delete: (capture "delete" and "backspace" keys)
- .esc
- .space
- .up
- .down
- .left
- .right
enter key
- Used to trigger the event after the Enter key is triggered
tab key
- It is used to capture the tab key. It will not be triggered until the current tag is executed
<input type="text" v-model="msg" @keyup.enter="keyups">
<input type="text" @keyup.tab="keytabs">
Code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue Introduction to the series of courses</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--
Event modifier: used to modify a series of descriptions of events
Key modifier: modifier used to modify keyboard key events
keyup keydown ...
.enter Modify the keyboard enter key
.tab Switch to keyboard tab Key modification
.delete (Capture delete and backspace keys)
.esc On the keyboard esc Key modification
.space Space key modification of keyboard
.up Right up
.down lower
.left Left
.right Right
-->
<input type="text" v-model="name" @keyup.enter.tab.delete.esc.space.up.down.left.right="keyup">
<input type="text" @keyup.enter="test">
</div>
</body>
</html>
<!--Introduction core js file-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "Key modifier",
name: ""
},
methods: {
keyup() {
console.log(this.name);
},
test() {
console.log("test");
}
},
computed: {},//Used to define some column calculation properties {{property name}} in the vue instance
})
</script>