1. Interpolation expression
Purpose: insert content directly into the dom tag
Also known as: declarative rendering / text interpolation
Syntax: {expression}}
<template>
<div>
<h1>{{ msg }}</h1>
<h2>{{ obj.name }}</h2>
<h3>{{ obj.age > 18 ? 'adult' : 'under age' }}</h3>
</div>
</template>
<script>
export default {
data() { // Fixed format, where vue data is defined
return { // key is equivalent to variable name
msg: "hello, vue",
obj: {
name: "Small vue",
age: 5
}
}
}
}
</script>
<style>
</style>
2.vue instruction - v-bind
Target: set the value of vue variable for label attribute
vue instruction, in essence, is a special html tag attribute, with the characteristics of starting with v -
Each instruction has its own function
-
Syntax: v-bind: attribute name = "vue variable"
-
Abbreviation: attribute name = "vue variable"
<!-- vue instructions-v-bind Attribute dynamic assignment --> <a v-bind:href="url">I am a label</a> <img :src="imgSrc">
3.1 Vue instruction - v-on
Target: bind events to tags
-
grammar
-
v-on: event name = "a small amount of code to execute = ="
-
v-on: event name = "function in methods"
-
v-on: event name = "function (argument) in methods"
-
-
Abbreviation: @ event name = "function in methods"
<!-- vue instructions: v-on Event binding-->
<p>The quantity of goods you want to buy: {{count}}</p>
<button v-on:click="count = count + 1">Add 1</button>
<button v-on:click="addFn">Add 1</button>
<button v-on:click="addCountFn(5)">Add 5 pieces at a time</button>
<button @click="subFn">reduce</button>
<script>
export default {
// ... other omitted
methods: {
addFn(){ // this represents the component object behind export default (subordinates have attributes return ed from data)
this.count++
},
addCountFn(num){
this.count += num
},
subFn(){
this.count--
}
}
}
</script>3.2vue instruction -v-on event object
Objective: get the event object in the vue event handling function
-
Syntax:
-
No parameters are transmitted and received directly through formal parameters
-
Pass parameters, and pass $event to the event handler through the event object
-
<template>
<div>
<a @click="one" href="http://Www.baidu.com "> stop Baidu</a>
<hr>
<a @click="two(10, $event)" href="http://Www.baidu.com "> stop going to Baidu</a>
</div>
</template>
<script>
export default {
methods: {
one(e){
e.preventDefault()
},
two(num, e){
e.preventDefault()
}
}
}
</script>3.3vue instruction - v-on modifier
Purpose: after the event. Modifier name - bring more powerful functions to the event
-
Syntax:
-
@Event name. Modifier = "function in methods"
-
. stop - prevent event bubbling
-
. prevent - block default behavior
-
. once - the event handler is triggered only once during program operation
-
-
<template>
<div @click="fatherFn">
<!-- vue The modifier is set for the event, After the event.Modifier names can be used for more functions -->
<button @click.stop="btn">.stop Prevent event bubbling</button>
<a href="http://Www.baidu.com "@ click. Prevent =" BTN ">. Prevent block default behavior</a>
<button @click.once="btn">.once During program operation, The event handler is triggered only once</button>
</div>
</template>
<script>
export default {
methods: {
fatherFn(){
console.log("father Triggered");
},
btn(){
console.log(1);
}
}
}
</script>3.4vue command - v-on key modifier
Objective: to add modifiers to keyboard events and enhance their ability
-
Syntax:
-
@keyup.enter - monitors the Enter key
-
@keyup.esc - monitor return key
-
<template>
<div>
<input type="text" @keydown.enter="enterFn">
<hr>
<input type="text" @keydown.esc="escFn">
</div>
</template>
<script>
export default {
methods: {
enterFn(){
console.log("enter Press enter");
},
escFn(){
console.log("esc Press the button");
}
}
}
</script>4.1 Vue instruction v-model
Goal: bind the value attribute and vue data variable together in two directions
-
Syntax: v-model="vue data variable"
-
Bidirectional data binding
-
Data change - > view Auto sync
-
View change - > automatic data synchronization
-
<template>
<div>
<!--
v-model:Is to achieve vuejs Variables and form labels value attribute, Bidirectional bound instructions
-->
<div>
<span>user name:</span>
<input type="text" v-model="username" />
</div>
<div>
<span>password:</span>
<input type="password" v-model="pass" />
</div>
<div>
<span>From: </span>
<!-- Drop down menu to bind to select upper -->
<select v-model="from">
<option value="Beijing">Beijing</option>
<option value="Nanjing City">Nanjing</option>
<option value="Tianjin">Tianjin</option>
</select>
</div>
<div>
<!-- (important)
Check box encountered, v-model Variable value of
Non array - Associated is the of the check box checked attribute
array - Associated is the of the check box value attribute
-->
<span>hobby: </span>
<input type="checkbox" v-model="hobby" value="smoking">smoking
<input type="checkbox" v-model="hobby" value="drink">drink
<input type="checkbox" v-model="hobby" value="Write code">Write code
</div>
<div>
<span>Gender: </span>
<input type="radio" value="male" name="sex" v-model="gender">male
<input type="radio" value="female" name="sex" v-model="gender">female
</div>
<div>
<span>self-introduction</span>
<textarea v-model="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
pass: "",
from: "",
hobby: [],
sex: "",
intro: "",
};
// Summary:
// Pay special attention to: v-model, which is in the multi checkbox state of input[checkbox]
// If the variable is not an array, the checked attribute is bound (true/false) - commonly used for: single binding
// If the variable is an array, the value in their value attribute is bound - commonly used to collect which values are checked
}
};
</script>
4.2vue instruction v-model modifier
Goal: make v-model more powerful
-
Syntax:
-
v-model. Modifier = "vue data variable"
-
. number is converted to numeric type with parseFloat
-
. trim removes leading and trailing white space characters
-
. lazy is triggered on change instead of inupt
-
-
<template>
<div>
<div>
<span>Age:</span>
<input type="text" v-model.number="age">
</div>
<div>
<span>Life motto:</span>
<input type="text" v-model.trim="motto">
</div>
<div>
<span>self-introduction:</span>
<textarea v-model.lazy="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
age: "",
motto: "",
intro: ""
}
}
}
</script>5.vue instructions v-text and v-html
Purpose: update innerText/innerHTML of DOM object
-
Syntax:
-
v-text="vue data variable"
-
v-html="vue data variable"
-
-
Note: the interpolation expression is overwritten
<template>
<div>
<p v-text="str"></p>
<p v-html="str"></p>
</div>
</template>
<script>
export default {
data() {
return {
str: "<span>I am a span label</span>"
}
}
}
</script>6.vue instructions v-show and v-if
Objective: to control the hiding or appearance of labels
-
Syntax:
-
v-show="vue variable"
-
v-if="vue variable"
-
-
principle
-
display:none hidden for v-show (frequently switched)
-
v-if is removed directly from the DOM tree
-
-
senior
-
v-else use
-
<template>
<div>
<!--Principle: display: none -->
<h1 v-show="isok">v-show My box</h1>
<h2 v-if="istrue">v-if My box</h2>
<!-- v-if v-else v-else-if -->
<p v-if="age < 18">under age</p>
<p v-else-if="age > 18 && age < 60">adult</p>
<p v-else>old age</p>
</div>
</template>
<script>
export default {
data() {
return {
isok: false,
istrue: true,
age: 15,
};
},
};
</script>
<style>
</style>7.1vue instruction - v-for
Target: list rendering, label structure, cyclic generation according to the amount of data
-
grammar
-
v-for = "(value, index) in target structure"
-
v-for = "value in target structure"
-
-
Target structure:
-
Can traverse array / object / number / string (traversable structure)
-
-
be careful:
The temporary variable name of v-for cannot be used outside the range of v-for
<template>
<div id="app">
<div id="app">
<!-- v-for Put a set of data, Render as a group DOM -->
<!-- Pithy formula: Who will generate the loop, v-for On who -->
<p>Student name</p>
<ul>
<li v-for="(item, index) in arr" :key="item">
{{ index }} - {{ item }}
</li>
</ul>
<p>Student details</p>
<ul>
<li v-for="obj in stuArr" :key="obj.id">
<span>{{ obj.name }}</span>
<span>{{ obj.sex }}</span>
<span>{{ obj.hobby }}</span>
</li>
</ul>
<!-- v-for Traversal object(understand) -->
<p>Teacher information</p>
<div v-for="(value, key) in tObj" :key="value">
{{ key }} -- {{ value }}
</div>
<!-- v-for Ergodic integer(understand) - Start with 1 -->
<p>Serial number</p>
<div v-for="i in count" :key="i">{{ i }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
arr: ["Xiao Ming", "Xiao Huanhuan", "chinese rhubarb"],
stuArr: [
{
id: 1001,
name: "Sun WuKong",
sex: "male",
hobby: "Eat peaches",
},
{
id: 1002,
name: "Zhu Bajie",
sex: "male",
hobby: "Back daughter-in-law",
},
],
tObj: {
name: "Xiao Hei",
age: 18,
class: "1 stage",
},
count: 10,
};
},
};
</script>7.2v-for update monitoring
Target: when the target structure of v-for traversal changes, Vue triggers v-for update
Case 1: array flip
Case 2: array interception
Case 3: update value
Pithy formula:
Changing the array method will lead to v-for update and page update
If the array is not changed, returning a new array will not cause v-for update. You can overwrite the array or this.$set()
<template>
<div>
<ul>
<li v-for="(val, index) in arr" :key="index">
{{ val }}
</li>
</ul>
<button @click="revBtn">Array flip</button>
<button @click="sliceBtn">Intercept the first 3</button>
<button @click="updateBtn">Update first element value</button>
</div>
</template>
<script>
export default {
data(){
return {
arr: [5, 3, 9, 2, 1]
}
},
methods: {
revBtn(){
// 1. Array flipping allows v-for to update
this.arr.reverse()
},
sliceBtn(){
// 2. Array slice method will not cause v-for update
// slice does not change the original array
// this.arr.slice(0, 3)
// Resolve v-for update - overwrite original array
let newArr = this.arr.slice(0, 3)
this.arr = newArr
},
updateBtn(){
// 3. When updating a value, v-for cannot be monitored
// this.arr[0] = 1000;
// Solve - this.$set()
// Parameter 1: update target structure
// Parameter 2: update location
// Parameter 3: update value
this.$set(this.arr, 0, 1000)
}
}
}
</script>
<style>
</style>These methods trigger array changes, and v-for monitors and updates the page
-
push()
-
pop()
-
shift()
-
unshift()
-
splice()
-
sort()
-
reverse()
These methods do not trigger v-for updates
-
slice()
-
filter()
-
concat()
-
map()
Note: vue cannot be updated by monitoring the assignment action in the array. If necessary, please use Vue.set() or this.$set() or overwrite the entire array