01 - mock.js

在项目开发过程中：

前端：根据静态页面完成结构 & 样式 ，根据接口文档完成数据渲染

后端：开发接口

问题：

前端的静态页面已经写完，后端的接口文档还没有开发完成

mock.js 可以用来解决：

当前端的静态页面写完，但是接口还没有出来，就可以使用 mock.js 来模拟后端的接口

传送门也可以在github中搜

作用： 生成随机数据，拦截 Ajax 请求(模拟后端的接口)

使用：

• 生成随机数据

  • 步骤：

    • 1.0 下载 mock：

      npm i mockjs --save
      

    • 2.0 使用 mock

      // 导入 Mock
      import Mock from 'mockjs'
      // 调用方法得到随机数据
      var data = Mock.mock({`list|1-10`: [{'id|+1': 1}]
      })
      // 将数据进行打印
      console.log(data)
      

• 拦截异步请求

  • 步骤：

    • 1.0 拦截异步请求
      
      拦截到的数据:
      

  • 注意点：

    • 一旦设置了 mock 来拦截异步请求，将来异步请求会被 mock 拦截下来，在浏览器的 network 中是看不到的。

• 生成数据的规则

  • 数据模板

  • 每个属性由 3 部分构成：属性名、生成规则、属性值：

    // name: 属性名
    // rule：生成的规则
    // value：属性值
    'name|rule': value
    

  • 数据占位符
    
    

总结：

• mockjs 的作用：生成随机数据 & 拦截异步请求
• 在实际开发过程中，后端接口没有开发好，前端可以使用 mock.js 来模拟接口
• 如果前期前端使用 mockjs 来模拟后端接口，等到后端的接口开发完成之后，需要将接口从 mock 中切换到后端接口中，这个过程叫做前后端联调
  • 往往自己使用 mock 来生成数据运行项目是没有问题的，但是一旦切换到后端的接口中后，可能会出现问题。所以一般前后端联调都是项目上线之前的最后一步。

02 - scoped

vue 中的知识点：让 css 存在作用域，让 style 中的样式只在当前文件中起作用

结论：

• 在 vue 中默认情况下，样式是全局的
• 设置了 scoped 属性之后的样式就具有了作用域

03 - deep

需求：在不去掉 App.vue 中 style 中的 scoped 属性的情况下，我们要将 .content 的样式作用到子组件中

名称：深度选择器（Vue-cli 中特有的）

作用：让设置了 scoped 属性的样式作用到子组件中

• 加深度选择器/deep/
  
• 不写/deep/,使用两个style标签
  

总结：

• 在 vue 中设置的样式默认都是全局样式
• 设置了 scoped 属性的 style 标签中的样式只能作用到当前文件中
• 在设置了 scoped 属性的 style 标签中，再设置 /deep/ ，这样的样式可以作用到子组件中
• /deep/ 只能配合 less 来使用

04 - 生命周期

前置知识点：

$mount() 方法：作用与 el 属性一样，都是可以将 vue 实例渲染到视图容器中

template 属性：如果设置了这个属性，将来在页面上渲染时，会将 template 作为页面的内容进行渲染

• 生命周期的流程

  • 1.0 创建一个 vue 的实例
  • 2.0 初始化事件 & 生命周期
    • 在创建 vue 实例时，这个对象其实是空的，到了这一步才慢慢开始执行一些内容
  • 3.0 初始化实例中 data 与 method
    • 在这一步之前 data 与 method 中其实是没有内容的
  • 4.0 判断并且生成虚拟 dom
    • 判断实例中是否存在 el 属性：(el：是否指定的渲染的容器)
      • 如果存在：
        • 继续向下执行
      • 如果不存在：
        • 当调用 $mount 方法时，继续向下执行
    • 判断实例中是否存在 template 属性
      • 如果存在：
        • 将 template 属性中对应的内容生成为一个虚拟 dom
      • 如果不存在：
        • 将<div id="app"></div> 中的内容生成为一个虚拟 dom
  • 5.0 将虚拟 dom 渲染到页面上
  • 6.0 页面会进入挂载完毕的状态等待 data 中数据的改变
    • 如果 data 中的数据发生改变：
      • 将虚拟 dom 重新渲染，并且更新到页面上，再次进行挂载完毕的状态
  • 7.0 销毁 vue 实例

• 注意点：

  • el：是否指定的渲染的容器
  • el 与 $mount 其实是一样的，都是用来指定页面的渲染容器
  • template：
    • 如果 vue 实例中不存在，会直接将 <div id=“app”></div> 中的内容渲染到页面上
    • 如果 vue 实例中存在，会直接将 template 属性中的内容渲染到页面上
  • 虚拟 dom：
    • 相当于将内容渲染到页面上进行的一次 打草稿

• 生命周期的钩子函数

  • 四组：
    • 在初始化 data & method 时执行
      • 之前：beforeCreate
      • 之后：created
    • 在将虚拟 dom 渲染到页面上时执行
      • 之前：beforeMount
      • 之后：mounted
    • 修改页面上的 data 时执行
      • 之前：beforeUpdate
      • 之后：updated
    • 销毁 vue 实例时执行
      • 之前：beforeDestroy
      • 之后： destoryed

  
  图网上找的

05-rem适配

我们做手机端项目的时候不同的手机型号显示的内容大小是要做适配的
传送们: link.