vue+webpack app 项目（3）

--这里的ui用的是sui，包括下拉刷新也是用sui的组件，详情：m.sui.taobao.org/components/

1、下拉刷新会有dom元素的操作，不能用jq的思想，所以要用到自定义指令

自定义指令提供一种机制将数据的变化映射为 DOM 行为

pullToRefresh.js

Paste_Image.png

用到的钩子函数：
bind：只调用一次，在指令第一次绑定到元素上时调用。
unbind：只调用一次，在指令从元素上解绑时调用。
在注册之后，便可以在 Vue.js 模板中这样用（记着添加前缀 v-），当作为属性指令的时候

用到的指令实例属性:
el: 指令绑定的元素。
vm: 拥有该指令的上下文 ViewModel。
expression: 指令的表达式，不包括参数和过滤器。
params:自定义指令可以接收一个 params 数组，指定一个特性列表，Vue 编译器将自动提取绑定元素的这些特性。this.params[key]会自动保持更新。

data-ptr-distance="55"可以配置下拉刷新的下拉距离,sui的配置

--在app.js中注册自定义指令

import pullToRefresh from './directives/pullToRefresh'
//directive
Vue.directive('pullToRefresh', pullToRefresh);

自定义指令完成
然后是要将这部分的ui封装成组件放在两个tab里

就是封装官网上的这段代码

-前面已经说过怎么去拆分组件了，只要你觉得合理，子父组件之间能通信想怎么拆都可以，当然以复用为原则，直接上我自己的拆分方式，可以对比一下跟第二篇的源码，都会同步到github，无论怎么定义记得要在components里面注册
--vue函数中通过this.$el来获取当前元素

千万要注意一个概念叫做片段实例
--就是模板中只有一个顶级元素，否则会对你下面获取当前元素产生影响，如果你在函数中想要获取当前元素用this.$el得到的不是一个节点，而是一个空文本元素，那么你就要去检查你的模板是不是有问题了

--这里最重要的是把刚刚的指令引入进来了

-前面有提到作为属性要加v-前缀
-现在可以去书写你下拉刷新是要执行的函数了，在methods方法中定义

那个$.showIndicator的效果其实就是这个

之前有一点没有提到，就是sui需要执行一个init()方法才能有上面的效果，而且是在ready方法中init，这是基本配置，所以要在入口文件main.vue加个.page,否则会报找不到id的错误

-现在的效果是下拉可以增加一个.card,但是切换路由的时候再回到页面就不见了。所以要绑一个变量存数据。今天这个自定义指令挺难理解的，先keep一份代码吧

github.com/sally2015/v… github上同步最新代码，如果你觉得有帮助，不求打赏只求github给个小星星，拜托拜托