【JS】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:
var vm=new Vue();
2、列表渲染:Eg:
1 v-for="(item,index) in todo_items";
3、绑定事件:Eg:
1 v-on:click="toogleFinishi(item,index)";
2.1 创建Vue实例
在官网中使用了如下的方法来创建一个实例
1 <div id="app">{{ message }}</div>
1 var app = new Vue({ 2 3 el: '#app', 4 5 data: { 6 7 message: 'Hello Vue!' 8 9 } 10 11 })
在这里,这个app这个变量就是我们使用构造函数new Vue()构造的一个实例,它是一个对象。那么我们对这个实例的操作就可以看为是对一个对象进行操作。
我们现在来取一下app的message值。
首先,取data:app.$data。(Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问)
然后,取message:app.$data.message。
通过这个方法我们就可以取到实例中我们想要的属性值。
Eg:
1 vm = new Vue({ 2 3 el : 'test', 4 5 data : { 6 7 msg : ' app.$data.message ' 8 9 } 10 11 })
可以进行实例间的相互传至。
2.2列表循环
我们不需要再像原生js一样使用for()循环来渲染一个动态列表,
直接使用:v-for="item in items"来进行渲染。类似于原生中for in的循环方法
1 <div v-for="item in items"> 2 3 {{ item.text }} 4 5 </div>
2.3事件绑定
在JQ中我们常常使用$().on('click',function(){});来进行点击事件绑定。
在Vue中我们使用v-on:click="doSometing('a','b')";来绑定。
Eg:
1 <button v-on:click="doThis"></button>
有了这3点,就可以开始编写这个简单的ToDoList了。
转载于:https://www.cnblogs.com/GaoX/p/6118515.html
【JS】Vue.js实现简单的ToDoList(一)——前期准备相关推荐
- 【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.13-3.15)
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.13-3.15) 本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会 https://gi ...
- Node.js+Vue.js全栈开发王者荣耀手机端官网和管理后台(一)
文章目录 [全栈之巅]Node.js+Vue.js全栈开发王者荣耀手机端官网和管理后台(一) 工具安装和环境搭建 初始化项目 基于ElementUI的后台管理基础界面搭建 创建分类(客户端) 创建分类 ...
- 【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(4.1-4.10)
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(4.1-4.10) 本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会 https://git ...
- 【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.11-3.12)
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.11-3.12) 本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会 https://gi ...
- Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台
前言 最近在跟着Johnny的全栈之巅系列视频教程学习使用NodeJS+Express+Element-UI+MongoDB等开发王者荣耀,服务端server,移动端web,admin,学到了不少东西 ...
- 学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记(2.10-2.12)
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台 本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会 https://gitee.com/blaunic ...
- 学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记(2.8-2.9)
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台 本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会 https://gitee.com/blaunic ...
- 学习【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台笔记(1.1-2.5)
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台 本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会 https://gitee.com/blaunic ...
- 【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.6-3.10)
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.6-3.10) 本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会 https://git ...
- 【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.16-3.20)
[全栈之巅]Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记(3.16-3.20) 本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会 https://gi ...
最新文章
- 教你用R语言分析招聘数据,求职/转行不求人~(附代码、数据集)
- 将数据导入DB2带自增字段的表
- python安装whl_EN-mysqlclient库安装问题
- 新 开通 自己 IT 博客
- php 怎么写原生sql,thinkphp 原生sql 怎么写?
- s5pv210——I2C的代码实践
- 织梦dede模板|白绿色户外拓展教育培训网站织梦dede模板源码[带手机版数据同步]
- Linux FTP安装问题
- 用JS实现移动的窗口
- 请问如何获取字符串在数组中的位置
- docker 部署 zookeeper+kafka 集群
- Axure RP 9基础教程(1)——界面及基本操作(看完就会画)
- 基于 Sphinx 以纯文本编写富媒体项目文档的方法介绍
- continuity不收敛的问题
- Rstudio图片保存方式
- 音乐网站制作之音乐播放
- wx.previewImage图片加载不出来
- Python--详解脚本语言|编译语言|胶水语言的区别
- HP Laserjet1010网络打印机安装 win7 64bit
- 本科进了大厂拿高薪,为什么硕士和博士却要挤破头进高校?
热门文章
- eclipse 创建maven web项目_Eclipse创建第一个Scala项目(过程)
- html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
- 【spring cloud zookeeper】KeeperErrorCode = Unimplemented for
- java更新无法正常安装_Java无法安装
- centos7python命令_CentOS7中将Python2.7.5 升级到Python3.5.2
- qt tcp通信_Qt之网络编程TCP通信
- java ftp复制文件_如何使用Java将FTP服务器上的文件复制到同一服务器上的目录中?...
- 全国计算机等级考试二级教程第七章,2012年全国计算机等级考试二级VB入门教程第七章(1)...
- easyui树拖拽排序java_项目中集成Easyui-Tree,可拖拽更新节点
- 画师id_100位插画师是怎么过日子的?