Vue.js实现简单ToDoList 前期准备(一)
一、前言最近开始学习轻量级的mvvm框架Vue.js。就中文文档来说,算是很齐全了。之前本来在学习1.0版本,某日突然打开官网发现已更新为2.0。便把之后的都改为了2.0的语法。ps:如果恰好你是Vue的初学者的话,慕课网上有一个视频倒是可以去学习参考(我就是参考那个写了个ToDoList的小玩具,在这记录一下学习过程)。 二、开篇mvvm框架是前端现在比较热门的话题,去拉勾网上转一圈,基本70%都有要求。所以不说虚的,只是为了多挣点钱,咱们也该跟上时代的步伐不是。推荐一篇博文‘http://www.cnblogs.com/xueduanyang/p/3601471.html',我觉得讲的挺透,辩证的看嘛。废话多了,现在进入正文 /***************************************************************/ 在这个todolist当中,一共需要的Vue.js点有: 1、创建Vue实例:Eg:
v-on:click="toogleFinishi(item,index)"; 2.1 创建Vue实例 在官网中使用了如下的方法来创建一个实例 el: '#app',data: {
message: 'Hello Vue!' } }) 在这里,这个app这个变量就是我们使用构造函数new Vue()构造的一个实例,它是一个对象。那么我们对这个实例的操作就可以看为是对一个对象进行操作。 我们现在来取一下app的message值。 首先,取data:app.$data。(Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问) 然后,取message:app.$data.message。 通过这个方法我们就可以取到实例中我们想要的属性值。 Eg: 可以进行实例间的相互传至。 2.2列表循环 我们不需要再像原生js一样使用for()循环来渲染一个动态列表, 直接使用:v-for="item in items"来进行渲染。类似于原生中for in的循环方法 {{ item.text }}
2.3事件绑定 在JQ中我们常常使用$().on('click',function(){});来进行点击事件绑定。 在Vue中我们使用v-on:click="doSometing('a','b')";来绑定。 Eg: 有了这3点,就可以开始编写这个简单的ToDoList了。 本文已被整理到了《》,欢迎大家学习阅读。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |