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 相关文章推荐
javascript innerHTML使用分析
Dec 03 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
Javascript 数组排序详解
Oct 22 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
python提取xml里面的链接源码详解
2019/10/15 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
生日寄语大全
2014/04/08 职场文书
出生证明公证书
2014/04/09 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
市场营销计划书范文
2015/01/16 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS