Vue.js--60 minute Quick Start

Vue.js Introduction

Vue.js is a very hot JavaScript MVVM library, which is built on the idea of data-driven and component-based. The Angular.js,vue.js provides a cleaner, easier-to-understand API that allows us to get started quickly and use Vue.js.

If you've been accustomed to using jquery to manipulate the DOM, learn vue.js by throwing away the thought of manually manipulating the DOM, because Vue.js is data-driven and you don't need to manipulate the DOM manually. It binds the DOM and the data through some special HTML syntax. Once you create a binding, the DOM synchronizes with the data, and whenever the data is changed, the DOM is updated accordingly.

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

The demo and source code of this article has been put on GitHub, if you think this is a good content, please click to praise, or add a star on GitHub!

V-for Demo V-bind Demo Page demo GitHub Source

MVVM mode

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

ViewModel is the core of vue.js and it is a Vue instance. the Vue instance acts on an HTML element, which can be either the BODY element of the HTML or an element that specifies an ID.

How is the two-way binding achieved when ViewModel is created?

First, we look at DOM listeners and data bindings as two tools, which are key to implementing two-way binding.
From the view side, the DOM listeners tool in the ViewModel helps us to monitor the changes in DOM elements on the page, changing the data in the model if there are any changes;
From the model side, the data bindings tool helps us update the DOM elements in the page as we update the model.

Hello World Example

Understanding a language, or learning a new technology, writing the Hello World example is our only way.
This code prints "Hello world!" on the screen.

<! DOCTYPE html>
The process of using Vue is the process of defining the various components of the MVVM.

 
 

  
  
 
   
Define View
 
   
Define Model
 
   
Create a View instance or "ViewModel", which is used to connect the view and model
 
  
 
 
When you create a Vue instance, you need to pass in an option object that can contain data, mount elements, methods, die lifecycle hooks, and so on.
In this example, the El property of the option object points to the view, el: ‘#app‘ indicating that the Vue instance will be mounted to <div id="app">...</div> the element, and thedata property points to the model, data: exampleData Indicates that our model is a Exampledata object.
Vue.js has a variety of data binding syntax, the most basic form of text interpolation, using a pair of curly braces syntax, at run time {{ message }} by the data object's message property is replaced, so the page will output "Hello world!".
Vue.js has been updated to version 2.0, but since it is not yet a full version, the code for this article is 1.0.25 version.
Two-Way Binding example
The MVVM pattern itself implements two-way binding, and in vue.js you can use v-model directives to create bidirectional data bindings on form elements.
<!--This is our view--><div id= "app" ><p>{{message}}</p><input type= "text" v-model= "message"/ ></div>
Binds a message to a text box, and when you change the value of the text box, <p>{{ message }}</p> the contents are also updated.
Conversely, if you change the value of the message, the value of the text box is updated, and we can try it in the chrome console.
The data property of the Vue instance points to Exampledata, which is a reference type that alters the properties of the Exampledata object and also affects the data property of the Vue instance.
Common directives for Vue.js
The above is used by v-model vue.js a common command, then what is the directive?
vue.js directives are v-start, they work on HTML elements, and directives provide special features that, when binding directives to an element, add special behavior to the target element of the binding, and we can treat the instruction as a special HTML attribute (attribute). 
Vue.js provides some commonly used built-in directives, and we'll cover several built-in directives below:

 
 

  
  
 
   
V-IF directive
 
   
V-show directive
 
   
V-ELSE directive
 
   
V-FOR directive
 
   
V-bind directive
 
   
v-on directive
 
  
 
 
Vue.js has good extensibility, we can also develop some custom directives, and later articles will describe the custom directives.
V-IF directive
v-ifis a conditional rendering instruction that deletes and inserts elements according to the true and false of an expression, with the following basic syntax:
v-if= "expression"
Expression is a Boolean value that can be either a bool property or a Boolean-returning formula. For example:
<! DOCTYPE html>
Note:Yes, no, age, name these 4 variables are derived from the data property of the Vue instance option object.
This code uses 4 expressions:

 
  

  
   
 
    
The property of the data yes is true, so "yes!" will be output;
 
    
The property of the data no is false, so "no!" will not be exported;
 
    
The expression age >= 25 returns True, so "age:28" is output;
 
    
The expression name.indexOf(‘jack‘) >= 0 returns false, so "name:keepfool" is not output.
 
   
 
  
Note:the V-IF directive executes the insertion or deletion behavior of an element based on the value of the conditional expression. 
This can be seen from the rendered HTML source code, only 3 v-if the 
To verify this again, you can change the age property in the chrome console so that age >= 25 the value of the expression is false and you can see that the  element is deleted.
Age is defined in the Data property of the option object, why does the Vue instance have direct access to it?
Knowledge because each Vue instance proxies the Data property in its option object. 
V-show directive
v-showAlso conditional rendering directives, unlike the V-IF directive, elements that use v-show directives are always rendered to HTML, which simply sets the style property of the CSS for the element.
<! DOCTYPE html>
Change the Age property in the chrome console so that age >= 25 the value of the expression is false, and you can see that the  element is set to the style= "Display:none" style.
V-ELSE directive
You can use the v-else directive to v-if v-show add an "else block". The v-else element must immediately follow v-if or v-show behind the element--otherwise it cannot be recognized.
<! DOCTYPE html>
v-elseWhether the element is rendered in HTML depends on the previous use v-if or v-show instruction.
True in this code v-if , the following is v-else not rendered to HTML; v-show Tue, but the back is v-else still rendered to HTML.
V-FOR directive
v-forDirectives render a list based on an array, similar to the traversal syntax of javascript:
V-for= "Item in Items"
Items is an array, and item is the array element that is currently being traversed.
Hide Code
<! DOCTYPE html>
We define a people array in the Data property of the option object, and then use the traversal people array within the #app element v-for to output the name, age, and gender of each person object.
View Demo
V-bind directive
v-bindA directive can have a parameter followed by its name, separated by a colon, which is usually the attribute of the HTML element (attribute), for example:v-bind:class
V-bind:argument= "expression"
The following code constructs a simple paging bar that v-bind instructions on the class attribute of the element.
This directive contains an expression that means: highlight the current page.
<! DOCTYPE html>
Note that v-for="n in pageCount" this line of code, PageCount, is an integer that iterates when n starts at 0 and then traverses to pagecount–1 end.
View Demo
v-on directive
v-onThe directive is used to listen to DOM events, and its terminology and v-bind are similar, such as listening <a> element click events:
<a v-on:click= "DoSomething" >
There are two forms of calling methods: binding a method (having the event point to a reference to the method), or using an inline statement.
The greet button binds its Click event directly to the greet () method, while the Hi button calls the Say () method.
<! DOCTYPE html>
Abbreviations for V-bind and v-on
Vue.js is the most commonly used two instructions v-bind and v-on provides an abbreviated method. The v-bind instruction can be abbreviated to a colon, and the v-on instruction can be abbreviated to the @ symbol. 
<!--full 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><!--full syntax--><button v-on:click=" greet ">Greet</button><!-- Abbreviation syntax--><button @:click= "greet" >Greet</button>
Comprehensive example
Now we have introduced some basic knowledge of vue.js, combined with the above knowledge we can do a small demo.
<! DOCTYPE html>
View the demo in my GitHub pages:
View Demo
Summarize
This article briefly introduces the MVVM model of Vue.js and its two-way binding mechanism, then begins our journey of vue.js with a Hello World example, then we learn a few more commonly used directives, and finally we build a simple example based on this knowledge.
Vue.js--60 minute Quick Start