Vue.js implements simple ToDoList preliminary preparation

1. Introduction

I recently started to learn the lightweight mvvm framework Vue.js. As far as Chinese documentation is concerned, it is quite complete. I was studying version 1.0 before, but one day I suddenly opened the official website and found that it had been updated to 2.0. Then everything after that was changed to 2.0 syntax. ps: If you happen to be a beginner in Vue, there is a video on the MOOC website that you can use as a reference for learning (I just referred to the little toy that wrote a ToDoList and recorded the learning process here).

2. Opening
The mvvm framework is a hot topic in the front-end nowadays. If you go to Lagou and look around, you will find that 70% of them have requirements. So it’s not a lie, just to make more money, we should keep up with the times, right? I recommend a blog post ‘http://www.cnblogs.com/xueduanyang/p/3601471.html’. I think it is quite thorough and should be viewed dialectically.

Enough nonsense, now let’s get into the text

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

In this todolist, the total required Vue.js points are:

1. Create a Vue instance: 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 Create a Vue instance

The following method is used on the official website to create an instance

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

var app = new Vue({
 
 el: '#app',
 
 data: {
 
 message: 'Hello Vue!'
 
 }
 
})

Here, the variable of this app is what we use An instance constructed by the constructor new Vue() is an object. Then our operation on this instance can be regarded as operating on an object.

Let’s get the message value of the app now.

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

Then, take the message: app.$data.message.

Through this method we can get the attribute values ​​we want in the instance.

Eg：

vm = new Vue({
el : 'test',
data : {
msg : ' app.$data.message '
}
})

can be transferred to each other between instances.

2.2 List Loop

We no longer need to use a for() loop to render a dynamic list like native js.

Use directly: v-for="item in items" to render. Similar to the native for in loop method

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

2.3 Event Binding

In JQ we often use $().on('click', function(){}); to bind click events Certainly.

In Vue we use v-on:click="doSometing('a','b')"; to bind.
Eg:

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