项目开发小技巧

  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：项目是分布的，以便任何两个项目之间的间距（和边缘的空间）相等。
  2. 代码的组织方式： 一般在created() 周期函数中，不写具体逻辑的函数代码，一般只在这里调用，方法写在methods里面， 写具体的相关请求

    3. vue 开发架构设计 vue开发小技巧_加载

  3. 如何将一个数组的数据放到另一个数组中
let totalNums=[]

const nums1=[20,11,22]

1. totalNums.push(...nums1)  该语法就是将nums1里面的东西结构出来，然后一次放进totalNums中
2. 用 for of 遍历数组
for(let n of nums1){ totalNums.push(n)}
  1. ref 如果绑定在组件中，那么可以通过this.$refs.refname 获取到的是一个组件的对象
    ref 如果绑定在普通元素中，那么可以通过this.$refs.refname 获取到的是一个元素的对 象，避免使用document.querySelector(’.wraper’) 存在多个 wrapper 的问题
  2. 使用better-scroll 做上拉加载更多时，有时候上拉加载不了，为什么呢？
    是因为数据还没完全加载完的时候，可滚动区域高度已经固定了，所以上拉没有反应。
    因此我们需要在数据加载完之后再调用
  3. 如何监听图片加载完成了?
  • 原生的js监听图片: img.onload = function() {}
  • Vue中监听: @load=‘方法’
  1. 防抖 debounce
    个人理解：假设我们有一个input 输入框，在输入框中输入字，下面就显示与之相应的内容
    输a显示a相关 输b显示b相关 输ab显示ab相关 ，相当于我每输一次就向服务器发送一次请求。
    但是如果我一下子输入iphone,那他是不是要发6次请求，这样的话服务器的压力就很大了，显然
    是不合理的。我们应该在用户输入的时候，等一下用户。当用户输入第一个字时，先取消发送请求，设置时间间隔，等用户的第二次输入，直到用户输入完我们在统一发送一次请求。
    而这就是我们的—防抖
  2. 所有的组件都有一个属性 $el : 用于获取组件中的元素
  3. v-if=“Object.keys(goods).length !== 0” Object.keys（）方法检验对象是否为空
  4. 当我们从服务器请求到的数据很复杂时，我们应该先进行数据的整合，再展示。
    例如： 把服务器拿到的数据封装到一个类里面，再来创建这个类的对象，然后用这个对象传到组件中进行展示（这个思想很重要 ！！！）
  • 创建类进行我们需要数据的整合
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); 移动端常用
```
  1. 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">
  1. FastClick 解决移动端的300ms 延迟
  • 安装：cnpm i fastclick -s
  • main.js:
import FastClick from "fastclick";
FastClick.attach(document.body);
  1. 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;

 },

};
computed: {
   
 ...mapGetters(["cartLength", "cartList"]),
   
}
  1. 之后你在template中可以直接使用 cartLength,cartList
    // {{cartLength}}
  2. 如果你想将一个 getter 属性另取一个名字，使用对象形式 然后直接这样使用{{Length}} j就行
computed: {

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