知识点扩展【一】有购物车案例多练习v-model双向绑定

1.axios和ajax的区别：

1、axios是一个基于Promise的HTTP库，而ajax是对原生XHR的封装；
2、ajax技术实现了局部数据的刷新，而axios实现了对ajax的封装。
🔗axios和ajax的区别

2.扩展运算符(…)是ES6的语法，

用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。
🔗扩展运算符

3.axios

3.1_axios基本使用-全局配置

axios.defaults.baseURL = "http://123.57.109.30:3006"

// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面

3.2_Vue生命周期-钩子函数

// 1. Vue生命周期-钩子函数
/*
    初始化
        beforeCreate --- 无法获取data/methods
        created      --- Vue实例创建完毕 (data和methods等等)
    挂载
        beforeMount  --- 无法获取"真实"DOM元素
        mounted      --- 组件挂载完毕, 可以获取到真实"DOM"
    更新
        beforeUpdate --- 挂载以后, data更新, 将要更新DOM之前
        updated      --- 获取更新"真实"DOM
    销毁 (组件从真实DOM上移除)
        beforeDestroy -- 手动清除 定时器 / 计时器 / eventBus的事件($off)
        destroyed     --- 已经销毁
*/

// 2. axios 
// 作用: 网路请求库
// 使用:
// (1): 下载axios
// (2): 引入axios
// (3): axios({})
/*
    axios({
        url: "请求地址",
        method: "请求方式",
        params: {
            后端参数名: 前端要传递值
        }, // 参数名和值, 会被axios拼接到url?后面 - 查询字符串
        data: {
            后端参数名: 前端要传递值
        } // 参数名和值, 会被axios拼接到请求体里
    })
*/
// (4): axios()原地返回Promise对象, then接收成功结果, catch接收失败的结果
// axios全局默认配置:
// axios.defaults.baseURL = "基地址http://ip:端口"
// 以后axios发起请求会在每次的url上面拼接这个地址再发起请求

生命周期&数据共享[父子-子父-兄弟]&ref引用&数组复习

4.Dom 获取元素的几种方式

获取页面中的元素可以使用以下几种方式:

• 根据ID获取
• 根据标签名获取
• 通过HTML5新增的方法获取
• 特殊元素获取

🔗Dom 获取元素的几种方式

4.1_通过ref属性获取原生DOM

4.2_Vue-异步更新DOM

4.3_$nextTick使用

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。
通俗的理解是：等组件的DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

4.4_ $nextTick使用场景

<template>
  <div>
      <input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
      <button v-else @click="btn">点击我进行搜索</button>
  </div>
</template>

<script>
// 目标: 点按钮(消失) - 输入框出现并聚焦
// 1. 获取到输入框
// 2. 输入框调用事件方法focus()达到聚焦行为
export default {
    data(){
        return {
            isShow: false
        }
    },
    methods: {
        async btn(){
            this.isShow = true;
            // this.$refs.myInp.focus()
            // 原因: data变化更新DOM是异步的
            // 输入框还没有挂载到真实DOM上
            // 解决:
            // this.$nextTick(() => {
            //     this.$refs.myInp.focus()
            // })
            // 扩展: await取代回调函数
            // $nextTick()原地返回Promise对象
            await this.$nextTick()
            this.$refs.myInp.focus()
        }
    }
}
</script>

没有拿到iptRef这个引用，引用为undefined。在生命周期中，data数据更新后页面还来得急渲染，就执行this.$refs.iptRef.focus();所以得到的结果undefined。
怎么才能不报错呢？前提把这行代码放到页面更新以后。对此Vue提供了this.$nextTick(cb)方法

可以写在updated里面吗？ 不能
updated里面只要数据变化就会触发updated刚开始输入框看不见，点一下看得见，此时数据变化会触发updated，再点一下，输入框隐藏，此时数据又变化又会触发updated获取焦点，与题设矛盾会报错！！！

4.5组件name属性使用

目标: 可以用组件的name属性值, 来注册组件名字

问题: 组件名不是可以随便写的?

答案: 我们封装的组件-可以自己定义name属性组件名-让使用者有个统一的前缀风格

二、 购物车案例

🔗之前黑马老师的案例购物车
购物车部分内容🔗

1.项目初始化

yarn add axios less less-loader@5.0.0 bootstrap

vue create shopcar
yarn add bootstrap
yarn add less less-loader@5.0.0 -D

修改配置文件、需要重启服务器

import 'bootstrap/dist/css/bootstrap.min.css'

2.头部自定义

3.请求数据

import axios from 'axios'

axios.defaults.baseURL = 'https://www.escook.cn'
Vue.prototype.$axios = axios

4.数据铺设

请求回来的数据转存到data中

this.list=res.data.list

只要请求回来的数据在页面渲染期间要用到，必须转存到data中

循环渲染Goods组件

5.重要的数据-修改count的值

<template>
  <div class="my-counter">
    <button type="button" class="btn btn-light" :disabled="this.isNum === 1" @click="sub">-</button>
    <input type="number" class="form-control inp" :value="isNum" @change="countChange" />
    <!-- <span class="form-control inp">{{ isNum }}</span> -->
    <button type="button" class="btn btn-light" @click="add">+</button>
  </div>
</template>

<script>
import bus from '@/components/eventBus.js'

export default {
  props: {
    isNum: {
      type: Number,
      default: 1
    },
    id: {
      type: Number,
      require: true
    }
  },
  methods: {
    countChange(e) {
      // 修改原生的DOM
      // console.log(e.target)
      // console.log(e.target.value)
      const obj = { id: this.id, val: Number(e.target.value) }
      console.log(obj)
      bus.$emit('share', obj)
    },
    add() {
      const obj = { id: this.id, val: this.isNum + 1 }
      bus.$emit('share', obj)
    },
    sub() {
      const obj = { id: this.id, val: this.isNum - 1 }
      bus.$emit('share', obj)
    }
  }
}
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn,
  .inp {
    transform: scale(0.9);
  }
}
</style>

所以要弄一个watch

watch: {
    obj: {
      deep: true,
      handler() {
        // 深度监听属性的变化
        // console.log(this.obj.goods_count)
        if(this.obj.goods_count<1){
          this.obj.goods_count = 1
        }
      }
    }
  }

Q:子组件改变对象里面的属性会影响外面数组里对象否
会，因为对象之间引用了相同的内存地址

Q:控制输入框的合法值
先控制按钮，然后监听输入框值，强制覆盖

6.全选影响小选框

7.小选影响全选

总结: 对象之间是引用关系, 对象值改变, 所有用到的地方都跟着改变

上午总结

// 1. Vue生命周期-钩子函数
/*
    初始化
        beforeCreate --- 无法获取data/methods
        created      --- Vue实例创建完毕 (data和methods等等)
    挂载
        beforeMount  --- 无法获取"真实"DOM元素
        mounted      --- 组件挂载完毕, 可以获取到真实"DOM"
    更新
        beforeUpdate --- 挂载以后, data更新, 将要更新DOM之前
        updated      --- 获取更新"真实"DOM
    销毁 (组件从真实DOM上移除)
        beforeDestroy -- 手动清除 定时器 / 计时器 / eventBus的事件($off)
        destroyed     --- 已经销毁
*/

// 2. axios 
// 作用: 网路请求库
// 使用:
// (1): 下载axios
// (2): 引入axios
// (3): axios({})
/*
    axios({
        url: "请求地址",
        method: "请求方式",
        params: {
            后端参数名: 前端要传递值
        }, // 参数名和值, 会被axios拼接到url?后面 - 查询字符串
        data: {
            后端参数名: 前端要传递值
        } // 参数名和值, 会被axios拼接到请求体里
    })
*/
// (4): axios()原地返回Promise对象, then接收成功结果, catch接收失败的结果
// axios全局默认配置:
// axios.defaults.baseURL = "基地址http://ip:端口"
// 以后axios发起请求会在每次的url上面拼接这个地址再发起请求