vue+webpack app项目（4）

step7解决（3）中刷新在两个tab中都添加元素的问题

• （3）中的情况是无论在动态tab下拉刷新还是在前端tab下拉刷新同时会增加dom元素
• 主要是因为这一句话，这里的this是指向整个template的根目录，这也正好可以解释片段实例为什么获取不到元素了
• main.vue
  
  

  Paste_Image.png
• 那就必须是添加到当前指令下的.card-container,所以要获取到当前指令元素，可以在自定义指令中获得并传参
• PullToRefresh.js

Paste_Image.png

Paste_Image.png

• 现在可以main.vue 中的函数中获取这个参数，利用它获取当前元素的.card-container

Paste_Image.png

Paste_Image.png

step8不再操作dom只关心数据

• vue是为数据而生的，不该过多的操作dom,而之前的所有刷新都是append了一次元素
• 为了模拟有真实是的数据时的情况，把将定义两个数组将分别对应两个tab里面的数组task1,task2，并在每次下拉时push进去，这时候我们就不在需要操作dom元素了，只需要关心data的变化
• 为了让存放在不同的数组中在自定义指令的元素上加入了这些属性

Paste_Image.png

• 然后在pullToRefresh.js中将它设置到自定义属性中，当然要记得在params中传入特性，（这里我总感觉我这方法有点麻烦，如果在指令中传参我还没有明确，希望有知道的大神指点一二）

Paste_Image.png

• 每次下拉函数都会push一个数组

Paste_Image.png

• html中用v-for输出数组

Paste_Image.png

• 基本的home.vue已经全部完成了

Paste_Image.png

• 当我很开心的以为结束了今天的任务的时候，我切换一下底部菜单，然后再回到home tab时，整个人都不好了，刚刚下拉的数据全部没了，回到刚开始的页面

Paste_Image.png

• 我本想着要自定义方法来存储，可是参考资料里面是并不用这么麻烦的，寻寻觅觅了很久很久，终于遇到了神奇的它---keep-alive

• 先来了解一下动态组件

  
  
  

  Paste_Image.png
• 当用户关闭component时，将该component卸载，再次打开时重新加载。

Paste_Image.png

• 这个项目里在router-view标签中加上keep-live就可以缓存组件了

  • 扩展：根据官方的这个案例，通过:is和keep-alive可以实现随意切换是否缓存这个组件

• 现在无论怎么点tab键都能保留下拉刷新的那几个内容了

https://github.com/sally2015/vue-project

• 同步最新代码，如果你觉得有帮助，不求打赏只求github给个小星星，拜托拜托