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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
获取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
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
用Python设计一个经典小游戏
2017/05/15 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python如何实现机器人聊天
2020/09/10 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
西尔斯百货官网:Sears
2016/09/06 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
值传递还是引用传递
2015/02/08 面试题
地质灾害防治方案
2014/05/14 职场文书
2014年采购工作总结
2014/11/20 职场文书
小人国观后感
2015/06/11 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
Python如何配置环境变量详解
2021/05/18 Python
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python