Vue.js实现简单ToDoList 前期准备(一)


Posted in Javascript onDecember 01, 2016

一、前言

最近开始学习轻量级的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:

var vm=new Vue();

2、列表渲染:Eg:

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

3、绑定事件:Eg:

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

2.1 创建Vue实例

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

<div id="app">{{ message }}</div>
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:

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

可以进行实例间的相互传至。

2.2列表循环

我们不需要再像原生js一样使用for()循环来渲染一个动态列表,

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

<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前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
获取jqGrid中选择的行的数据
Nov 30 #Javascript
基于Vue.js实现简单搜索框
Mar 26 #Javascript
深入理解jQuery.data() 的实现方式
Nov 30 #Javascript
利用vue-router实现二级菜单内容转换
Nov 30 #Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 #Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 #Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 #Javascript
You might like
改进的IP计数器
2006/10/09 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
PHP 翻页 实例代码
2009/08/07 PHP
基于PHP文件操作的详解
2013/06/05 PHP
php内嵌函数用法实例
2015/03/20 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
ES6新增的math,Number方法
2017/08/06 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
简单介绍Python中的RSS处理
2015/04/13 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
python实现拼接图片
2020/03/23 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
小学生清明节演讲稿
2014/09/05 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers