vue进阶（三）

javaScript高阶函数

• filter()（过滤操作）

  const nums = [10,20,30,40,50]
  // 执行nums.length()次
  let newNums = nums.filter(function(n){
    // filter中的回调函数必须返回一个布尔值，为true时，函数内部会自动将这次回调的num加入到新的数组中；为false时，函数内部会过滤掉n（其内部会将这个新的数组创建好，使用时注意接收就行）
    return 过滤条件
  })

• map()（映射操作）

  const nums = [10,20,30,40]
  // 执行nums.length()次
  let newNums = nums.map(function(n){
    // 将所有的nums中的值都乘以2
    return n * 2
  })
  

• reduce()（汇总操纵）

  • 作用：对数组中所有的内容进行汇总

  const nums = [10,20,30,40]
  // 回调函数执行4次
  let total = let newNums = nums.reduce(function(preValue,n){
    // 第1次：preValue = 0，n = 10
    // 第2次：preValue = 第1次的返回值，n = 20
    // 第3次：preValue = 第2次的返回值，n = 30
    // 第4次：preValue = 第3次的返回值，n = 40
    
    return preValue + n
  }, 0)  // 0为preValue的初始化值
  

v-model（数据双向绑定）

• 基本使用

  • 作用：将data中的数据绑定到h5中

  • 原理：v-model相当于两个指令的结合（v-bind:value="" 和 v-on:input=""）

• 结合redio使用

  • v-model绑定同一个值时就能达到互斥的效果，name属性可以省略

• 结合checkbox使用

• 结合select使用

  • 添加multiple属性

• 值绑定

  • 相当于值绑定

• v-model修饰符

  • layz

    语法：v-model.layz = ""

    作用：失去焦点的时候再进行数据的更新，减少数据更新的频次

  • number

    语法：v-model.number = ""

    作用：v-model绑定的数值默认为string类型，该修饰符可直接控制获取的数据类型为number

  • trim

    语法：v-model.trim = ""

    作用：剥除字符串两端的空格

组件化

• 组件的是使用分为3个步骤

  • 调用Vue.extend()方法创建组件构造器（对象）

  • 调用Vue.compontent()方法注册组件

  • 在Vue实例的作用范围内使用组件

• 基本使用

  // 创建组件构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>标题</h2>
        <p>内容</p>
      </div>
    `
  })
  
  // 注册组件（传递两个参数）
  Vue.component('组件的标签名称','组件构造器')
  
  // 组件的使用<组件标签名称></组件标签名称>
  

  • 全局组件

    可在多个组件中使用

  • 局部组件

    在组件实例的components中进行注册，如 components:

• 组件注册

  • 语法糖

  Vue.component("cpn",{
    template:`
      <div>组件内容</div>
    `
  })
  

• 组件模板抽离

<!-- 第一种方式，写入type为text/x-template的script标签 -->
<script type="text/x-template">
  
<script>

<script>
  Vue.component("cpn", {
    
  })
</script>