参考链接:

http://www.imooc.com/learn/694

http://www.cnblogs.com/Chen-XiaoJun/p/6238137.html

http://blog.csdn.net/sinat_17775997/article/details/52536010

ES6的写法:

  1. export default {
  2. name: 'hello',
  3. data () {
  4. return {
  5. msg: 'Welcome to Your Vue.js App'
  6. }
  7. }
  8. }

export default 和 export 区别:

  1.export与export default均可用于导出常量、函数、文件、模块等
  2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
  3.在一个文件或模块中,export、import可以有多个,export default仅有一个
  4.通过export方式导出,在导入时要加{ },export default则不需要

  1. 1.export
  2. //demo1.js
  3. export const str = 'hello world'
  4. export function f(a){ return a+1}
  5. 对应的导入方式:
  6.  
  7. //demo2.js
  8. import { str, f } from 'demo1' //也可以分开写两次,导入的时候带花括号
  9.  
  10. 2.export default
  11. //demo1.js
  12. export default const str = 'hello world'
  13. 对应的导入方式:
  14.  
  15. //demo2.js
  16. import str from 'demo1' //导入的时候没有花括号                                                   

html部分

  1. <template>
  2. <div id="app">
  3. <h1 v-text="title"></h1>
  4. <input v-model="newItem" @keyup.enter="addNew"/>
  5. <ul>
  6. <li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)">
  7. <span v-on:click="deleteThis(item)">delete</span>
  8. {{item.label}}
  9. <hr/>
  10. </li>
  11. </ul>
  12. </div>
  13. </template>

js部分

结合localStorage和JSON将item序列化为JSON格式存储

  1. const STORAGE_KEY = 'todos-vuejs'//es6语法 const定义一个常量
  2. export default {
  3. fetch () {//es6语法 相当于 fetch:function(){}
  4. return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
  5. },
  6. save (items) {
  7. window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
  8. }
  9. }

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

  1. <script>
  2. import Store from './assets/js/store'
  3. import componentA from './components/componentA'
  4. //相当于module.export
  5. export default {
  6. /*function data(){
  7. return...
  8. }*/
  9. /*相当于var vue = new vue({data: function(){}})*/
  10. data () {
  11. return {
  12. title: 'TODO LIST',
  13. items: Store.fetch() || [],
  14. newItem: '',
  15. childWords: ''
  16. }
  17. },
  18. components: {
  19. componentA
  20. },
  21. watch: {
  22. items: { //这是深度watch,监控items变化的时候,自动执行函数
  23. handler: function(items){
  24. Store.save(items)
  25. },
  26. deep: true //也检测item内部的变化
  27. }
  28. },
  29. methods: {
  30. toggleFinish: function(item) {
  31. item.isFinished = !item.isFinished
  32. },
  33. addNew: function() {
  34. this.items.push({
  35. label: this.newItem,
  36. isFinished: false
  37. })
  38. this.newItem = ''
  39. },
  40. deleteThis: function(item) {
  41. this.items.splice(this.items.indexOf(item), 1)
  42. Store.save(this.items)
  43. }
  44. }
  45. }
  46. </script>

CSS部分:

  1. <style>
  2. *{
  3. margin:;
  4. padding:;
  5. }
  6. html {
  7. height: 100%;
  8. }
  9. body {
  10. display: flex;
  11. align-items: center;
  12. justify-content: center;
  13. height: 100%;
  14. width: 100%;
  15. }
  16. #app {
  17. color: #2c3e50;
  18. font-family: Source Sans Pro, Helvetica, sans-serif;
  19. text-align: center;
  20. width: 60%;
  21. }
  22. #app a {
  23. color: #42b983;
  24. text-decoration: none;
  25. }
  26. #app h1:nth-child(1) {
  27. line-height:;
  28. position: absolute;
  29. top: 5%;
  30. }
  31. #app input {
  32. width: 60%;
  33. line-height: 24px;
  34. font-size: 24px;
  35. position: absolute;
  36. top: 25%; left: 20%;
  37. }
  38. ul {
  39. position: absolute;
  40. top: 35%;
  41. text-align: left;
  42. width: 60%;
  43. height: 55%;
  44. overflow: auto;
  45. }
  46. ul li {
  47. list-style: none;
  48. line-height:;
  49. font-size: 24px;
  50. }
  51. span {
  52. font-size: 16px;
  53. color: #fff;
  54. padding: 2px 5px;
  55. text-align: left;
  56. background-color: indigo;
  57. border-radius: 5px;
  58. }
  59. .finished {
  60. color: #ccc;
  61. }
  62. hr {
  63. border-top:1px dashed #ccc;
  64. }
  65. </style>

最终效果

【vue】todolist小练习的更多相关文章

  1. Vue.js基础篇实战--一个ToDoList小应用

    距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...

  2. Vue编写的todolist小例子

    Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...

  3. Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用

    Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...

  4. Vue之小入门

    Vue之小入门 <div id="app">{{ greeting }}</div> <script> let oDiv = document. ...

  5. 利用ncurses库开发终端工具箱(1)—— ToDoList小工具开发

    准备工作 腾讯云服务器(Ubuntu),C++编程语言 由于想输出界面中包含中文,所以安装库 libncursesw5,依次输入下面三行命令 sudo apt-get install libncurs ...

  6. 跟我一起做一个vue的小项目(二)

    这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...

  7. 基于vue 、vue-router 、firebase的todolist小项目

    第一次写博客,都不知道改怎么写的好. 本着一颗学习的心,也希望一段时间后再回来在看看自己写的代码,会不会让自己有种不忍直视的念头 *-* 还是先上图吧~ 这是首页,主要是展示所有的列表页面,可以通过输 ...

  8. 基于Vue的小日历(支持按周切换)

      基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换 <template> <div class="date"> <!-- 年份 ...

  9. vue.js小总结

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性; v-for 指令可以绑定数组的数据来渲染一个项目列 ...

随机推荐

  1. linux中find与rm实现查找并删除文件

    find命令: find . -name '*.log' #查找当前目录下的log文件 查找并删除: find . -name '*.log' -type f -print -exec rm -rf ...

  2. MVC中学到的小知识(MVC中的跳转,传参)

    1.mvc中视图中的href="XXX",这个XXX是控制器地址,不是另一个视图.(这里的href语句只能转向控制器,不能直接转向视图),如果要实现转向视图,可以先转到控制器,然后 ...

  3. [PHP] apache在worker模式配置fastcgi使用php-fpm

    1.准备: dpkg -L apache2查看所有安装的apache2的应用 a2query -M查看apache2使用的模式 httpd -l旧版本查看当前apache模式 2.查看apache的进 ...

  4. java加载redis以及基本操作

    前言: Redis是一款开源的.高性能的键-值存储(key-value store).它常被称作是一款数据结构服务器(data structure server).Redis的键值可以包括字符串(st ...

  5. HDU 4489(DP)

    http://acm.hdu.edu.cn/showproblem.php?pid=4489 解题思路这里已经说的很清楚了: http://blog.csdn.net/bossup/article/d ...

  6. Redis实现分布式锁1

    Jedis结合setNX方法实现分布式锁 public boolean lock(String key, int exprie) { try { exprie = exprie <= 0 ? 6 ...

  7. js-99乘法表的练习

    <html> <head> <title>World</title> <style type="text/css"> & ...

  8. Freebsd10.3(FreeBSD11 Beta1)使用手记

    Freebsd10.3(FreeBSD11 Beta1)使用手记 1.安装系统. 2.设置ssh2登录,并开启ftp. (1)编辑/etc/ssh/sshd_config文件,设置如下: Permit ...

  9. Bzoj3197: [Sdoi2013]assassin

    题面 传送门 Sol 套路:找出重心,如果有两个就新建一个点 然后把这棵树hash一下 设\(f[i][j]\)表示第一颗树到\(i\)第二棵树到\(j\),子树\(i,j\)同构的付出的最小代价 转 ...

  10. git分支无法获取

    git 上新建的分支,本地想要拉取该分支,但是找不到这个分支 使用  git branch -a  也看不到该分支 使用命令: git checkout -b branch_nameA origin/ ...