1. Attribute binding
-1. Dynamic attribute assignment in href
Syntax: v-bind: href = "attributes in Vue"
Simplified writing: href = "url"
<body>
<div id="app">
grammar:v-bind:href="Vue Properties in"-->
<a v-bind:href="url">baidu</a>
<!-- Simplified writing :href="url" -->
<a :href="url">Baidu</a>
</div>
<!-- -->
<script src = "../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
//key:value
url: "http://www.baidu.com",
}
})
</script>
</body>
-2.class type binding
Multiple styles can be defined in class
Requirement: class needs to be dynamically assigned,
Rule:: class is the binding of attributes. After binding, find the corresponding attributes
colorClass: after "blue", find the corresponding CSS style according to the value blue
<head>
<meta charset="utf-8">
<title></title>
<style>
.red{
background-color: red;
width: 90px;
height: 23px;
}
.blue{
background-color: blue;
width: 90px;
height: 23px;
}
</style>
</head>
<body>
<div id="app">
<div :class="colorClass">gules class</div>
</div>
<!-- -->
<script src = "../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
//key:value
url: "http://www.baidu.com",
colorClass: "red",
}
})
</script>
</body>
-3.class attribute switching
-Requirements: control the style display through buttons
-Syntax: class = {name of class type: false/true}
The default value is true. If false, rendering is closed
<head>
<meta charset="utf-8">
<title></title>
<style>
.red{
background-color: red;
width: 90px;
height: 23px;
}
.blue{
background-color: blue;
width: 90px;
height: 23px;
}
</style>
</head>
<body>
<div id="app">
<div :class="{red: flag}">Red switch </div>
<button @click="flag=!flag">switch</button> </div>
<!-- -->
<script src = "../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
//key:value
url: "http://www.baidu.com",
colorClass: "red",
flag: true
}
})
</script>
</body>
2. Branch structure grammar
Branching structure
Syntax:
1. If V-IF is true, the tag will be displayed
2.v-else-if must be used with v-if
3.v-else must be used in conjunction with v-if for negation
Case:
Requirements: rated according to the test results of users
>=90 excellent
>=80 good
>=70 points medium
>=60 points pass
Otherwise you will fail
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Branching structure</title>
</head>
<body>
<div id="app">
<!-- Branching structure
grammar:
1.v-if If true, the data will be displayed
2.v-else-if Must be with v-if Combined use
3.v-else Must be with v-if Combined use
demand:Performance evaluation
excellent/good/secondary/pass/fail,
-->
<h3>grade</h3>
Please enter a score: <input type="number" v-model="score"/>
<div v-if="score>=90">excellent</div>
<div v-else-if="score>=80">good</div>
<div v-else-if="score>=70">secondary</div>
<div v-else-if="score>=60">pass</div>
<div v-else>fail,</div>
</div>
<!-- -->
<script src = "../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
//key:value
score: 70
}
})
</script>
</body>
</html>
3 . Cyclic structure
Repeat the same operation multiple times
1. Array v-for((value,index) in array)
2. Object v-for((value,key,index) in obj)
3. The set of objects in the array (set) v-for(user in userList) is subsequently passed through user Attribute value
Requirements:
1. Display the data in the array on the page
2. Get subscript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Branching structure</title>
</head>
<body>
<div id="app">
<p v-for="item in array" v-text="item">
<!-- {{item}} -->
</p>
<!-- 2.Get subscript
grammar: v-for="(Traversal element,Traversal subscript) in array"
-->
<p v-for="(item,index) in array">
subscript:{{item}}--- Data value: {{index}}
</p>
<!-- 2.Traversal object -->
<p v-for="(value,key,index) in user">
{{key}}----{{value}}---{{index}}
</p>
<!-- 3.ergodic"aggregate" -->
<p v-for="user in userList">
ID: {{user.id}}
|name: {{user.name}}
|age: {{user.age}}
</p>
<!-- summary:
1.If traversing array parameters(value,index)
2.If traversing object parameters(value,key,index)
characteristic:Traversal data is displayed in the page
-->
</div>
<!-- -->
<script src = "../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
//key:value
array: ["Guo Jingjing","Malone","Liu peixia"],
user: {
id:10,
name:"kl",
age:18
},
userList: [{
id:10,
name:"kl",
age:18
},
{
id:11,
name:"k4",
age:19
}
]
}
})
</script>
</body>
</html>
4. Form operation
Forms are usually used when submitting data
Almost every form writes action Action is now rarely used (synchronous operation)
Action is usually disabled by blocking the default behavior, and then the handwriting click event triggers the subsequent action (Ajax)
User input label body
1. Text box
2. Radio <- Radio box: the name attribute must be consistent - >. If you want to click the text trigger of the radio box, you can use male
3. Select multiple checkboxes, V-model = hobbies, two-way data binding / / when defining multiple data, hobbies should use an array
4. Drop down box select < option
5. Text field < textarea
6.form submit v-on: click Prevent = "method name" prevents the default commit event
Master the writing method of bidirectional data binding of each label Value has more than one use array
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Common form properties</title>
</head>
<body>
<h1>This case exercises how data is related to when a form submits data vue Data binding</h1>
<div id="app">
<form id="userForm"action="http://www.baidu.com">
<div>
<span>
full name:
</span>
<span>
<input type="text" name="name" v-model="name"/>
</span>
</div>
<div>
<span>Gender:</span>
<span>
<!-- Radio : name Properties must be consistent -->
<input type="radio" name="gender" value="male" id="man" v-model="gender"/>
<label for="man">male</label>
<input type="radio" name="gender" value="female" id="women" v-model="gender"/>
<label for="women">female</label>
</span>
</div>
<div>
<span>hobby:</span>
<input type="checkbox" name="hobbies" value="eat" v-model="hobbies"/>eat
<input type="checkbox" name="hobbies" value="drink" v-model="hobbies"/>drink
<input type="checkbox" name="hobbies" value="play" v-model="hobbies"/>play
</div>
<div>
<span>occupation</span>
<!-- If it needs to be set to multiple selection, add the attribute -->
<select name="occupation" v-model="occupation" multiple="true">
<option value="worker">worker</option>
<option value="teacher">teacher</option>
<option value="engineer">engineer</option>
</select>
</div>
<div>
<span>Personal profile</span>
<textarea name="userInfo" style="width: 200px;height: 50px;" v-model="userInfo"></textarea>
</div>
<div>
<!-- Block default commit events -->
<input type="submit" value="Submit" v-on:click.prevent="submitForm"/>
</div>
</form>
</div>
<!-- introduce JS file -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
name: 'Enter a name',
gender: 'female',
//An array should be used when defining multiple data
hobbies: ['eat','','play'],
occupation: ['worker'],
userInfo: ''
},
methods: {
submitForm(){
//Data submission
console.log("full name:"+this.name)
console.log("Gender:"+this.gender)
console.log('hobby:'+this.hobbies)
console.log('occupation:'+this.occupation)
console.log('User details:'+this.userInfo)
console.log('After encapsulating the data,have access to ajax Data submission by')
}
}
})
</script>
</body>
</html>
Form modifier
v-model.number can only enter numeric types
v-model.trim removes left and right spaces
The. v-modellazy defocus event is not dynamic in real time. Confirm that the input is completed and changed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form modifier</title>
</head>
<body>
<div id="app">
<!-- grammar:
.number Only numeric types can be entered
.trim Remove left and right spaces
.lazy Defocus event -->
<h3>Data presentation: {{age}}</h3>
Age:<input type="text" v-model.number="age"/>
<button @click="addNum">increase</button>
<br />
Length of user name input:{{name.length}}<br />
user name:<input type="text" v-model.trim="name"/>
<br />
Presentation data:{{msg}}<br />
msg:<input type="text" v-model.lazy="msg"/>
</div>
<!-- -->
<script src = "../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
name: '',
age: 15,
msg: 1234
},
methods: {
addNum(){
this.age+=1
}
}
})
</script>
</body>
</html>
5. Calculation attribute
Complex operations are redundant if encapsulated by {}} interpolation expressions
If complex operations are encapsulated as method calls, it is inefficient to execute them once at a time
3 * calculation attribute:
1. It can encapsulate complex operations
2. There is an internal cache mechanism, which only needs to be calculated once High efficiency of multiple calls
Requirements:
Reverse the user's input back
API:
1. Convert string to array split(')
2. Reverse the array ()
3. Convert array to string join(')
Calculate attribute function usage:
1. Simple arithmetic calculation should be written in the interpolation expression. If it is complex, it should be encapsulated
2. If the data operations are the same, the process should be simplified
Summary: computing attributes is more efficient than methods (getting results directly from virtual DOM)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calculation properties</title>
</head>
<body>
<div id="app">
<h3>Data presentation: {{msg}} </h3>
<br>
{{reverse()}}<br>
{{reverse()}}<br>
{{reverse()}}<br>
{{reverse()}}<br>
{{reverseCom}}<br> <!-- The calculated property is executed only once-->
{{reverseCom}}<br>
{{reverseCom}}<br>
<input type="text" v-model="msg"/>
</div>
<!-- -->
<script src = "../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
//key:value
msg: 'abc'
},
methods: {
reverse(){
console.log("Method execution")
return this.msg.split('').reverse().join('')
}
},
computed: {
reverseCom(){
console.log("Calculation properties!!!!")
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
7. Array operation
Array method
The name push in java: pop pop stack
push() appends data at the end
pop() deletes the last and first element
shift() deletes the first element
unshift() appends an element at the beginning
splice() replaces the data in the array
sort() data sort
reverse() array inversion
splice() replaces the data in the array
arg1: the starting position of operation data starts from 0
arg2: number of operations in Arabic numerals
arg3: replaced data Can have multiple (variable parameter types)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array operation</title>
</head>
<body>
<div id="app">
Input box: <input type="text" v-model="msg"/>
<span v-for="(value) in array">{{value}}</span><br>
<button @click="push">push</button>
<button @click="pop">pop</button>
<button @click="shift">shift</button>
<button @click="unshift">unshift</button>
<button @click="splice">Replace first</button>
</div>
<!-- -->
<script src = "../js/vue.js"></script>
<script>
const APP = new Vue({
el: "#app",
data: {
//key:value
array: ["a","b","c"],
msg: ''
},
methods: {
push(){
this.array.push(this.msg)
},
pop(){
this.array.pop()
},
shift(){
this.array.shift()
},
unshift(){
this.array.unshift(this.msg)
},
splice(){
/*
1.Replace the first element with msg
this.array.splice(0,1,this.msg)
2.Replace the first two elements with msg,
this.array.splice(0,2,this.msg)
3.Replace the first two elements with msg and msg, respectively
this.array.splice(0,2,this.msg,this.msg)
4.Replace the last with msg
this.array.splice(this.array.length-1,1,this.msg)
5.Delete the second element
this.array.splice(1,1)
*/
this.array.splice(0,2,this.msg)
},
},
})
</script>
</body>
</html>
8 VUE life cycle (difficulty!!)
Cycle:
1. Initialization cycle
1. Before beforecreate Vue object instantiation (just started)
2. created
3. beforeMount
4. Mounted indicates that the VUE object is instantiated successfully (DIV rendering is completed)
2. Modification cycle
- beforeUpdate before users modify data
- After the updated user modifies the data
3. Destruction cycle - beforeDestroy VUE object before destruction
- After the destroyed VUE object is destroyed (the last step)
**Function of life cycle function:
If you need to perform additional operations on the data in the VUE object The lifecycle function is used
Purpose: the framework has better expansibility (customized)**
