vue复习3

高阶函数

// 2.for (let i in this.books) //直接拿到序号
      // let totalPrice = 0
      // for (let i in this.books) {
      //   const book = this.books[i]
      //   totalPrice += book.price * book.count
      // }
      //
      // return totalPrice

      // 3.for (let i of this.books) //直接拿到里面的item 
      // let totalPrice = 0
      // for (let item of this.books) {6
      //   totalPrice += item.price * item.count
      // }
      // return totalPrice

// 编程范式: 命令式编程/声明式编程
// 编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)
// filter/map/reduce
// filter中的回调函数有一个要求: 必须返回一个boolean值
// true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中
// false: 当返回false时, 函数内部会过滤掉这次的n
const nums = [10, 20, 111, 222, 444, 40, 50]

// let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
// console.log(total);

// let total = nums.filter(function (n) {
//   return n < 100
// }).map(function (n) {
//   return n * 2
// }).reduce(function (prevValue, n) {
//   return prevValue + n
// }, 0)
// console.log(total);

v-model的使用

实现了数据的双向绑定，在表单中使用的较多

v-model的原理

v-model修饰符

组件！！！

；；；；；

组件内部不能访问vue实例的数据，vue组件有自己保存数据的地方

父传子中的驼峰标识

子传父 通过自定义事件

1.子组件监听事件
2.在方法里面发射出去事件
3.在父组件的标签里监听发射过来的事件
4.在父方法里处理

父子组件直接访问

但是一般不会使用￥children方法，因为这方法拿到的是一个数组，里面包含子组件，组件数量变化后不方便使用。
一般使用$refs方法

这种方法可以访问到具体想访问的子组件，常用。

子访问父（基本不用）

使用￥parents

插槽 （slot）

具名插槽的使用

在替换进去的标签里写 slot=“名字”,就可以具体替换那个slot了

编译的作用域

作用域插槽

相当于对子组件的数据进行处理后展示

<div id="app">
  <cpn></cpn>

  <cpn>
    <!--目的是获取子组件中的pLanguages-->
    <template slot-scope="slot">
      <!--<span v-for="item in slot.data"> - {{item}}</span>-->
      <span>{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>

  <cpn>
    <!--目的是获取子组件中的pLanguages-->
    <template slot-scope="slot">
      <!--<span v-for="item in slot.data">{{item}} * </span>-->
      <span>{{slot.data.join(' * ')}}</span>
    </template>
  </cpn>
  <!--<cpn></cpn>-->
</div>

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
          }
        }
      }
    }
  })
</script>