vue2-学习笔记之高仿饿了吗项目

————第七节————
1、better-scroll（1）：

---

better-scroll文档地址http://www.github.com/ustbhuangyi/better-scroll

1）2.0的版本用ref特殊属性代替1.0版本的v-el；并且ref属性是可以区分大小写的，不需要像1.0版本v-el的值是羊肉串，js里面用驼峰,ref可以直接用驼峰就好了；

---

2）vue的视图渲染时vue监控到数据变化的时候异步执行的，所以实际程序中如果有dom操作的时候要注意的，例如better-scroll的时候要特别注意；

以下是项目中的代码片段，是错误的代码

created() {this._initScroll();//this._initScroll()是初始化better-scroll的具体函数}；

如果想上面这样写，虽然this._initScroll()可以正常运行但是better-scroll是没有效果，因为better-scroll的滚动是要根据dom的高度，当子元素的组件溢出父元素才有效，但是由于vue的视图渲染是异步执行的，所以当this._initScroll()执行的时候子元素并没有高度，导致better-scroll无效；

正确的代码如下：

 created() {   this.$nextTick(()=>{      this._initScroll()   })},/**this.$nextTick的作用 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM**/

2、better-scroll（2）：
better-scroll有一个probeType属性；
probeType: 1：滚动的时候会派发scroll事件，会截流。2：滚动的时候实时派发scroll事件，不会截流。 3：除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件

2、better-scroll（3）：
better-scroll会监听元素一些touchon,touchend这些事件，并perventEvent，所以在bScrll里面的元素默认不能有触发事件；如果让子元素能被点击，要设置click:true.并可接受此点击事，如@click=”info(index,event)”；

---

在pc端里面的点击事件，原生的js会派发一个点击事件，better-scroll设置了click:true也会派发一个点击事件，所以如果在pc端点击，就会触发两个点击事件；

better-scroll派发的event和原生派发的event事件有一个区别，就是better-scroll派发的时间会有一个_constructed属性；所以可以通过_constructed判断是否better-scroll派发的，如果不是派发的则return,这样就不会执行两次；

移动端的只执行一次，也是因为移动端自动就判断了是否有这个属性；

if (!event._constructed) {   return;}

---

7-12 shopcart购物车组件（4）
1、在props里面，如果数据是一个数组，那么初始值是一个函数；

props: {      selectFoods: {        type: Array,        default() {          return [            {              price: 10,              count: 1            }          ];        }      },}

---

7-16 cartcontrol组件（2）
1、在vue中，在给一个不存在的数据添加值是不可以的，必须使用Vue.set如下面例子中；

props:{      food:Object,    },methods:{    addCart(event) {        if (!event._constructed) {          return;        }        if (!this.food.count) {          Vue.set(this.food, 'count', 1);          /**不能直接写成this.food.count=0;**/        } else {          this.food.count++;        }        this.$emit('add', event.target);      },}

其他记录：
1、如果项目运行npm run dev没有报错，但是网页没有打开,可能是config/index.js的autoOpenBrowser设置为false,把他改成true;
2、关于http:0.0.0.0;
严格说来，0.0.0.0已经不是一个真正意义上的IP地址了。
　　它表示的是这样一个集合：
　　1、所有不清楚的主机和目的网络。这里的“不清楚”是指在本机的路由表里没有特定条目指明如何到达。
　　2、对本机来说，它就是一个“收容所”，所有不认识的“三无”人员，一 律送进去。
　　3、如果在网络设置中设置了缺省网关，那么Windows系统会自动产生一个目的地址为0.0.0.0的缺省路由。
3、关于vue.set的用法；
误区：使用的时候不考虑要添加的data是数组还是对象；

数组
Vue.set(example1.items, indexOfItem, newValue)

对象
Vue.set(object, key, value)—>Vue.set(vm.userProfile, ‘age’, 27)
在实际运用中发现如果是写在created里面，不能用vm.userProfile要用this.userProfile;

vm.$set(this.userProfile, ‘age’, 27)