catalogue
What is a vue framework?
vue framework is a progressive framework, which can be embedded as a part of your application. Its feature is that it can not reuse components, state management, virtual DOM and layers. (learning vue requires a certain basic knowledge of HTML, CSS and JavaScript)
Basic concept of creating vue
1. Understand the basic framework of vue:
<html>
<div id="app">{{message}}</div>
</html>
<script>
const app=new Vue({
el:'app', / / used to mount elements to be managed
date:{
message:'HELLO'
}
})
</script>
The basic framework of vue is composed of < HTML > < / HTML > and < script > < / script >.
2. What can options put?
el: (this attribute is the element to which vue is mounted)
Date: (the date attribute usually stores some data, which can be customized or loaded from the server from the network)
Methods: Methods
There are eight main life cycles: beforecreate - > created - > beforemount - > mounted - > BeforeUpdate
->Update->beforeDestory->Destoryed
3.vue list display
In html, v-for can iterate data through an object attribute. Such as the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movie">{{item}}</li>//Loop output from movie as a list
</ul>
</div>
<script src="../../vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'Hello',
movie: ['HARRY POTTER','QUEEN','MONKEY KING' ]//[] array
}
})
</script>
</body>
</html>Item in < Li V-for = "item in movie" > {item}} < / Li > is the alias of group element change, and movie is the source array name.
Interpolation operation
1. Three expression methods of interpolation statement (see the following code example for details)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}},Li Huanying</h2>
<h2>{{firstName+' '+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2><!--Same effect as the previous one-->
</div>
<script src="../../vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'Hello',
firstName: 'LI',
lastName: 'Huanying'
}
})
</script>
</body>
</html>
The renderings are as follows:
2. Syntax of interpolation statement
mustache: it's the double curly braces of {}} in the above code, and then its data is responsive
v-once: this instruction does not need to be followed by any expression, but it means that elements and components are rendered only once and will not change with the change of data
V-text: usually only one String type of data is displayed (for example: v-text="message" will only output message)
V-pre: {}} displays the original syntax (for example: < p v-pre > {{message}} < / P > = > displays {{message}})
V-cloak: before vue parsing, there is an attribute v-cloak in div. after vue parsing, there is no attribute v-cloak in div
3.MVVM
View: the view layer (DOM) presents various information to users
Model: data layer (request from the network)
VueModel: View simulation layer, communicating with View and Model, and listening to the corresponding date
Dynamic binding properties
1. Basic use of v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHREF">use Baidu Search
</a>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgURL:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1365571441,2409347385&fm=15&gp=0.jpg',
//Get pictures from Baidu
aHREF:'http://www.baidu.com'
}
})
</script>
</body>
</html>2.v-bind dynamic binding class (object syntax)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<style>
.active {
font-size:20px;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="active">{{message}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'HELLLO',
active: 'Heby',
}
})
</script>
</body>
</html>3.v-bind dynamic binding class (array syntax)
Method 1: bind a class directly through [];
<h2 :class="['active']">hello heby</h2>
Method 2: you can also pass in multiple values through judgment;
<h2 :class="['active'=isAcitve,'line': isLine]">hello heby</h2>
Usage 3: it exists at the same time as ordinary classes without conflict;
Note: if both isActive and isLine are true, there will be three classes: title/active/line;
<h2 class="title" :class="['active'=isAcitve,'line': isLin]">hello heby</h2>
Usage 4: if it is too complex, it can be placed in a methods or computed;
Note: classes is a calculation attribute;
<h2 class="title" :class="classes">hello heby</h2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<h2 class="title" :class="[active,line]">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'HELLO',
active:'AAAA',
line:'bbbb'
},
methods:{
getClasses:function (){
return[this.active,this.line]
}
}
})
</script>
</body>
</html>4.v-bind dynamic binding style (object syntax)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<h2 :style="{fontsize:number+'px',fontcolor:aa}">{{message}}</h2>
<h2 :style="change()">{{message}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello',
number:100,
aa:'red',
},
methods:{
change:function (){
return{fontsize:this.number+'px',backgroundColor:this.aa}
}
}
})
</script>
</body>
</html>5.v-bind dynamic binding style (object syntax)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<h2 :style="[aaa,bbb]">{{message}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello',
aaa:{backgroundColor:'red'},
bbb:{fontSize:'100px'},
}
})
</script>
</body>
</html>Note: the naming should be meaningful and the type can be known. The naming of the above code is not advisable.
6. Combination of V-for and v-bind
Case: click which content and which content turns red (change the style). The detailed code is shown in the figure below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<!-- Which font turns red-->
<div id="app">
<ul>
<li v-bind:class="{active:currentIndex === index}"
v-for="(item,index) in movies" v-on:click="change(index)">{{item}}
<!--First, the subscript is 0, and the subscript is changed at a single point-->
</li>
</ul>
</div>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
movies:["Resident Evil","Mobile maze","Harry Potter",'Mobile Castle'],
currentIndex:0
},
methods:{
change: function (index) {
console.log(this.currentIndex)
this.currentIndex=index
}<!-- First in console Pop up the previous original subscript,
Then assign the clicked subscript to currentIndex，change active Attribute to which line-->
}
})
</script>
</body>
</html>Calculation properties
The calculation attribute is essentially an attribute, which is generally get(), set() (generally not used).
1. Basic application of calculation attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<h2>{{fullname}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
firstname:'Liu',
lastname:'Haoran',
},
computed:{
fullname:function (){
return this.firstname+' '+this.lastname
}
}
})
</script>
</body>
</html>2. Complex operation of calculating attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in books">{{item}}</li>
</ul>
<h2>Total price:{{totalPrice}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books:[
{name:'aaa',price:100},
{name:'bbb',price:200},
{name:'ccc',price:300},
{name:'ddd',price:400},
{name:'eee',price:500},
]
},
computed:{
totalPrice:function (){
let result=0;
for(let i=0;i<this.books.length;i++){
result+=this.books[i].price
}
return result
}
}
})
</script>
</body>
</html>3. Calculate the setter and getter of the attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstname: 'Huang',
lastname:'Heby'
},
computed: {
fullName:{
//set:function (newValue){
//console.log('-------',newValue);
//const name=newValue.splice(' ');
//this.firstname=name[0];
//this.lastname=name[1];
//},
//Generally, only get is used to calculate the attribute. If there is no set, it is a read-only attribute
get: function () {
return this.firstname + ' ' + this.lastname
}
//get read data
}
}
})
</script>
</body>
</html>4. Comparison between calculation attributes and methods
The rendering effect of computed is roughly the same as that of methods, but when computed is used multiple times, it will only be called once, because it is cached, and methods are method changes, so it is better to print multiple times. When processing a large amount of data, computed is best used.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<!--1.Direct assembly: the grammar is too complicated-->
<h2>{{firstname}} {{lastname}}</h2>
<br>
<!--2.By definition method-->//The data is not cached and must be re executed every time
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<br>
<!--3.adopt computed-->//Data cache, the same data is executed only once
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstname:'Huang',
lastname:'Heby'
},
methods:{
getFullName:function () {
return this.firstname+' '+this.lastname
}
},
computed:{
fullName:function (){
return this.firstname+' '+this.lastname
}
}
})
</script>
</body>
</html>event listeners
The function of v-on is to bind and listen to events. The abbreviation is @
1. Basic use of v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<h2>{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button>-->
<!-- <button v-on:click="couner--">-</button>-->
<button v-on:click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter:0
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
})
</script>
</body>
</html>2. Parameter problem of v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<!--1.The event calling method has no parameters-->
<button @click="btn1Click()">Button 1</button>
<button @click="btn1Click">Button 1</button>
<!--2.When defining an event, the parentheses are omitted when writing a method, but the method itself needs a parameter. At this time,
vue The browser will be produced by default event The event object is passed into the method as a parameter-->
<!--<button @click="btn2Click(123)">Button 2</button>-->
<!--<button @click="btn2Click">Button 2</button>-->
<button @click="btn2Click">Button 2</button>
<!--3.When defining methods, we need event Object, and other parameters are required at the same time-->
<!--How to manually obtain the browser parameters in the calling mode event object:$event-->
<button @click="btn3Click(abc,$event)">Button 3</button>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello',
abc:123
},
methods:{
btn1Click(){
console.log("btn1Click");
},
btn2Click(event){
console.log('-------',event);
},
btn3Click(abc,event){
console.log('+++++++',abc,event);
},
}
})
</script>
</body>
</html>When using the methods defined in methods for @ click to call, you need to pay attention to the following parameters:
Case 1: if the method does not require additional parameters, it may not be added after the method (), for example: btnClick
Note: if there is a parameter in the method itself, the event parameter of the native event will be passed in by default, for example: btnClick(event)
Case 2: if you need to pass in a parameter and an event at the same time, you can pass in an event through $event, for example, btnClick (abc, event) = > $event
Modifier of 3.v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<div id="app">
<!--1..stop Use of modifiers:call event.stopPropagation()Stop bubbling-->
<div @click="divClick">
aaaaa
<button @click.stop="btnClick">Button</button>
</div>
<!--2..prevent Use of modifiers:call event.preventDefault()Block default behavior-->
<form action="baidu">
<input type="submit" value="Submit" @click.prevent="subClick">
</form>
<!--3..Monitor the key cap of a keyboard:It doesn't count until the key cap pops up-->
<input type="text" @keyup="keyUp">
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello'
},
methods:{
btnClick(){
console.log("btnClick");
},
divClick(){
console.log("divClick");
},
subClick(){
console.log("subClick");
},
keyUp(){
console.log("keyUp");
},
}
})
</script>
</body>
</html>Event. In event handling Preeventdefault() or event Stoppropagation () is a very common requirement
Stop: stop event bubbling
prevent: block default events
. enter: monitor button
. once: the element executes only once
. native: I don't know. I haven't learned yet
<from v-on:submint. Prevent = "onsubmit" > < / from > / / submit the event and no longer reload the page
Conditional judgment
1. Use of V-IF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
{{message}}
</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'HELLO',
isShow:true
}
})
</script>
</body>
</html>2. Use of V-IF and v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
{{message}}
</h2>
<h1 v-else>isShow by false Show me when</h1>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'HELLO',
isShow:true
}
})
</script>
</body>
</html>3. Use of V-IF and v-else-if and v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<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>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
score:99
},
computed:{
result(){
let showMessage='';
if (this.score>=90){
showMessage='excellent'
}else if(this.score>=80){
showMessage='good'
}
// This is calculated by calculating attributes
}
}
})
</script>
</body>
</html>4. Use of v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--v-if: When the condition is false When, include v-if The element of the instruction will not exist at all dom in-->
<h2 v-if="isShow" id="aaa">{{message}}</h2>
<!--v-show:When the condition is false When, v-show Just add an inline style to our element: display:none-->
<h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'HELLO',
isShow:true
}
})
</script>
</body>
</html>Note: v-show can be used multiple times
Loop traversal
1.v-for traversal array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1.In the process of traversal, the index value is not used(Subscript value)-->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!--2.In the process of traversal, get the index value-->
<ul>
<li v-for="(item,index) in names">
{{index+1}}.{{item}}</li>
</ul>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
names:['why','book','james','curry']
}
})
</script>
</body>
</html>2.v-for traversal object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--1.In the process of traversing the object, if only one value is obtained, the obtained value is value-->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!--2.obtain key and value Format( val，key)，key It's his variable name-->
<ul>
<li v-for="(value,key) in info">{{value}}-{{key}}</li>
</ul>
<!-- 3.obtain key and val and index Format( value，key，index)-->
<ul>
<li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index+1}}</li>
</ul>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
info:{
name:'why',
age:18,
height:188
}
}
})
</script>
</body>
</html>
3. Adding key s during V-for use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">Button</button>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters:['A','B','C','D']
},
methods:{
btnClick() {
//1.push method
//this.letters.push('aaa');
//2. Modify the elements in the array through the index value
this.letters[0]='BBBBBB';
}
}
})
</script>
</body>
</html>Note: in the process of rendering, key allows vue to distinguish the places that need rendering. It is generally recommended to use id as the key value in conjunction with v-for.
4. Which arrays are responsive
push (): insert into background data
pop(): delete the last element in the array
shift (): deletes the first element in the array
unshift(): adds an element to the front of the array
splice(): delete / insert / replace elements
For example, the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">Button</button>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters:['A','B','C','D']
},
methods:{
btnClick() {
//1.push method
//this.letters.push('aaa');
//this.letters.push('aaa'，'bbb','ccc');
//2.pop(): delete the last element in the array
//this.letters.pop();
//3.shift(): deletes the first element in the array
//this.letters.shift();
//4.unshift(): adds an element to the front of the array
//this.letters.unshift('aaa')
//5.splice function: delete elements / insert elements / replace elements
//Delete element:
//From the second parameter, you need to delete three elements (if not, delete all elements)
//this.letters.splice(1,3)
//Replace element:
//Replace from the second parameter
//this.letters.splice(1,2,'aaa','bbb')
//Insert element,
//From the second parameter, pass in 0, followed by the element to be inserted
//this.letters.splice(1,0,'x','y','z')
//6.sort()
//7.reverse()
//Modifying elements in an array by index values
//this.letters[0]='BBBBBB';
//this.letters.splice(0,1,'bbb')
//Set (object to be modified, index value, modified value)
//vue.set(this.letters,0,'bbb')
}
}
})
</script>
</body>
</html>Higher order function
Use of higher-order functions: fliter/map/reduce
Filter: the callback function has a requirement: it must return a Boolean value (true: plus; false: filter)
map: easier to use and calculate
reduce: Sum
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// Programming paradigm: imperative object programming / declarative programming
// Programming paradigm: object oriented programming (First Citizen: object) / functional programming (First Citizen: function)
// Filter / map / reduce (three higher-order functions)
// The callback function in filter has one requirement: it must return a Boolean value
//True: when true is returned, the n of this callback will be automatically added to the new array inside the function
//False: when false is returned, the function will filter this time's n
//Three higher-order functions are used together:
//Method 1
const nums = [10, 20, 30, 4, 2, 333, 99, 45]
// let total =nums.filter(function (n) {
// return n < 50
// }).map(function (n){
// return n * 2
// }).reduce(function (preValue,n){
// return preValue + n
// },0)
// console.log(total)
//Method 2
let total=nums.filter(n=>n<50).map(n=>n*2).reduce((pre,n)=>pre+n);
console.log(total)
//Use of filter function
// const nums = [10, 20, 30, 4, 2, 333, 99, 45]
// let newNums = nums.filter(function (n) {
//
// })
// console.log(newNums);
//2. Use of map function
// let new2Nums = newNums.map(function (n) {
// return n * 2
// })
// console.log(new2Nums);
// 3. Function of reduce function
// The reduce function is to summarize all the contents in the array
// new2Nums. Reduce (parameter 1, parameter 2). Parameter 1 is a function
// let total = new2Nums.reduce(function (preValue, n) {
// return preValue + n
// }, 0)
// console.log(total)
// First time: preValue 0 n 20
// Second time: preValue 20 n 40
// Third time: preValue 60 n 60
// Fourth time: preValue 120 n 8
// Fifth time: preValue 128 n 4
// Sixth time: preValue 132 n 222
// 1. Demand: take out all numbers less than 50
// let newNums = []
// for(let n of nums){
// if(n<50){
// newNums.push(n)
// }
// }
// 2. Requirement: convert all numbers less than 100: all * 2
// let new2Nums=[]
// for (let n of newNums){
// new2Nums.push(n*2)
// }
</script>
</body>
</html>Use of v-model
1. Basic use of V-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">{{message}}</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'HELLO'
}
})
</script>
</body>
</html>2. Principle of V-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" :value="message" v-on:input="change">
<h2>{{message}}</h2></div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'HELLO'
},
methods:{
change(event){
this.message=event.target.value;
}
}
})
</script>
</body>
</html>Note: event Target always points to the element at the time of the event
3.v-model combined with radio type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" name="sex" value="male" v-model="aa">male
</label>
<label for="female">
<input type="radio" id="female" name ="sex" value="female" v-model="aa">female
</label>
<!-- name The same or the same binding is mutually exclusive-->
<h2>The gender you choose is:{{aa}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
aa:''
}
})
</script>
</body>
</html>4.v-model combined with checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.checkbox Radio box, Boolean only-->
<!-- <label for="agree">-->
<!-- <input type="checkbox" id="agree" v-model="isAgree">Consent agreement-->
<!--disabled Self contained Boolean value-->
<!-- </label>-->
<!-- <h2>You have chosen{{isAgree}}</h2>-->
<!-- <button :disabled="!isAgree">next step</button>-->
<!-- 2.checkbox Checkbox -->
<input type="checkbox" value="Basketball" v-model="hobbies">Basketball
<input type="checkbox" value="Football" v-model="hobbies">Football
<input type="checkbox" value="Tennis" v-model="hobbies">Tennis
<input type="checkbox" value="Billiards" v-model="hobbies">Billiards
<input type="checkbox" value="baseball" v-model="hobbies">baseball
<H2>What are your hobbies{{hobbies}}</H2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'HELLO',
isAgree:false,
hobbies:[]
}
})
</script>
</body>
</html>5.v-model combined with select type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.Select one-->
<select name="abc" v-model="fruit">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="watermelon">watermelon</option>
<option value="Cherry">Cherry</option>
</select>
<h2>Your favorite fruit is:{{fruit}}</h2>
<!-- 2.Select multiple-->
<select name="abc" v-model="fruits" multiple>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="watermelon">watermelon</option>
<option value="Cherry">Cherry</option>
</select>
<h2>Your favorite fruit is:{{fruits}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'HELLO',
fruit:'Apple',
fruits:[]
}
})
</script>
</body>
</html>Note: radio is a single choice, change the boolean value, and put multiple choices into the data; select single choice to change the initial value. Multiple choices should be put into the array, but multiple should be added.
6. Use of V-model modifier
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.Modifier: lazy-->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<!-- 2.Modifier: number-->
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}</h2>
<!-- 3.Modifier: trim-->
<input type="text" v-model.trim="name">
<h2>The name you entered is:{{name}}</h2>
</div>
<script src="../../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'HELLO',
age:0,
name:''
}
})
</script>
</body>
</html>Lazy (lazy loading): the default is to synchronize the data of the input box in the input event (generally, once the data changes, the data in the opposite data will change automatically). The lazy modifier allows the data to be updated when it loses focus or enters
Number: by default, whether we enter letters or numbers in the input box, they will be treated as string types. Number is to convert them into number types
tirm: you can filter the spaces on both sides of the content
The above is a week's study