Vue basic instructions example graphic explanation

1. v-on directive

1. Basic usage
2. Syntactic Sugar
3. Event parameters
4. Event modifiers

2. v-if directive

3. v-show command

4. v-for directive

1. Traversing an array
2. Traversing objects
3. Component key attributes
4. Which methods in the array are responsive?

5. v-model directive

1. Basic usage of v-model
2. The principle of v-model
2. Use of v-model in radio
3. Use of v-model in checkbox
4. Use of v-model in select
6. v-model modifiers

Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and various supporting libraries, Vue is fully capable of driving complex single-page applications.

1. v-on directive

1. Basic usage

v-on is an event monitoring instruction. Let's take a look at its 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 bind the click event to the button. v-on:click = "add"

v-on: add the time name at the end
You need to specify the event name of the binding event

Let's see the running effect

2. Syntactic Sugar

We know that the v-bind directive can be abbreviated as:, and v-on can also be abbreviated as @. The above can be abbreviated as follows:

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

3. Event parameters

No parameter method

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

The add method does not take any parameters and can be called in two ways:

Copy the code as follows:
 <button @click="add"> + </button> or <button @click="add()"> + </button>

Both ways of writing are acceptable.

Method with parameters

If a method has parameters, the following case

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

Calling method 1: There are no parameters in the brackets when calling.

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

This is because the parameter passed into the method is undefined.

Calling method 2: without brackets

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

The difference between this and method 1 is that the brackets for calling the method are omitted.

What will be the effect then?

As you can see, it is not undefined at this time, but a MouseEvent mouse event.

Why? In fact, when the mouse clicks the button, the page will automatically generate an event. If no parameters are passed, the event will be automatically passed as a parameter. If you need to call this event, you can enter the method parameter to receive the event parameter explicitly.

Calling method 3: The parameters contain both normal parameters and event parameters

This is when we call, we need 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>

Then look at the effect

Both message and event are passed.

4. Event modifiers

stop: Call event.stopPropagation() to stop the bubbling event

Look at the following code

<!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>

There is a btn in the div, the div has a click event, and the btn also has a click event. When we click the btn, will the two methods be called back? Let's see the effect

The click() method of btn is indeed called, and the click() method of div is also called. This is the event bubbling mechanism, and we usually want to avoid such a situation on the page. So we will write a method to prevent event bubbling.

But in Vue, using the stop modifier can solve this problem. Add the stop modifier to the click event of the btn button

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

This prevents the event from bubbling.

prevent: call event.preventDefault() to prevent the default event

We now define a method in methods

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

When calling, we define a submit form button. We know that the form has its own price increase time. Clicking the button will jump to the action address specified in the form.

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

Now we don't want to use the automatic submission event of submit, we want to stop it and use our custom stopDefaultEventBtn event.

<div id="app" @click="divClick">
 <button @click.stop="btnClick">Stop bubbling event</button><br/><br/>
 <form action="http://www.baidu.com">
  <input type = "submit" @click.prevent="stopDefaultEventBtn" value="Prevent default event"></input>
 </form>
 <!-- submit has its own mode submission event, but usually we don't want to use the default submission time, but use my custom event. -->
</div>

At this time, when we call the method, we find that it will not automatically jump to the event specified by action, but enter the click event.

But there is a problem. Although the event specified by click is called, there is still event bubbling. At the same time, the click event of div is also called. This is simple. Just add an event to prevent bubbling.

<div id="app" @click="divClick">
 <button @click.stop="btnClick">Stop bubbling event</button><br/><br/>
 <form action="http://www.baidu.com">
  <input type = "submit" @click.prevent.stop="stopDefaultEventBtn" value="Prevent default event"></input>
 </form>
 <!-- submit has its own mode submission event, but usually we don't want to use the default submission time, but use my custom event. -->
</div>

(keyCode | keyAlias): The callback is triggered only when the event is triggered by a specific key

Let's listen to a keyboard key event --- listen to the key event 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" Just add .enter after the keyup event

once: trigger the callback only once

Added the .once event, only the first click will respond, and subsequent clicks will not respond.

2. v-if directive

Conditional judgment, there are three instructions

v-if
v-else-if
v-else

See the case

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!-- We often encounter status during development, 1: means enabled, 2: means disabled, 3: means deleted -->
<div id="app">
 <h2 v-if = "status == 1"> Enabled</h2>
 <h2 v-else-if = "status == 2"> Disable</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, so I won't talk about it. One thing I can say is that there are usually only two cases, two very simple cases, we will use v-if and v-else. If the situation is very complicated, it is not recommended to write a lot of v-else-if in the code, because it is not readable. We should put the conditional judgment into methods or computed for calculation, and finally return the result.

Example: Switching between account login and email login on the login interface

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!-- We often encounter status during development, 1: means enabled, 2: means disabled, 3: means deleted -->
<div id="app">
 <label v-if="userLogin">Account login<input type="text" placeholder="Please enter your account">
 </label>
 <label v-else>Email login<input type="text" placeholder="Please enter your 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>

Here, we define a variable userLogin, whether the user is logged in, the default is true; define two labels and a button, click the switch button to switch back and forth between the two labels. The effect is as follows

But there is a problem here. After we enter the content, when we switch the text box, the content will not disappear. As shown below

Problem: After switching the type, the input text is not cleared.

We found that when we entered 1234 in the account login, it was not cleared when we switched to the email login. These are two text boxes, but how did the values get brought over?

reason

This is because when Vue renders the DOM, considering performance issues, it will reuse existing elements as much as possible instead of creating new elements every time. This is Vue's virtual DOM.

As shown above, our DOM elements were previously rendered directly to the browser page. But after adding Vue, Vue will help us cache the DOM elements first and cache them as virtual DOM.

When we use the v-if directive, two div elements cannot be executed at the same time. After the first div element is rendered, when rendering the second div, it finds a similar element, so vue caches a copy. When executing else, vue determines that the elements are the same, but only part of the content is different, then it renders the different parts, and the same ones will not be modified. The content we input is not within the comparison range, so it will be carried over.

How to avoid this? Use the attribute key

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

If the two keys are the same, the virtual dom will cache one copy. If the two keys are different, the virtual dom will cache two copies. Let's see the effect this time.

3. v-show command

v-show is very simple, it just hides/shows elements

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!-- We often encounter status during development, 1: means enabled, 2: means disabled, 3: means deleted -->
<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 them can be displayed. We set isShow=false, and both are hidden, but the results of hiding are different. Let's take a look at the html code

We found that there was only a useShow object in the code, and the display:none style was added, but there was no useIf object. That is, it was directly deleted.

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

v-if: true: add element, false: remove element
v-show: true: add style display:block; false: modify style display:none

So how do you choose?

When the display and hidden switches are frequent, use v-show
When there is only one switch, use v-if

4. v-for directive

There are two forms of traversal: traversal array and traversal object

1. Traversing an 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>

If you traverse an array without a subscript, you can write

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

If it has a subscript, you can write it like this

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

2. Traversing objects

There are three ways to traverse objects

Only display the value of the object
Display the key and value of the object
Display the index, key and value of an object

<!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> Only display the value of the object </p>
 <ul>
  <li v-for="item in students">{{item}}</li>
 </ul>

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

 <p> Display the object's ID </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 as shown above. It should be noted that when displaying key and value, value is written in front and key is written in the back.

3. Component key attributes

It is officially recommended that when using v-for, we should add a :key attribute to the corresponding element

Why add the key attribute?

For details, please refer to this article: www.jianshu.com/p/4bd5e745ce95

After adding :key, the internal computing performance will be improved. So how should it be added?

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

When using, as in the example above: :key="item",

Writing method: :key
What is value? The value here must correspond to value one by one. So, we set it directly to item. Can we set it to index? Of course not, because when we want to add or remove elements in the array, the index changes.

4. Which methods in the array are responsive?

In fact, we usually use subscript modification when traversing an array and modifying the value of the array.

like:

this.languages[0] = "aaaa";

But let's see what happens when subscript modification happens in Vue?

We found that the languages were modified, but the page did not change. In fact, it was indeed modified.

Therefore, we conclude that modifying elements directly through subscripts is non-responsive.

What about other methods of arrays? See the following example

<!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 performed* 1. Add element splice (starting from the nth element, 0, "future language 1", "future language 2")
     * 2. Delete element splice (starting from the nth element, delete several elements)
     * 3. Modify elements: Actually, it means to delete and then add splice (start from the element, modify the elements, and modify the content of the elements)
     */
    // Delete element //this.languages.splice(1, 1)
    // Modify elements //this.languages.splice(1, 2, "pthoon language", "go language")
    // Add elements this.languages.splice(1, 0, "Future Language 1", "Future Language 2")

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

push (add elements from the end---responsive
pop: remove elements from the end --- responsive
shift : remove element from top --- responsive
unshift : add elements from the top --- responsive
splice: add elements, modify elements, delete elements---responsive

Through testing, these methods are all responsive.

Therefore, if we want to modify/delete elements, it is recommended to use splice so that the effect can be seen immediately.

5. v-model directive

1. Basic usage of v-model

The v-model directive is used to implement two-way binding between form elements and array elements.

When you enter content in the input box, the input content will be passed to the data in real time
If data changes, it will be synchronized to the input box in real time.
Two-way binding

Case: Text box input two-way 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>
 The content of the message is: {{message}}
</div>

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

We define a variable message, and then use v-model="message" in the input box to perform a two-way binding with this variable.

2. The principle of v-model

In fact, v-model includes two operations

One is v-bind: bind data to input attribute
The other is v-on: call the input event of the input box to modify the data in real time

Case: Simulating the two-step operation of v-model

First, we know that to let the text box display the value of message in data, we can directly use v-bind:value. In this way, when we modify the value of message, the text box automatically responds.

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

This is to respond to the data in the text box. So, how to synchronize the modified content of the text box with the data? Use the input event of the text box: 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>The content of message 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>

Here, @input is used to bind the input event to the text box. The change() method does not have brackets, and the default parameter event will be automatically passed. If you want to set the event parameter explicitly, you can try @input="change($event)".

Then in the change method, set this.message = event.target.value;

in conclusion:

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

Equivalent to

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

2. Use of v-model in radio

Case: Gender 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="男" v-model="sex">男<input type="radio" name="sex" id="female" value="女" v-model="sex">女</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>

After using v-model, you don't need to use the name attribute. By default, radios with the same v-model value are grouped together.

3. Use of v-model in checkbox

1) Checkbox

Case: Do you 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">Unified agreement<br/>Currently selected: {{agreeContent}}
 </label>
</div>

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

Do you agree to the agreement: agreeContent in data: the value is true or false. True means the text box is selected, false means unchecked

Note: Benefits of labeling

The input is wrapped in a label. The advantage is that clicking the text can also select and cancel. If it is not placed in a label, you must select the checkbox.

2) Checkbox

The value of the checkbox is an array

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <h2>Radio Box</h2>
 <label for="agreeContent">
 <input type="checkbox" name="agreeContent" id="agreeContent" value="Agree to the agreement" v-model="agreeContent">Agree to the agreement<br/>Currently selected: {{agreeContent}}
 </label>
 <br/><br/><br/><br/><br/>
 <h2>Checkbox</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>

A hobbies array is defined in data. And this array is bound to each item in the checkbox payment box. This will achieve the effect

the difference:

The data corresponding to a single checkbox is of type bool
The data corresponding to multiple check boxes is an array type

4. Use of v-model in select

1) Select a single option

<!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="Grape" >Grape</option>
 </select>
 <br/>
 <p>Currently selected: {{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>

Note: In the select radio drop-down box, v-model should be written on the select element

2) Select multiple options

<!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="Grape" >Grape</option>
 </select>
 <br/>
 <p>Currently selected: {{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 selection, add a multiple in select to set it as multiple selection.

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

Let's take a look at the effect

Summarize:

Single choice: Only one value can be selected, v-model is bound to one value
Multiple selection: You can select multiple values, v-model is bound to an array

6. v-model modifiers

1. Lazy modifier

By default, v-model is synchronized in both directions in real time. But sometimes, we don't want it to respond in real time every time it changes. Then, we can use the lazy modifier.

v-model.lazy, after using lazy, press enter or the text box is defocused, that is, synchronize the content

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 
 <input type="text" v-model.lazy="message"/>
 <p>The content of message is:{{message}}</p>

</div>

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

See the effect

2. Number modifier

Usually when we write a text box that can only input numbers, we will write <input type="number" v-model = "count">

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <input type="number" v-model = "count">
 <p>Type of count: {{count}} --- {{typeof count}}</p>

</div>

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

But what type of count value is obtained by writing this? We use {{typeof count}} to see the type of count. As shown below

We can see that the type of count is String, not number. How can we make count a number? Use v-model.number="count", as shown below:

<input type="number" v-model.number = "count">

3. trim modifier

Usually when we enter text in a text box, we may accidentally enter a space. We can use the trim modifier to remove the spaces on the left and right of the text box.

<input type="text" v-model.trim="name">

This is the end of this article about Vue basic instructions with pictures and examples. For more relevant Vue basic instructions, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: