Vue.js——一个todolist的小尝试

最新推荐文章于 2019-09-05 15:45:33 发布

港式柠檬茶！

最新推荐文章于 2019-09-05 15:45:33 发布

阅读量283

点赞数 1

分类专栏： Vue.js 前端文章标签： Vue.js 前端

本文链接：https://blog.csdn.net/wantingtr/article/details/83587282

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

Vue.js

12 篇文章 0 订阅

订阅专栏

前言：

至此为止，还仍然是跟着Vue.js的官方文档，对照网络上的一些教程进行较为分散的学习。大部分还停留在理论性的表面学习与对于官方文档中示例代码的理解。因为缺少实战，还是有些云里雾里。所以这一篇，准备对Vue来一个小小的实战。

演示示例

todolist-demo

实现功能：

实现浏览器的本地存储，刷新页面后获取数据缓存。
在每个item前显示序号，实现单个item的finish,delete。
实现一键删除所有items。

虽然说所实现的功能非常简单，只是一个很简单的数组遍历与显示。但对于我这个小白来说还是遇到了各种奇奇怪怪的问题。尤其是Vue1.0和2.0的变更，踩了很多坑。
下面列举一下所遇到的问题以及我的尝试过程。

1.关于Vue里的数组循环遍历

在这个demo里，通过建立数组，将todolist中的每一个item通过this.items.push()加入到数组中。
并通过v-for按照顺序排列显示。
刚开始的代码是这样的

<ul>
  <li v-for='item in items'>
    <h3 @mouseenter='itemEnter(item)' @mouseleave='itemLeave(item)'>
      <p class="item-label" :class="{'line-through':item.checked}">{ { $index+1 } } . { { item.label } }</p>
      <label class='item-status' v-if='!item.checked' @click='item.checked=true'>Finished</label>
      <p class="item-delete" v-if='item.showDelete' @click='deleteClick(index)'>delete</p>
    </h3>
  </li>
</ul>

会发现虽然Vue不会报错，但是在input之后，每一个item会显示成NaN.itemName,并且按下delete后，todolist删除的永远是排列在最上面的那个item。

错误原因：

v-for使用有误。
我使用了{ { $index + 1 } } 来显示每一个item的序号，但在v-for指令中并未引入index这个第二参数。

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。也可以用 v-for 通过一个对象的属性来迭代。更可以通过index,key,item分别对对象的索引，键名，数据值进行遍历。
```
<div v-for="(value, key, index) in object">
    { { index } }. { { key } }: { { value } }
</div>
```
$index使用错误
在Vue 1.x 中，$index表示数组的索引值，但在 Vue 2.x 中，该变量已被迁移。

已经移除了 $index 和 $key 这两个隐式声明变量，以便在 v-for 中显式定义。这可以使没有太多 Vue 开发经验的开发者更好地阅读代码，并且在处理嵌套循环时也能产生更清晰的行为。

除此之外，还有v-for便利对象时的参数变更

当包含 key 或者 value 时，之前遍历对象的参数顺序是 (key/index, value)。现在是 (value, key/index)，来和常见的对象迭代器 (例如 lodash) 保持一致。

2.使用localStorage存储todolist

对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
localStorage（长期存储）：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

示例代码如下

//store.js
...
  save: function(items){
    window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));
  }
  ...

  //app.vue
  ...
  watch:{
    items: {
      handler:function(items){
        Store.save(items)//每次加入了新的item之后，都会save一次。
      },
      deep: true
    }
  }

3.对于css的各种问题

对于我自己来说，CSS是学习前端时的一大难题，虽然从理论上来说，css并没有什么难度，只要仔细阅读了文档，熟悉之后，应该是得心应手才对。但是CSS中的属性实在是太多，并且需要很大的耐心一次一次调试。我自己本身对CSS不够熟悉，再加上总是有问题马上查资料，并没有静下心来仔细阅读文档，所以在这里花费了很长时间。

总结

此次demo，虽然是个简单的不能再简单的小实例，但也认识到了自己的短板。一个是对最基础的属性与语法不熟悉，这一部分应该静下心来多多学习巩固；另一个是在遇到问题时，总是会急于针对这一个小问题查找答案，结果就是查询的过程比较繁杂，会花费较多时间。所以在以后遇到问题的时候，应该先查询相关文档，在自己对相关知识点已经明白了之后再去针对小问题查找答案。