Vue.js 5 minutes quick start

Vue.js is a very popular Java MVVM library, which is built with the idea of ​​data-driven and componentization. Compared to Angular.js, Vue.js provides a more concise and easier-to-understand API, allowing us to quickly get started and use Vue.js.

If you have used jQuery to manipulate the DOM before, please put aside the thinking of manually manipulating the DOM when learning Vue.js, because Vue.js is data-driven and you don’t need to manipulate the DOM manually . It binds DOM and data through some special HTML syntax. Once you create the binding, the DOM will be kept in sync with the data, and whenever the data is changed, the DOM will be updated accordingly.

Of course, when using Vue.js, you can also use it in conjunction with other libraries, such as jQuery.

MVVM mode

The following figure not only summarizes the MVVM pattern (Model-View-ViewModel), but also describes how ViewModel interacts with View and Model in Vue.js.

Image for post
Image for post

ViewModel is the core of Vue.js, it is a Vue instance . The Vue instance acts on a certain HTML element. This element can be the HTML body element or an element with an id specified.

When the ViewModel is created, how is the two-way binding achieved?

First of all, we regard the DOM Listeners and Data Bindings in the figure above as two tools, which are the key to two-way binding.

From the View side, the DOM Listeners tool in the ViewModel will help us monitor the changes of the DOM elements on the page. If there are changes, change the data in the Model ; from the Model side, when we update the data in the Model, the Data Bindings tool Will help us update the DOM elements in the page.

Hello World example

The solution of a language, or learning a new skill, write Hello World example is our only way.

This code prints “Hello World!” on the screen.

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8">

<title></title>

</head>

<body>

<! — This is our View →

<div id=”app”>

{{ message }}

</div>

</body>

<src=”js/vue.js”></>

<>

// This is our Model

var exampleData = {

message:’Hello World!’

}

// Create a Vue instance or “ViewModel”

// It connects View and Model

new Vue({

el:’#app’,

data: exampleData

})

</>

</html>

The process of using Vue is the process of defining the various components of MVVM, define view, define model, create a Vue instance or “ViewModel”, which is used to connect View and Model

When creating a Vue instance, you need to pass in an option object, which can contain data, mount elements, methods, mold life cycle hooks, and so on.

In this example, the el attribute of the option object points to View, el:’#app’ indicates that the Vue instance will be mounted to the element <div id=”app”>…</div>; the data attribute points to Model, data: exampleData means that our Model is an exampleData object.

Vue.js has a variety of data binding syntax, the most basic form is text interpolation, using a pair of brace syntax, at runtime {{ message }} will be replaced by the message attribute of the data object, so the page will output “ Hello World!”.

Two-way binding example

The MVVM mode itself implements two-way binding. In Vue.js, you can use the v-model instruction to create two-way data binding on form elements.

<! — This is our View →

<div id=”app”>

<p>{{ message }}</p>

<input type=”text” v-model=”message”/>

</div>

Bind the message to the text box. When the value of the text box is changed, the content in <p>{{ message }}</p> will also be updated.

Conversely, if you change the value of the message, the value of the text box will also be updated, we can try it in the Chrome console.

The data attribute of the Vue instance points to exampleData, which is a reference type, which changes the attribute of the exampleData object and also affects the data attribute of the Vue instance.

Common instructions of Vue.js

The v-model plane used is a common instruction Vue.js, then what is it instruction?

The instructions of Vue.js start with v-. They act on HTML elements. The instructions provide some special features. When the instructions are bound to the element, the instructions will add some special behaviors to the bound target element. You can think of instructions as special HTML attributes.

Vue.js provides some commonly used built-in commands. Next, we will introduce the following built-in commands.

v-if instruction

v-show command

v-else instruction

v-for instruction

v-bind instruction

v-on instruction

v-if instruction

v-show command

v-else instruction

v-for instruction

v-bind instruction

v-on instruction

Vue.js has good scalability, and we can also develop some custom instructions. The following article will introduce custom instructions.

v-if instruction

v-if is a conditional rendering instruction. It deletes and inserts elements according to the true or false of the expression. Its basic syntax is as follows:

v-if=”expression”

v-if=”expression”

Expression is an expression that returns a bool value. The expression can be a bool attribute or an expression that returns bool. E.g:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8">

<title></title>

</head>

<body>

<div id=”app”>

<h1>Hello, Vue.js!</h1>

<h1 v-if=”yes”>Yes!</h1>

<h1 v-if=”no”>No!</h1>

<h1 v-if=”age >= 25">Age: {{ age }}</h1>

<h1 v-if=”name.indexOf(‘jack’) >= 0">Name: {{ name }}</h1>

</div>

</body>

<src=”js/vue.js”></>

<>

var vm = new Vue({

el:’#app’,

data: {

yes: true,

no: false,

age: 28,

name:’keepfool’

}

})

</>

</html>

Note: The four variables of yes, no, age, and name are all derived from the data attribute of the Vue instance option object.

Image for post
Image for post

This code uses 4 expressions:

  • The yes attribute of the data is true, so “Yes!” will be output;
  • The no attribute of the data is false, so “No!” will not be output;
  • The expression age >= 25 returns true, so “Age: 28” will be output;
  • The expression name.indexOf(‘jack’) >= 0 returns false, so “Name: keepfool” will not be output.

The yes attribute of the data is true, so “Yes!” will be output. The no attribute of the data is false, so “No!” will not be output.The expression age >= 25 returns true, so “Age: 28” will be output.The expression name.indexOf(‘jack’) >= 0 returns false, so “Name: keepfool” will not be output.

Note: The v-if instruction executes the insertion or deletion of elements based on the value of the conditional expression.

This can be seen from the rendered HTML source code. Only three <h1> elements are rendered on the surface, and the <h1> element with a v-if value of false is not rendered to HTML.

Image for post
Image for post

To verify this again, you can change the age attribute in the Chrome console so that the value of the expression age >= 25 is false, and you can see that the <h1>Age: 28</h1> element has been deleted.

Age is defined in the data attribute of the option object. Why can Vue instances directly access it?

This is because each Vue instance will proxy the data attribute in its options object.

v-show command

V-show is also a conditional rendering command. Unlike the v-if command, the element using the v-show command will always be rendered to HTML. It simply sets the CSS style attribute for the element.

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8">

<title></title>

</head>

<body>

<div id=”app”>

<h1>Hello, Vue.js!</h1>

<h1 v-show=”yes”>Yes!</h1>

<h1 v-show=”no”>No!</h1>

<h1 v-show=”age >= 25">Age: {{ age }}</h1>

<h1 v-show=”name.indexOf(‘jack’) >= 0">Name: {{ name }}</h1>

</div>

</body>

<src=”js/vue.js”></>

<>

var vm = new Vue({

el:’#app’,

data: {

yes: true,

no: false,

age: 28,

name:’keepfool’

}

})

</>

</html>

Image for post
Image for post

Change the age attribute in the Chrome console so that the value of the expression age >= 25 is false. You can see that the <h1>Age: 24</h1> element is set with style=”display:none”.

v-else instruction

It may be to add an “else block” with v-else instruction, or v-if v-show. The v-else element must immediately follow the v-if or v-show element-otherwise it will not be recognized.

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8">

<title></title>

</head>

<body>

<div id=”app”>

<h1 v-if=”age >= 25">Age: {{ age }}</h1>

<h1 v-else>Name: {{ name }}</h1>

<h1> — — — — — — — — — — -Dividing line — — — — — — — — — — -</h1 >

<h1 v-show=”name.indexOf(‘keep’) >= 0">Name: {{ name }}</h1>

<h1 v-else>Sex: {{ sex }}</h1>

</div>

</body>

<src=”js/vue.js”></>

<>

var vm = new Vue({

el:’#app’,

data: {

age: 28,

name:’keepfool’,

sex:’Male’

}

})

</>

</html>

Whether the v-else element is rendered in HTML depends on whether the v-if or v-show command was used.

In this code, v-if is true, the following v-else will not be rendered to HTML; v-show is true, but the following v-else is still rendered to HTML.

v-for instruction

The v-for instruction renders a list based on an array, which is similar to Java’s traversal syntax:

v-for=”item in items”

v-for=”item in items”

items is an array, and item is the array element currently being traversed.

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8">

<title></title>

<link rel=”stylesheet” href=”styles/demo.css” />

</head>

<body>

<div id=”app”>

<table>

<thead>

<tr>

<th>Name</th>

<th>Age</th>

<th>Sex</th>

</tr>

</thead>

<tbody>

<tr v-for=”person in people”>

<td>{{ person.name }}</td>

<td>{{ person.age }}</td>

<td>{{ person.sex }}</td>

</tr>

</tbody>

</table>

</div>

</body>

<src=”js/vue.js”></>

<>

var vm = new Vue({

el:’#app’,

data: {

people: [{

name:’Jack’,

age: 30,

sex:’Male’

}, {

name:’Bill’,

age: 26,

sex:’Male’

}, {

name:’Tracy’,

age: 22,

sex:’Female’

}, {

name:’Chris’,

age: 36,

sex:’Male’

}]

}

})

</>

</html>

We define a people array in the data attribute of the option object, and then use v-for in the #app element to traverse the people array and output the name, age, and gender of each person object.

Image for post
Image for post

v-bind instruction

The v-bind instruction can have a parameter after its name, separated by a colon in the middle. This parameter is usually an attribute of the HTML element, for example: v-bind:class

v-bind:argument=”expression”

v-bind:argument=”expression”

The following code constructs a simple paging bar, and the v-bind instruction acts on the class feature of the element.

This instruction contains an expression, the meaning of the expression is: highlight the current page.

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8">

<title></title>

<link rel=”stylesheet” href=”styles/demo.css” />

</head>

<body>

<div id=”app”>

<ul class=”pagination”>

<li v-for=”n in pageCount”>

<a href=”javascripit:void(0)” v-bind:class=”activeNumber === n + 1?’active’:’’”>{{ n + 1 }}</a>

</li>

</ul>

</div>

</body>

<src=”js/vue.js”></>

<>

var vm = new Vue({

el:’#app’,

data: {

activeNumber: 1,

pageCount: 10

}

})

</>

</html>

Note the v-for=”n in pageCount” line of code. PageCount is an integer. When traversing, n starts from 0, and then traverses to pageCount –1.

v-on instruction

The v-on instruction is used to monitor DOM events, and its syntax is similar to v-bind, for example, to monitor the click event of the <a> element:

<a v-on:click=”doSomething”>

<a v-on:click=”doSomething”>

There are two ways to call a method: bind a method (let the event point to a reference to the method), or use inline statements.

The Greet button directly binds its click event to the greet() method, while the Hi button calls the say() method.

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8">

<title></title>

</head>

<body>

<div id=”app”>

<p><input type=”text” v-model=”message”></p>

<p>

<! — The click event directly binds a method →

<button v-on:click=”greet”>Greet</button>

</p>

<p>

<! — click event uses inline statement →

<button v-on:click=”say(‘Hi’)”>Hi</button>

</p>

</div>

</body>

<src=”js/vue.js”></>

<>

var vm = new Vue({

el:’#app’,

data: {

message:’Hello, Vue.js!’

},

// Define methods in the `methods` object

methods: {

greet: function() {

// // `this` in the method points to vm

alert(this.message)

},

say: function(msg) {

alert(msg)

}

}

})

</>

</html>

Abbreviations for v-bind and v-on

Vue.js provides abbreviations for the two most commonly used instructions, v-bind and v-on. The v-bind instruction can be abbreviated as a colon, and the v-on instruction can be abbreviated as the @ symbol.

<! — Complete syntax →

<a href=”javascripit:void(0)” v-bind:class=”activeNumber === n + 1?’active’:’’”>{{ n + 1 }}</a>

<! — Abbreviation syntax →

<a href=”javascripit:void(0)” :class=”activeNumber=== n + 1?’active’:’’”>{{ n + 1 }}</a>

<! — Complete syntax →

<button v-on:click=”greet”>Greet</button>

<! — Abbreviation syntax →

<button @click=”greet”>Greet</button>

Written by

Digital Nomad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store