Vue.js 60 Minutes easy to get started _javascript tips

vue.js Introduction

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

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

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

This article's demo and source code has been put to GitHub, if you think this article is good, please point a praise, or add a star on the GitHub!

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

MVVM mode

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

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

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

First, we view the DOM listeners and data bindings in the previous illustration as two tools, which are key to achieving two-way binding.
From the view side, the DOM listeners tool in ViewModel will help us monitor the changes to the DOM elements on the page and change the data in model if there is a change;
Looking at the model side, when we update the data in model, the bindings tool will help us update the DOM elements in the page.

Hello World Example

Understanding a language, or learning a new technology, and writing Hello World examples 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 MVVM.

1. Define View

2. Definition Model

3, 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 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 view,el: ' #app ' means that the Vue instance will be mounted to the <div id= "app" >...</div> this element The data attribute points to model,Data:exampledata says our model is Exampledata object.
Vue.js has a variety of data binding syntax, the most basic form is text interpolation, using a pair of curly braces syntax, at run time {{message}} is replaced by the message property of the data object, so the page will output "Hello world!".

Vue.js has been updated to version 2.0, but since it is not yet a formal version, the code for this article is version 1.0.25 .

Two-Way Binding example

The MVVM pattern itself is a two-way binding, and in vue.js you can create bidirectional data binding on form elements using the v-model directive.

<!--This is our view-->
<div id= "app" >
 <p>{{message}}</p> <input
 "text" v-model= "message"/>
</div>

Binds a message to a text box, and the contents of the <p>{{}}</p> are updated when the value of the text box is changed.

Conversely, if you change the value of the message, the value of the text box is also updated, and we can try it on the chrome console.

The Vue instance's data property points to Exampledata, which is a reference type that changes the properties of the Exampledata object and also affects the data property of the Vue instance.

Common instructions for Vue.js

The V-model used above is a vue.js commonly used instruction, then what is the instruction?

Vue.js's instructions are started with V, they work on HTML elements, the instructions provide some special attributes, the instructions bind to the element, the instruction adds some special behavior to the bound target element, we can view the instruction as a special HTML attribute.

Vue.js provides some common built-in instructions, and then we'll introduce a few of the following built-in directives:

V-if directives

V-show directives

V-else directives

V-for directives

V-bind directives

v-on directives

Vue.js has a good extensibility, we can also develop some custom directives, and later articles will introduce custom directives.

V-if directives

V-if is a conditional rendering instruction that deletes and inserts elements based on the true and false expression, and its basic syntax is as follows:

v-if= "Expression"
Expression is an expression that returns a bool value that can be either a bool attribute or a formula that returns BOOL. 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 Yes property of the data is true, so "yes!" will be output;
The no property of the data is false, so "no!" will not be output;
The expression age >= 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, which renders only 3 v-if value false is not rendered to HTML.

To verify this again, you can change the age property on 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 an Option object, why does the Vue instance have direct access to it?
This is because each Vue instance proxies the Data property in its option object.

V-show directives

V-show is also conditional rendering instructions, unlike v-if instructions, elements that use v-show directives are always rendered to HTML, which simply sets the CSS style attribute for the element.

<! DOCTYPE html>
 
 

Changing the age attribute on the chrome console makes the expression age >= false, and you can see that the element is set to Style= " Display:none "style.

V-else directives

You can add an "else block" to v-if or v-show with the V-else directive. The V-else element must immediately follow the V-if or v-show element--otherwise it cannot be recognized.

<! DOCTYPE html>
 
 

Whether the V-else element is rendered in HTML depends on the previous use of the v-if or v-show instruction.
In this code, V-IF is true, and subsequent v-else are not rendered to html;v-show as Tue, but the latter v-else is still rendered to HTML.

V-for directives

The v-for instruction renders a list based on an array, similar to the traversal syntax of javascript:

V-for= "Item in Items"
items are an array, and item is an array element that is currently being traversed.

 <! 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 sex of each person object.

View Demo

V-bind directives

The v-bind instruction can have an argument followed by a colon separated by its name, which is usually an attribute of an HTML element, such as: V-bind:class

v-bind:argument= "Expression"

The following code constructs a simple pagination bar that v-bind instructions on the element's class attribute.
This instruction contains an expression, which means that the current page is highlighted.

<! DOCTYPE html>
 
 

Note v-for= "N in PageCount" This line of code, PageCount is an integer, the traversal of n starting from 0, and then traversing to the pagecount–1 end.

View Demo

v-on directives

The v-on directive is used to monitor DOM events, and its terms and v-bind are similar, such as the click events for listening <a> elements:

<a v-on:click= "DoSomething" >

There are two forms of calling methods: Binding a method (letting 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>
alert (This.message)
 },
 say:function (msg) {
 alert (msg)}}}
 )
 </script >
 
 

Abbreviations for V-bind and v-on

Vue.js provides abbreviations for the two most commonly used instruction V-bind and v-on. The v-bind instruction can be abbreviated to a colon, and the v-on instruction can be abbreviated to 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>

<!--full syntax-->
<button v-on:click=" greet ">greet</button >
<!--abbreviation syntax-->
<button @click = "Greet" >Greet</button>

Comprehensive example

Now we have introduced some of the basic knowledge of vue.js, combined with the above knowledge we can do a small demo.

<! DOCTYPE html>  

View this demo in my GitHub pages:

View Demo

Summarize

This article briefly introduces the MVVM model of Vue.js and its bidirectional binding mechanism, and then begins our vue.js journey with a Hello World example, then we learn a few more common instructions, and finally we build a simple example based on that knowledge.

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.