vue(day10)学习

vue编程式导航

    // 注意：一定要区分 this.$route 和 this.$router 这两个对象，
    // 其中：this.$route 是路由参数的对象，所有路由参数中，params,query 都属于它。
    // 其中：this.$router 是一个路由导航对象，用它可以方便的使用 JS 代码，实现路由的前进、后退、跳转到新的 URL 地址。

	以下的就相当于 router-link to="'/home/goodsinfo/' + item.id"
    // 1. 最简单的
    // this.$router.push('/home/goodsinfo/' + id);
    // 2. 传递对象
    // this.$router.push({path: '/home/goodsinfo/' + id});
    // 3. 传递命名的路由
    this.$router.push({ name: "goodsinfo", params: { id } });
    这儿使用到的 name 需要在写路由的时候写进去。
    示例：{ path: '/home/goodsinfo/:id', component: GoodsInfo, name: 'goodsinfo' },

轮播图组件的封装

1. 封装好的轮播图组件存在 width 是100%还是自适应的问题
2. 因此需要传递参数，确定是否要100%，由传递的参数决定。

数字选择框组件的封装

1. 使用 MUI 组件中的数字选择框组件。
2. 导入 mui 的 JS 包。
3. 初始化数字组件，初始化数字组件的时候必须在 mounted 中。
4. 数据的交互：父子组件之间的传值：
   • 父组件向子组件传值：
     • 通过属性绑定机制即可，然后在子组件中的 props 属性中声明传递过来的元素即可：props: ["max"],
     • 但是这个值由于在父组件中是异步请求的，可能存在延迟。
     • 所以使用 watch 属性监听 max ，
     • 然后按照 mui的api 文档中传递值要设置的对象，也就是实时更新 max 的值。
     • mui('.mui-numbox').numbox().setOption('max',newVal);
   • 子组件向父组件传值：
     • 首先在父组件中，传递一个方法，通过方法的传值，将子组件的值传递到父组件。
     • 然后监测数值的变化，通过 @change 触发方法，然后通过 this.$emit('getcount', parseInt(this.$refs.numbox.value)); 将值传递出来。
     • 然后通过父组件中的方法，将值及时的更新到父组件中计数的变量身上。

小球添加到购物车

1. 首先画出小球确定它的初始位置，然后将它放在顶层隐藏起来。
2. 然后设置一个方法，在点击加入购物车的时候触发，让小球显示出来。
3. 然后通过： this.$refs.ball.getBoundingClientRect(); 来获取相关组件的位置。
   • document.getElementById('badge').getBoundingClientRect(); 这是通过 DOM 来获取的。
4. 然后设置移动的距离，这样就解决了机型无法适应的问题。

		beforeEnter(el) {
   
			el.style.transform = "translate(0,0)";
		},
		enter(el,done)