😍

1.var let const
2.箭头函数

<style>
    #box {
        background: red;
        height: 40px;
        width: 80px;
    }
    #box.bgcolor  {
        background: yellow;
    }
</style>
<div id="box"></div>

 <script>
        const box = document.getElementById("box")
        box.onclick = function () {
            const obj = this;
            setTimeout(function () {
                console.log(obj)
                obj.className = 'bgcolor'
            }, 3000);

        }
</script>

<script>
    const box = document.getElementById("box");
    box.onclick = function () {
        setTimeout(() => {
            console.log(this);
            this.className = 'bgcolor';
        }, 3000);
    }
</script>

3.闭包
4.this
5.高阶函数

<script>
    let goods = [30, 80, 50, 3, 5, 1, 60, 9];
    // 取出大于10 元的商品
    let goods1 = [];
    // for (let i = 0; i < goods.length; i++) {
    //     if (goods[i] > 10) {
    //         good1.push(goods[i]);
    //     }
    // }

    for (let n of goods) {
        if (n >= 10) {
            goods1.push(n);
        }
    }
    console.log(goods1);
    let goods2 = [];
    for (let n of goods1) {
        goods2.push(n*0.5);
    }
    console.log(goods2);

    let sum = 0;
    for (let n of goods2) {
        sum += n;
    }
    console.log(sum);
</script>
// 高阶方法 filter map redu ce
<script>
    let goods = [30, 80, 50, 3, 5, 1, 60, 9];
    let goods1 = goods.filter(function (n) {
        return n >= 10;
    })
    console.log(goods1);
    let goods2 = goods1.map(function (n) {
        return n*0.5;
    })
    console.log(goods2);
    let sum = goods2.reduce(function (s, n) {
        return s+n;
    }, 0);
    console.log(sum)
    /*
    * 第一次，s参数是0， n是数组中的第一个元素
    * 第二次，s参数是第一次的回调函数返回值，n是数组的第二个元素
    * 以此类推
    * */

</script>
/*
箭头函数结合高阶函数
*/
<script>
    let goods = [30, 80, 50, 3, 5, 1, 60, 9];
    let sum = goods.filter(n => n>=10).map(n => n*0.5).reduce((s, n) => s+n); // 箭头函数， n>=10 返回n ()=> {}
    console.log(sum)
</script>

6.数据结构

<script>
    // const obj = new Set();
    // // 添加数据
    // obj.add(1);
    // console.log(obj)

    const obj = new Map();
    // 是用set方法添加, 添加键值对
    obj.set("one", "abc");
    console.log(obj)
</script>

7.模板字符串

<script>
    let name = "学习";
    let str = "这个是"+name+"一个字符串";
    let str2 = '这个是一个字符串';
    console.log(str)

    let title = "rubbon";
    let slogon = "成绩自己";

    // 模版字符串
    let jsx = `

    <title>${title}</title>
    <b>monkey</b>
    <div><i>${slogon}</i></div>
    `;
    console.log(jsx);
</script>

8.解构赋值 & 扩展运算符

<script>
    let arr = [1, 2, 3];
    let [a, b, c] = arr;
    console.log(a);
    console.log(b);
    console.log(c);

    let obj = {name: "zangsan", age: 23, sex:"female"}
    let {name, age, sex} = obj;
    console.log(name);
    console.log(age);
    console.log(sex);
// 扩展运算符
    let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]
    let arr3 = [...arr1, 7, 8, 9, ...arr2]
    console.log(arr3);
</script>

axios异步网络请求

10.ss
11.ff
12.vv

vue 语法

1. 计算属性
   methods和computed

  computed: {
    totalPrice: {
      get() {
        return this.books.reduce((s, n)=>s+n.price, 0);
      }
    }
  },
  methods: {
    totalPrice1() {
      let sum = 0;
      for (let i = 0; i < this.books.length; i++) {
        sum+=this.books[i].price;
      }
      return sum;
    }
  }

  totalPrice: {{totalPrice}}
  <br>
  totalPrice: {{totalPrice1()}}

2. 事件监听
   事件对象$event

   
   事件监听
3. key唯一标识

  <div>
    <input type="text" v-model="name">
    <button @click="add()">添加</button>
  </div>
<ul>
    <li @mouseenter="over(index)"
        :key="item.id" v-for="(item, index) in books"> # key唯一标识
      <input type="checkbox">
      {{index+1}}-{{item.name}}-¥{{item.price}}</li>
  </ul>

add() {
      this.books.unshift({name:this.name, price: 102, active:false});
      this.name='';
    }

4. 双向绑定和单向绑定

  <input type="text" v-model="msg">
  <br>
  {{msg}}
export default {
  name: "App.vue",
  data() {
    return {
      msg: "this is test..."
    }
  }
}

  <input type="text" :value="msg">
  <br>
  {{msg}}

  <input type="text" :value="msg" @input="change"> #这里使用了：value单向绑定，但是用@input绑定数据
  <br>
  <input type="text" :value="msg" @input="msg=$event.target.value">
<br>
  {{msg}}
  methods: {
    change(event){
      this.msg = event.target.value; // event是一个事件。取input里面的数据，实现双向绑定
      console.log(event)
    }
  }

v-model

5. 练习

   
   购物车

6. Vue父子组件之间的通信

   
   image.png

<div class="left">
      {{num}}
<!--      父组间在使用子组间的方法@绑定的关系，mycountevent子组件的方法-->
      <my-bar @mycountevent="demo"></my-bar>
<!--      demo是一个方法，并且有传参，但是在调用的使用不需要写成函数的形式-->
      <MyBar></MyBar>
    </div>

  methods: {
    // 父组件创建的方法
    demo(data) {
      this.num += data;
    }
  }

<div class="mybar">
  {{msg}}
  <button @click="changenum(2)">+</button>
<!--  子组间创建了一个方法changenum()-->
</div>

methods: {
    changenum(index) {
      // 子组间创建一个方法，使用this.$emit获取父组间的数据，第一个参数是父组间使用时的函数名字
      return this.$emit('mycountevent', index);
    }
  }

<!--      注意这里的父组件中是怎么使用子组建的-->
      <my-main :books="books"></my-main>
data() {
    return {
      num: 2,
      books: [
        {id:1, name:"戏说PHP", price:78},
        {id:2, name:"戏说JavaScript", price:78},
        {id:3, name:"戏说CSS", price:78},
        {id:4, name:"戏说Python", price:78},
        {id:5, name:"戏说GoLang", price:78}
      ]
    }
  } // 数据在父组件

props: ['books'], // 子组件

7.父子组件之间的访问方式

image.png