————第七节————
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)