Vue 项目开发小技巧

项目开发小技巧

1. 组件必须有一个根 div (.vue文件)

2. 如果你想要给插槽设置样式，则需使用一个div将其包裹起来，然后给div 设置样式

3. line-height 要有内容才能撑起来，无法自动撑起

4. 设计模式： 首页组件面向home.js开发，home.js 面向request.js开发；在home.js中写着首页所有请求的 url 和参数，到时候home.vue调用对应的函数就行

   home.vue —> home.js ---->request.js

5. justify-content 容器属性

   1. 有6个值

      flex-start（默认值）：左对齐
      flex-end：右对齐
      center： 居中
      space-between：两端对齐，项目之间的间隔都相等。
      space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
      space-evenly：项目是分布的，以便任何两个项目之间的间距（和边缘的空间）相等。

      

6. 代码的组织方式： 一般在created() 周期函数中，不写具体逻辑的函数代码，一般只在这里调用，方法写在methods里面， 写具体的相关请求

7. 如何将一个数组的数据放到另一个数组中

   let totalNums=[]
   
   const nums1=[20,11,22]
   
   1. totalNums.push(...nums1)  该语法就是将nums1里面的东西结构出来，然后一次放进totalNums中
   2. 用 for of 遍历数组
   for(let n of nums1){ totalNums.push(n)}
   

8. ref 如果绑定在组件中，那么可以通过this.$refs.refname 获取到的是一个组件的对象

   ref 如果绑定在普通元素中，那么可以通过this.$refs.refname 获取到的是一个元素的对 象，避免使用document.querySelector(’.wraper’) 存在多个 wrapper 的问题

9. 使用better-scroll 做上拉加载更多时，有时候上拉加载不了，为什么呢？

   是因为数据还没完全加载完的时候，可滚动区域高度已经固定了，所以上拉没有反应。

   因此我们需要在数据加载完之后再调用

10. 如何监听图片加载完成了?

    • 原生的js监听图片: img.onload = function() {}
    • Vue中监听: @load=‘方法’

11. 防抖 debounce

    个人理解：假设我们有一个input 输入框，在输入框中输入字，下面就显示与之相应的内容

    输a显示a相关 输b显示b相关 输ab显示ab相关 ，相当于我每输一次就向服务器发送一次请求。

    但是如果我一下子输入iphone,那他是不是要发6次请求，这样的话服务器的压力就很大了，显然

    是不合理的。我们应该在用户输入的时候，等一下用户。当用户输入第一个字时，先取消发送请求，设置时间间隔，等用户的第二次输入，直到用户输入完我们在统一发送一次请求。

    而这就是我们的—防抖

12. 所有的组件都有一个属性 $el : 用于获取组件中的元素

13. v-if=“Object.keys(goods).length !== 0” Object.keys（）方法检验对象是否为空

14. 当我们从服务器请求到的数据很复杂时，我们应该先进行数据的整合，再展示。

    例如： 把服务器拿到的数据封装到一个类里面，再来创建这个类的对象，然后用这个对象传到组件中进行展示（这个思想很重要 ！！！）

    • 创建类进行我们需要数据的整合

    export class Goods {
    
     constructor(*itemInfo*, *columns*, *services*) {
    
      this.title = *itemInfo*.title;
    
      this.desc = *itemInfo*.desc;
    
      this.newPrice = *itemInfo*.price;
    
      this.oldPrice = *itemInfo*.oldPrice;
    
      this.discount = *itemInfo*.discountDesc;
    
      this.columns = *columns*;
    
      this.services = *services*;
    
      this.realPrice = *itemInfo*.lowNowPrice;
    
     }
    
    }
    

    • 创建对象并保存到组件里（goods 为组件定义的数据用来保存）该操作是在 .then函数里面

      this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
      

    • 向组件传入该对象

      <detail-base-info :goods="goods"/>
      

```
 height: calc(100% - 44px);
 除去头部 内容区自动撑满整个频幕 min-height: calc(100% - 40px); 移动端常用
```

16. v-lazy 懒加载的作用和使用

    • 作用： 当页面需要加载大量图片时（需要向下滚动页面），使用懒加载可以实现只优先加载 页面可视区域的图片，从而使得页面加载更为流畅

    • 安装 ：npm install vue-lazyload --save-dev cnpm i vue-lazyload

    • main.js :

       import VueLazyload from 'vue-lazyload'
       Vue.use(VueLazyload)
      

    • 使用 : 直接将 :src 替换为 v-lazy

      <img v-lazy="img.src">
      <img :src="img.src">
      

17. FastClick 解决移动端的300ms 延迟

    • 安装：cnpm i fastclick -s

    • main.js:

    • import FastClick from "fastclick";
      FastClick.attach(document.body);
      

18. Vuex 中的mapGetters 辅助函数的使用

    • 使用场景：假如你想在某个组件里使用Vuex store 中存储的state的某个属性值，一般的话，我们可以通过计算属性computed: 写一个方法来获取 $store.state.xxx.属性，然后在页面中显示，但是这样有时候会有点麻烦，我们想着可不可以直接使用，不需要再写计算属性，这个时候我们就可以用到mapGetters, 将数据的某些属性放在getters中（比如长度length）将其封装并导出

    • 1. 首先 在组件中 导入 mapGetters : import { mapGetters} from ‘Vuex’

      2. 在组件的computed:{}使用 …mapGetters([ “这里面写你在getters中封装的方法” ])

      3. 假如你在getters.js 封装了如下 (cartList 为store中存储的state) ：

         export default {
         
          cartLength(*state*) {
         
           return *state*.cartList.length;
         
          },
         
          cartList(*state*) {
         
           return *state*.cartList;
         
          },
         
         };
         
         

      4. computed: {
            
          ...mapGetters(["cartLength", "cartList"]),
            
         }
            
         
         

      5. 之后你在template中可以直接使用 cartLength,cartList

         //

         {{cartLength}}

      6. 如果你想将一个 getter 属性另取一个名字，使用对象形式 然后直接这样使用{{Length}} j就行

         computed: {
         
           ...mapGetters({
         	Length: 'cartLength',
         	List:'cartList'
         }),
         },
         
         
         
         

19. 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符 ；一般的在组件上使用@是监听子组件发射的事件； 需要注意的是 .native在vue3中遗弃，vue3中使用 $emits选项

  ​