分布式电商项目（2）--使用vue进行前端页面的开发

vue中组件不显示问题

我的代码如下：

然后在首页展示，却发现图片不显示

细细观察发现，原来图片是包裹在a标签里面，而标签我用的是 :href,而不是href，这样里面的链接是错误的，所以整个a标签的判断就是错的，vue里面标签的属性是错的，整个组件就不会显示。所以这里把 ：href 改成正确的href就可以了

通用组件封装的技巧

如果组件里面的元素比较复杂多样，那么通用的组件就选择插槽来实现
如果组件里面的元素只有单个元素不一样，如文字，那么通用的组件就不需要用插槽了，反而复杂

代码管理技巧

布局技巧

选项卡滑动到某个位置实现悬停效果
可以在首页中使用 .tab-control{position:sticky; top:44px}实现选项卡的悬停效果，sticky达到某个值时浏览器会根据top:44px决定改组件的position是sticky还是fix

/*  可以在首页中使用 .tab-control{position:sticky; top:44px}实现选项卡的悬停效果，sticky达到某个值时浏览器会根据top:44px决定改组件的position是sticky还是fix*/
  .tab-control {
    display: flex;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
    /*让状态条不被覆盖*/
    background-color: #fff;
    z-index: 9;
  }

1. 父组件向子组件传数据用prop，子组件向父组件发消息或数据用emit
2. @click是语法糖，相当于v-on: 它是起监听作用的

 <div class="tab-control">
   <!-- 点击span会激活对应的index，实现状态条的显示切换,并传参给子组件
    @click是语法糖，相当于v-on:  它是起监听作用的
   -->
    <div class="tab-control-item"
         :class="{active: currentIndex === index}"
         @click="itemClick(index)"
         v-for="(item, index) in titles">
      <span>{{item}}</span>
    </div>
  </div>

使用原生实现滚动：(浏览器中可以流畅运行，在移动端就会出现卡顿现象)

/* <div class="content"><li>hi</li></div>*/
  .content{
    height: 150px;
    background-color: red;
    overflow: hidden;
    overflow-y: scroll;
  }

使用better-scroll解决丝滑滚动：
cnpm install better-scroll --save

created还没有绑定组件，因此拿不到组件里面的任何东西就this是null或者undefined。所以我们只能在mounted挂载好之后才能取到this的值。mounted(){console.log(this)---------这里打印是有内容的。}
created（）{console.log(this)---------这里打印是null或者undefined。}

better-scroll的使用小案例

<div class="wrapper" ref="aaa">
   <ul class="content"....>
 </div>

import BScroll from "better-scroll"
export default{
   name:"test",
   data(){
     return {
        scroll:null
     }
   },
   mounted(){
   //这里因为后面还需要用到该滚动对象，所以需要用一个引用指向它，避免函数运行完后它被垃圾回收
   //允许上拉刷新和时刻都监听滚动
       this.scroll=new BScroll(document.querySelector('.wrapper'),{  probeType:3,
                click:true,pullUpLoad:true})
   }
   //监听滚动的位置
       this.scroll.on('scroll',(position)=>{console.log(position)})
}

.wrapper{
    height: 150px;
    background-color: red;
    overflow: hidden;
    overflow-y: scroll;
  }

<div ref=""sdds">    使用ref是明确拿到某个组件    (ref如果绑定再组件上，可以使用this.$ref.sdds来获取)

<div child="a">       使用child是拿到所有的子组件

自定义的组件<dim @click=“lisen()”> 是不支持监听的
<dim @click.native=“lisen()”> 可以写来解决该问题

betterScroll的一个小bug

bus有叫总线的意思。
子父组件通信可以使用emit，非子父组件通信可以使用bus。它可以在所有组件间实现灵活通信

防抖函数主要用在刷新里面，如果没有下一个函数过来，就不执行刷新，这样能大幅度提升性能。

vue的ref和$ref的区别

只要 ，想要在Vue中直接操作DOM元素，就必须用ref属性进行注册，用在组件上，就代表组件的引用，用在元素上，就代表元素。

$refs 是所有注册过的ref的一个集合，

console.log(this.$refs.input1)//<input type="text" id="input1">
console.log(document.getElementById('input1'))//<input type="text" id="input1">

这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。为了在create的时候引用DOM元素，先在DOM中使用ref标签进行了注册，然后便可以通过’this.$refs’再跟注册时的名称来引用DOM元素了--------------vue更新dom是异步的。可能其他元素还没创建完，vue实例化先创建，但是创建过程又需要引用其他元素，就可以通过ref提前注册组件，然后再异步更新dom就可以了。

vue如何调试

1. vue运行会报很多错，先把错的地方都注释掉，然后再释放一个，就调试一个，调试好后再递归的进行的下去，知道程序ok
2. 使用ref属性时： < scroll class=“content” ref=“scroll” >< /scroll >，我怀疑这个地方有问题。
   this.$refs.scroll.scrollTo(0,0,300)-----------------------开始我使用的是ctrl+左键。进去后发现不是我先想要的，以为是包导错了，实际我应该做调试才对的console.log(this.$refs.scroll)，再使用 console.log(this.$refs.scroll.scrollTo(0, 0, 300))就会发现原来是组件scorll里面没有scrollTo（）方法

参考文章

https://blog.csdn.net/weixin_41646716/article/details/80455506