Vue.js实现简单ToDoList 前期准备（一）

这篇文章主要介绍了Vue.js实现简单ToDoList的前期准备,具备必定的参考价值，感兴趣的小伙伴们能够参考一下

1、前言

最近开始学习轻量级的mvvm框架Vue.js。就中文文档来讲，算是很齐全了。以前原本在学习1.0版本，某日忽然打开官网发现已更新为2.0。便把以后的都改成了2.0的语法。ps：若是刚好你是Vue的初学者的话，慕课网上有一个视频却是能够去学习参考（我就是参考那个写了个ToDoList的小玩具，在这记录一下学习过程）。

2、开篇
mvvm框架是前端如今比较热门的话题，去拉勾网上转一圈，基本70%都有要求。因此不说虚的，只是为了多挣点钱，我们也该跟上时代的步伐不是。推荐一篇博文‘http://www.cnblogs.com/xueduanyang/p/3601471.html'，我以为讲的挺透，辩证的看嘛。

废话多了，如今进入正文

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

在这个todolist当中，一共须要的Vue.js点有:

一、建立Vue实例：Eg：

var vm=new Vue();

二、列表渲染：Eg：

 v-for="(item,index) in todo_items"；

三、绑定事件：Eg：

 v-on:click="toogleFinishi(item,index)"；

2.1 建立Vue实例

在官网中使用了以下的方法来建立一个实例

?

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

?

1 2 3 4 5 6 7 8 9 10 11

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

在这里，这个app这个变量就是咱们使用构造函数new Vue()构造的一个实例，它是一个对象。那么咱们对这个实例的操做就能够看为是对一个对象进行操做。

咱们如今来取一下app的message值。

首先，取data：app.$data。（Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问）

而后，取message：app.$data.message。

经过这个方法咱们就能够取到实例中咱们想要的属性值。

Eg：

?

1 2 3 4 5 6

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

能够进行实例间的相互传至。

2.2列表循环

咱们不须要再像原生js同样使用for()循环来渲染一个动态列表，

直接使用：v-for="item in items"来进行渲染。相似于原生中for in的循环方法

?

1 2 3 4 5

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

2.3事件绑定

在JQ中咱们经常使用$().on('click',function(){});来进行点击事件绑定。

在Vue中咱们使用v-on:click="doSometing（'a','b'）";来绑定。
Eg：
<button v-on:click="doThis"></button>

有了这3点，就能够开始编写这个简单的ToDoList了。

本文已被整理到了《Vue.js前端组件学习教程》，欢迎你们学习阅读。

以上就是本文的所有内容，但愿对你们的学习有所帮助，也但愿你们多多支持。