Vue.js Implement simple ToDoList Preparation (i) _javascript skills

First, the preface

Recently began to learn lightweight MVVM framework vue.js. As far as Chinese documents are concerned, they are quite complete. Previously in the study of version 1.0, one day suddenly opened the official website found has been updated to 2.0. Then the following are changed to the syntax of 2.0. PS: If you happen to be a beginner of vue, there is a video on the web that can be used to learn references (I am referring to the little toy that wrote a todolist, recording the learning process here).

Opening of the two chapters
MVVM Frame is the most popular topic now, go to pull a circle online, basic 70% are required. So do not say virtual, just to earn more money, we should keep up with the pace of the Times is not. Recommend a blog ' http://www.cnblogs.com/xueduanyang/p/3601471.html ', I think the talk is very transparent, dialectical look.

A lot of nonsense, now into the text

/***************************************************************/

Among the todolist, the vue.js points needed are:

1. Create Vue examples: Eg:

var vm=new Vue ();

2, List rendering: Eg:

V-for= "(item,index) in Todo_items";

3. Binding Event: Eg:

v-on:click= "Tooglefinishi (Item,index)";

2.1 Creating Vue instances

The following methods are used in the official website to create an instance

<div id= "app" >{{message}}</div>

var app = new Vue ({

 el: ' #app ',

 data: {message

 : ' Hello vue! '

 }

})

Here, this app is a variable that we construct using the constructor new Vue (), which is an object. So our operation on this instance can be seen as an operation on an object.

Let's take a look at the app's message value now.

First, take Data:app. $data. (The data object observed by the Vue instance.) Vue instance proxies access to its data object properties

Then, take Message:app. $data. Message.

In this way we can take the property values we want in the instance.

Eg:

VM = new Vue ({
el: ' Test ',
data: {
msg: ' App. $data. Message '
}
})

Can be transmitted between instances.

2.2 List Loops

We don't need to use a for () loop like native JS to render a dynamic list.

Direct use: v-for= "item in Items" for rendering. A loop method similar to native for in

<div v-for= "Item in Items" >
 
 {item.text}}
 
 </div>

2.3 Event Binding

We often use $ (). On (' click ', Function () {}) in JQ, and click event Binding.

In Vue we use the v-on:click= "dosometing" (' A ', ' B ') to bind.
Eg:
<button v-on:click= "Dothis" ></button>

With these 3 points, you can start writing this simple todolist.

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.