vue.js实现todomvc---实践学vue(下)

本期目标(最后一期)

Snipaste_2018-01-29_19-02-17.png

• 本教程为了让大伙了解到vue-router的使用,将原本用v-on绑定点击事件+数组筛选的方法,舍近求远的转换为点击切换路由,在这里我大体描述在不使用路由的情况下,点击上图中的按钮切换列表的思路,核心就hashchange事件发生,判断hash值,然后使用数组的fliter()方法进行筛选。有兴趣的同学可以自己动手实现以下,利用hashchange与fliter()实现,点击切换功能的话,就与vue的关系不是很大了,考验的是基本功的操作。

• 做成路由的话,大体套路是这样的
    首先,是挖坑(view-router)=>将三个按钮分别写成link-router的形式=>然后是配置三个路由导航=>由父组件想子组件传值,三个子组件拿到父组件传来的list进行筛选(可以在组件内对传递过来的list进行数组遍历筛选,也可以选择下面这种方法)

  
  Snipaste_2018-01-29_19-56-26.png
  

  由于我们在进行传递的时候,会将变量绑定至自定义属性,所以也可以使用文档中提到的这种办法在子组件外进行筛选,这样的好处是,可以只使用一个组件,然后根据子组件接收到的props数组内的值,进行渲染,总之大伙看这个的目的也是为了基础,多写几个子组件也不是什么坏处,希望能帮到大家,代码有空了我会上传。