Catalog

1. v-on Instructions

2. v-if Instructions

3. v-show Instructions

4. v-for Instructions

5. v-model Instructions


One . v-on Instructions

1. Basic usage

v-on It's an instruction for event monitoring , Let's look at the simple usage

<!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="add"> + </button>
<button v-on:click="sub"> - </button>

</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
add() {
this.counter ++
},
sub() {
this.counter --

}

}
});
</script>
</body>
</html>

We've bound click events to buttons . v-on:click = "add"

  • v-on: Add the time name after it
  • You need to specify the event name of the binding event

Let's see how it works

2. Grammatical sugar

We know , v-bind The instruction can be abbreviated as :, Again v-on It can also be abbreviated , Shorthand for @, The above can be abbreviated as follows :

<button @click="add"> + </button>
<button @click="sub"> - </button>

3. Parameters of the event

  • The nonparametric method

The above cases are all without parameters . If the method has no parameters , So we can omit the brackets when calling

add Method without parameters , There are two ways to write when calling :
<button @click="add"> + </button>
perhaps
<button @click="add()"> + </button>

Both ways of writing are OK .

  • There is a way of reference

If a method has parameters , The following cases

<script>
var app = new Vue({
el: "#app",
data: {
num1: 10,
num2: 100
},
methods: {
print(message) {
console.log(
" Print " + message)
}

}
});
</script>

Call mode 1: So when calling, there are no parameters in the brackets . 

<div id="app">
<button @click="print()"> Print </button>
</div>

This is the parameter of the method. What you pass in is undefined.

Call mode 2: Without brackets

<div id="app">
<button @click="print"> Print </button>
</div>

Here and in the way 1 Is the difference between the , The parentheses for calling methods are omitted .

What will be the effect at this time ?

You can see , It's not undefined 了 , It is a MouseEvent Mouse events . 

Why? ? Actually , When the mouse clicks the button , The page automatically generates an event , If no parameters are passed , This event will be automatically passed as a parameter , If you need to call this event , that , You can enter parameters in the method , The reception of the display event Parameters .

Call mode 3: There are common parameters in the parameters , And then there is event Parameters

This is when we call , To use $event

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="print"> button1 </button>
<button @click="print1('aaa')"> button2 </button>
<button @click="print1('aaa', $event)"> button3 </button>
</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
num1: 10,
num2: 100
},
methods: {
print(message) {
console.log(" Print " + message)
},
print1(message, event){
console.log(" Print " + event + ", message:" + message)
},
print2(message, event) {
console.log("event:" + event + ", message:" +
message)
}

}
});
</script>
</body>
</html>

And then look at the effect

At the same time message and event It's all passed on

4. Event modifier

  • .stop : call event.stopPropagation() Stop bubbling

Look at the code below

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" @click="divClick">
<button @click="btnClick"> Button </button>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello"
},
methods:{
divClick(){
console.log(
"divClick")
},
btnClick(){
console.log("btnClick"
)
}

}
});
</script>
</body>
</html>

div There's a btn, div There is one click event , btn There is also a click event , When we click btn When , There are two ways to call back ? Let's see the effect

It does call btn Of click() Method , And it calls div Of click() Method . This is the bubble mechanism of events , Usually we want to avoid this situation on the page . So I'll write a method to prevent the event from bubbling .

But in vue Inside , Use stop Modifiers can solve this problem . stay btn Button on the click The number of events increased stop Modifier

<div id="app" @click="divClick">
<button @click.stop="btnClick"> Button </button>
</div>

This prevents bubbling

  • .prevent: call event.preventDefault() Block default events

We are now methods Define a method in

stopDefaultEventBtn(){
console.log("stopDefaultEventBtn")
}

When called , Let's define a submit Form submit button , We know that forms have their own time to raise prices , Click the button to jump to form The form specifies action Address .

<div id="app" @click="divClick">
<button @click.stop="btnClick"> Stop bubbling </button><br/><br/>
<form action="http://www.baidu.com">
<input type = "submit" value=" Block default events "></input>
</form>

</div>

Now we don't want to use submit Automatically submit events for , We're going to stop him , Instead, we use our custom stopDefaultEventBtn event .

<div id="app" @click="divClick">
<button @click.stop="btnClick"> Stop bubbling </button><br/><br/>
<form action="http://www.baidu.com">
<input type = "submit" @click.prevent="stopDefaultEventBtn" value=" Block default events "></input>
</form>
<!-- submit It has its own pattern to submit Events , But usually we don't want to use the default commit time , Instead, use my custom events . -->
</div>

At this time , We're calling methods , It doesn't automatically jump to action Specified event , But into click event .

But there's a problem , Although the call click Specified events , But there are still events bubbling , It also calls and div Of click event , This simple , Just increase the number of bubble prevention events .

<div id="app" @click="divClick">
<button @click.stop="btnClick"> Stop bubbling </button><br/><br/>
<form action="http://www.baidu.com">
<input type = "submit" @click.prevent.stop="stopDefaultEventBtn" value=" Block default events "></input>
</form>
<!-- submit It has its own pattern to submit Events , But usually we don't want to use the default commit time , Instead, use my custom events . -->
</div>
  • .(keyCode | keyAlias): Callbacks are triggered only when an event fires from a particular key

Let's listen to a key press event on a keyboard --- Monitor the key events of the enter button on the keyboard

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="keyup" /><br/><br/>
</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello"
},
methods:{
keyup() {
console.log(
"keyup")
}

}
});
</script>
</body>
</html>

@keyup.enter="keyup" stay keyup Add... After the event .enter that will do

  • .once: Only one callback is triggered  

Added .once Events , Only the first click responds , There is no response after clicking .

Two . v-if Instructions

conditional , There are three instructions

  • v-if
  • v-else-if
  • v-else

Let's look at the case

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- We usually encounter states in the development process , 1: Means to enable , 2: Disable 3: Said to delete -->
<div id="app">
<h2 v-if = "status == 1"> Enable </h2>
<h2 v-else-if = "status == 2"> Ban </h2>
<h2 v-else> Delete </h2>
</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
status: 1
}
});
</script>
</body>
</html>

This case is very simple , Don't say . One thing to say , There are usually only two situations , Two very simple situations , We will use v-if, v-else. If the situation is complicated , It's not recommended to write a lot of code v-else-if, Because of poor readability , We should put the conditional judgment on methods perhaps computed Calculation in , Last result returned .

Case study : The login interface uses the switch between account login and email login

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- We usually encounter states in the development process , 1: Means to enable , 2: Disable 3: Said to delete -->
<div id="app">
<label v-if="userLogin"> To login
<input type="text" placeholder=" Please enter your account number ">
</label>
<label v-else> Email login
<input type="text" placeholder=" Please enter email address ">
</label>
<button @click="userLogin = !userLogin" > Switch </button>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
userLogin: true
}
});
</script>
</body>
</html>

ad locum , We defined a variable userLogin, Whether it is a user login , The default is true; Define two label And a button, Click the switch button , Here are two label Switch back and forth between . The effect is as follows

But there's a problem , When we type in the content , When switching text boxes , The content doesn't go away . Here's the picture

  • The problem is : Switched types , The input text is not cleared .

We found that , Enter... In the account login 1234, Switch to the mailbox login time , But it wasn't emptied . These are two text boxes , But how was the value brought here ?

  • reason

This is because vue It's going on dom When rendering , Consider performance issues , Reuse existing elements as much as possible . Instead of creating new elements every time . This is it. vue The virtual dom.

Pictured above , our dom Elements , Previously, it was rendered directly to the browser page . But added vue in the future , vue Will help us to dom The element is cached first , The cache is virtual dom.

When we use v-if At the time of instruction , Two div It's impossible for elements of to execute at the same time . first div After the elements are rendered , In rendering the second div When , He found similar elements , that vue Just one . When executed else When , vue The judgment element is the same , It's just part of it is different , Then render different parts , The same thing doesn't change . And what we input , Not within the scope of comparison , therefore , Will be taken over .

  • How to avoid this situation ? Use attributes key

<div id="app">
<label v-if="userLogin"> To login
<input type="text" placeholder=" Please enter your account number " key="user">
</label>
<label v-else> Email login
<input type="text" placeholder=" Please enter email address " key="email">
</label>
<button @click="userLogin = !userLogin" > Switch </button>
</div>

If two key It's the same , So virtual dom Just one , If two key Is different , So virtual dom Two copies of it will be cached . Let's see the effect this time

3、 ... and . v-show Instructions

v-show It's simple , It's hiding / Display element

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- We usually encounter states in the development process , 1: Means to enable , 2: Disable 3: Said to delete -->
<div id="app">
<h2 v-if = "isShow"> Enable </h2>
<h2 v-show = "isShow"> Enable </h2>

</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: true
}
});
</script>
</body>
</html>

Both of these can be shown , We set up isShow=false, It's all hidden , But the hidden results are different . Let's see html Code

We found that there was only useShow object , And added display:none style , But not useIf object . That is to say, it was deleted directly

summary :  v-if and v-show The difference between

  • v-if: true: Additive elements , false: Remove elements
  • v-show: true: Add style display:block; false: Modify the style display:none

So how to choose ?

  • When reality and concealment switch frequently , Use v-show
  • When there is only one switch , Use v-if

Four . v-for Instructions

Traversal has traversal arrays , There are two forms of traversing objects

1. Traversal array

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in languages">{{item}}</li>
<li v-for="(item, index) in languages"> {{index}}--{{item}}</li>

</ul>
</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
languages: ["java", "php", "python"]
}
});
</script>
</body>
</html>

Traversing arrays without subscripts , It can be written like this

<li v-for="item in languages">{{item}}</li>

If you have a subscript , It can be written like this

<li v-for="(item, index) in languages"> {{index}}--{{item}}</li>

2. Traversing objects

There are three ways to traverse objects

  • Show only the value

  • Show the key and value

  • Show the index, key and value

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="app">
<p> Show only the value </p>
<ul>
<li v-for="item in students">{{item}}</li>
</ul>

<p> Show the key and value </p>
<ul>
<li v-for="(value, key) in students">{{key}} -- {{value}}</li>
</ul>

<p> Displays the number of the object </p>
<ul>
<li v-for="(value, key, index) in students">{{index}} -- {{key}} -- {{value}} </li>
</ul>

</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
students: {
name:
"zhangsan",
age: 20,
sex: "male"

}

}
});
</script>
</body>
</html>

The specific writing method is shown in the figure above . It should be noted that , When displayed key and value When , value Write it at the front , key Written in the back

3. Component's key attribute

The official recommendation , We are using v-for When , You should add a :key attribute

Why add key Attribute? ?

Refer to this article in detail : https://www.jianshu.com/p/4bd5e745ce95

Added :key in the future , It will improve the internal computing performance , So how to add it ?

<ul>
<li v-for="item in students" :key="item">{{item}}</li>
</ul>

When you use it , Example above : :key="item",

  • How to write it :    :key
  • What is the value ?  The value here has to be equal to value One to one correspondence . therefore , We set it directly to item. If set to index Is that all right? ? Of course not , Because when you want to add or subtract elements in an array , index It changed

4. Which methods in the array are responsive

Actually , Usually we're traversing arrays , When changing the value of an array , Used to modify with subscripts .

Such as :

this.languages[0] = "aaaa";

however , Let's see. , The subscript is modified in vue What will happen in China ?

We found that the changes languages, But the page didn't change , In fact, it's really changed

therefore , We come to a conclusion : Modify elements directly by subscript , It's nonresponsive .

What about the other methods of arrays ? Look at the following case

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in languages"> {{index}}--{{item}}</li>
</ul>
<br><br/><br/><br/><br/>
<button @click="pushMethod">push</button>
<button @click="popMethod">pop</button>
<button @click="shiftMethod">shift</button>
<button @click="unShiftMethod">unshift</button>
<button @click="updateElement"></button>
<button @click="spliceMethod">splice</button>

</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
languages: ["java", "php", "python", "go", "c Language "]
},
methods: {
pushMethod() {
this.languages.push(" Other languages ")
},
popMethod() {
this.languages.pop()
},
shiftMethod() {
this.languages.shift()
},
unShiftMethod() {
this.languages.unshift(" Other languages ")
},
updateElement(){
this.languages[0] = "aaaa"
;
},

spliceMethod() {
/**
* splice Can be done
* 1. Additive elements splice( Start with the element number , 0, " The language of the future 1", " The language of the future 2")
* 2. Remove elements splice( Start with the element number , Delete a few elements )
* 3. Modifying elements : In fact, it's adding after deleting splice( Start with the element number , Modify a few elements , Modified element content )
*/
// Remove elements
//this.languages.splice(1, 1)
// Modifying elements
//this.languages.splice(1, 2, "pthoon Language ", "go Language ")
// Additive elements
this.languages.splice(1, 0, " The language of the future 1", " The language of the future 2") }
}
});
</script>
</body>
</html>
  • push( Add elements from the end --- Responsive
  • pop : Remove element from tail --- Responsive
  • shift : Remove the element from the top --- Responsive
  • unshift : Add elements from the top --- Responsive
  • splice : Additive elements , Modifying elements , Remove elements --- Responsive

Pass the test , These methods are all responsive .

therefore , If we want to modify / Remove elements , It is recommended to use splice, So you can see the effect immediately .

5、 ... and . v-model Instructions

1.  v-model The basic usage of

v-model Instruction is used to realize the bidirectional binding of form elements and array elements

  • When you type in the input box , The input will be delivered to data data
  • data Data changes , It will also be synchronized to the input box in real time
  • Two way binding

Case study :  Text box input bidirectional synchronization

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<form>
<input type="text" placeholder=" Please enter " v-model="message">
</form>
message The content is :{{message}}
</div> <script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
message: "hello"
}
});
</script>
</body>
</html>

We defined a variable message, And then in input Use... In the input box v-model="message" You can bind to this variable in both directions

2. v-model Principle

Actually v-model There are two operations

  • One is v-bind: binding data Data to input attribute
  • The other is v-on: Call the input event , Real time modification data data

Case study : simulation v-model Two step operation of

First , We know to let the text box show data in message Value , You can use it directly v-bind:value, So we changed message Value , Text box auto response

<input type="text" placeholder=" Please enter " :value="message">

This is responding data to a text box . that , How to modify the content of the text box , Synchronization to data ? Input events using text boxes : v-on:input

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" placeholder=" Please enter " :value="message" @input="change"> <p>message The content is :{{message}}</p>
</div> <script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
message: "hello"
},
methods: {
change(event) {
this.message = event
.target.value;
}

}
});
</script>
</body>
</html>

It's used here @input Bound the text box with input event , change() Method is not bracketed , The default parameters are automatically event Transfer the past , If you want to display the settings event Parameters , You can try @input="change($event)".

And then in change In the method , Set up this.message=event.target.value;

Conclusion :

<input type="text" v-model="message">

Equate to

<input type="text" v-bind:value="message" v-on:input="message=$event.target.value">

2. v-model stay radio The use of

Case study : Sex selection

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<form>
<input type="radio" name="sex" id="male" value=" male " v-model="sex"> male
<input type="radio" name="sex" id="female" value=" Woman " v-model="sex"> Woman
</form>
The current selection is : {{sex}}
</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
sex: " male "
}
});
</script>
</body>
</html>

Used v-model in the future , You don't have to use name The attribute is , The default will have the same v-model It's worth it radio As a group

3. v-model stay checkbox The use of

1) checkbox Radio buttons

Case study : Whether to agree to the agreement

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label for="agreeContent">
<input type="checkbox" name="agreeContent" id="agreeContent" value=" Agree to the agreement " v-model="agreeContent"> The unified agreement
<br/> The current selection is : {{agreeContent}}
</label>

</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
agreeContent: false
}
});
</script>
</body>
</html>

Whether to agree to the agreement : data In the data agreeContent: The value is true perhaps false. true Indicates that the text box is selected , false Means to deselect

Be careful : label The benefits of

input It's wrapped in label in , The advantage of this is , You can also select and cancel by clicking on the text . If you don't put it in lable in , You have to select the check box .

2) checkbox Check box

The value of the check box is an array

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2> Radio buttons </h2>
<label for="agreeContent">
<input type="checkbox" name="agreeContent" id="agreeContent" value=" Agree to the agreement " v-model="agreeContent"> Agree to the agreement
<br/> The current selection is : {{agreeContent}}
</label>
<br/><br/><br/><br/><br/>
<h2> Check box </h2>
<form>
<input type="checkbox" name = "hobby" value=" Table Tennis " v-model="hobbies"> Table Tennis
<input type="checkbox" name = "hobby" value=" Basketball " v-model="hobbies"> Basketball
<input type="checkbox" name = "hobby" value=" football " v-model="hobbies"> football
<input type="checkbox" name = "hobby" value=" Volleyball " v-model="hobbies"> Volleyball
<br/> The currently selected hobby is : {{hobbies}}
</form>
</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
agreeContent: false,
hobbies:[]
}
});
</script>
</body>
</html>

stay data A is defined in hobbies Array . And bind this array to checkbox Every item in the payment box . You can achieve the effect

difference :

  • A single check box corresponds to data yes bool type
  • Multiple check boxes correspond to data It's an array type

4. v-model stay select The use of

1) select The radio

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<select v-model="selectOne">
<option id="apple" value=" Apple " > Apple </option>
<option id="banana" value=" Banana " > Banana </option>
<option id="strawberry" value=" strawberry " > strawberry </option>
<option id="grape" value=" grapes " > grapes </option>
</select>

<br/>
<p> The current selection is : {{selectOne}}</p>
</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
sex: " male ",
selectOne:" Apple "
}
});
</script>
</body>
</html>

Be careful : stay select In the radio drop-down box , v-model To write in select Element

2) select multi-select

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<br/>
<br/>
<br/>
<select v-model="favoriteFrite" multiple>
<option id="apple" value=" Apple " > Apple </option>
<option id="banana" value=" Banana " > Banana </option>
<option id="strawberry" value=" strawberry " > strawberry </option>
<option id="grape" value=" grapes " > grapes </option>

</select>
<br/>
<p> The current selection is : {{favoriteFrite}}</p>
</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
favoriteFrite:[]
}
});
</script>
</body>
</html>

When using multiple choice , stay select Add one multiple It can be set to multiple check boxes .

In the data , We need to set it to an array . Such as favoriteFrite:[]

Let's see the effect

summary :

  • The radio : Only one value can be selected , v-model The binding is a value
  • multi-select : You can select multiple values , v-model The binding is an array

4. Vue More articles on basic instructions

  1. vue Custom instruction

    Vue Custom instruction : Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  2. vue Use cases of custom instructions

    Reference material : 1. vue Custom instruction : 2. vue Custom instruction implementation v-loading: v-loading, yes element-ui A transition animation instruction in the component library for data loading , It's also rarely needed in projects ...

  3. vue Instructions

    I learned before angular Find out angular and vue It's a little bit like But first, let me say new  Vue({          el: "#box", // element( Elements ) At present ...

  4. vue User defined instruction Usage Summary and cases

    1.vue What are the instructions in ?

  5. vue The order of

    One . What is? VUE? It builds the user interface JavaScript frame ( Let it automatically generate js,css,html etc. ) Two . How do you use it? VUE? 1. introduce vue.js 2. Exhibition HTML <div id=" ...

  6. vue Custom instruction (Directive Medium clickoutside.js) The understanding of the

    Read the directory vue Custom instruction clickoutside.js The understanding of the Back to the top vue Custom instruction clickoutside.js The understanding of the vue See the following blog for custom instructions : vue Custom instruction In general, we need DOM fuck ...

  7. Vue User defined instruction error :Failed to resolve directive: xxx

    Vue User defined instruction error Failed to resolve directive: modle This error report has 2 One reason : 1. The command word is misspelled 2.Vue.directive() This method is not written in the new Vue ...

  8. vue The instructions of ps Simple contrast angular

    These two days are beginning vue Large scale projects , Discovery and ng There are still many differences , Here's a comparison between the two instruction systems The difficulty coefficient :ng It's more difficult than vue: At least vue I haven't found it yet @&=:require,compile,precom ...

  9. The first 3 Chapter -Vue.js Instruction extension and todoList practice

    One . Learning goals understand Vue.js The principle of instruction implementation understand v-model Advanced usage of instructions Able to use Vue.js Command complete todoList practice ( a key + difficulty ) Two .todoList Practice effect display 2.1. Renderings ...

  10. The first 2 Chapter -Vue.js Instructions

    One . Learning goals understand what yes Vue.js Instructions understand Vue.js The directive purpose master Vue.js The writing standard of instructions can Use Vue.js Instruction complete department page interaction effect ( Difficulties and key points ) Two . The basics of instruction ...

Random recommendation

  1. Easy implementation based on linux or win Running chat server program

    For developers who don't understand network programming , Writing a good server communication program is a troublesome thing . But by EC With this free component, you can easily build one based on linux or win Deploy the running network service program . This convenience benefits entirely from m ...

  2. iOS Gradient tips .Labe Word wrap

    UILabel *noticeLabel = [[UILabel alloc]init]; noticeLabel.text = @" The current account has lost its effect , The current account has been cleared and the effect has been lost , The current account has been cleared ...

  3. 【 turn 】【C#】SendMessage

    SendMessage It's a user32.dll Declarative API function , stay C# Import the following : using System.Runtime.InteropServices; [DllImport(" ...

  4. HDOJ1010(BFS)

    // Why? bfs No way , can't follow the reasoning #include<cstdio>#include<cstring>#include<queue>using namespace st ...

  5. lintcode: Count the planes

    Count the planes Give a list of the take-off and landing times of the aircraft , use interval Sequence representation . Please figure out how many planes there are in the sky at the same time ? If more than one plane lands and takes off at the same time , We think landing has priority . Examples For each aircraft take-off and landing time list ...

  6. js-- Understanding of event objects 2

    example 1: A string of flying with the mouse div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  7. How to use php Achieve file upload and display

    First , We need to create a foreground page to operate, select files, etc : <body> <div id="div1"></div> <form action=&q ...

  8. .NET and PHP How programmers can quickly cash in through technology

    At the beginning of writing blog, I hope you can give me some advice , Less questioning, more help , We can be friends . Last one :<.NET Programmer how do I pass a product in 2 Buy a car and a house in the year > A lot of fellow programmers left me messages , From the overall message ...

  9. [LeetCode] 513. Find Bottom Left Tree Value_ Medium tag: BFS

    Given a binary tree, find the leftmost value in the last row of the tree. Example 1: Input: 2 / \ 1 ...

  10. netty In network communication tcp Unpacking problem

    A project in work , One of our applications works with the banking system tcp When communicating , Sometimes the messages sent by the bank will be returned several times . stay tcp In this case, packets are sent in small packets many times, which becomes the problem of unpacking . One of them , And the most common idea is in the message header ...