JavaScript高阶函数的使用、v-model、组件化

最新推荐文章于 2024-02-19 08:15:00 发布

叶岚羲

最新推荐文章于 2024-02-19 08:15:00 发布

阅读量708

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_44845659/article/details/121124389

版权

JavaScript 高阶函数的使用

1、 filter函数的使用
filter中的回调函数有一个要求：不许返回一个boolean值
（1）true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
（2）false：当返回false时，函数内部会过滤调这次的n

const nums = [10, 20, 111, 222, 333, 40, 50]
let newNums = nums.filter(function (n) {
  return n < 100;
})
console.log(newNums);

2、 map函数的使用
将数组中所有的元素进行统一的改变

let new2Nums = newNums.map(function (n) {
  return n * 2;
})
console.log(new2Nums);

3、reduce函数的使用
作用：对数组所有内容进行汇总，所有元素进行求和或者求积等等
（1）preValue: 表示函数function的上一次返回值；
（2）n：数组中的元素
（3）0：表示首次进入函数 function 的 preValue

let total = new2Nums.reduce(function (preValue, n) {
  return preValue + n;
}, 0)
console.log(total);

用 . 将三个函数联合使用

const nums = [10, 20, 111, 222, 333, 40, 50]

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

console.log(total);

结合箭头函数

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

v-model
v-model的使用和原理
在这里插入图片描述
v-model 结合 radio 类型使用

<div id="app">
  <!-- name和v-model均能够让两个radio互斥，写了v-model可以不用写name -->
  <label for="male">
    <input type="radio" id="male" value="男" v-model="gender">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="gender">女
  </label>
  <h2>你选择的性别是：{{gender}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      // gender: ''
      // 默认选择 男
      gender: '男'
    }
  })
</script>

点击“男”按钮，就会把radio值为“男”赋给 gender
v-model：checkbox

单选框是 boolean值，多选框是数组

<body>
  <div id="app">
    <!-- 1. checkbox单选框 -->
    <!-- <label for="agree"> -->
    <!-- <input type="checkbox" id="agree" v-model="isAgree">同意协议 -->
    <!-- </label> -->
    <!-- <h2>你的选择是：{{isAgree}}</h2> -->
    <!-- <button :disabled="!isAgree">下一步</button> -->

    <!-- 2.checkbox多选框 -->
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="排球" v-model="hobbies">排球

    <h2>您的爱好是：{{hobbies}}</h2>

  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好呀',
        isAgree: false,  //单选框是boolean值
        hobbies: []  //多选框是数组
      }
    })
  </script>
</body>

v-model：select
在这里插入图片描述 1、checkbox 单选框

<body>
  <div id="app">
    <!-- 1.checkbox 单选框 -->
    <select name="abc" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
      <option value="橘子">橘子</option>
    </select>
    <h2>您选择的水果是：{{fruit}}</h2>

2.checkbox 多选框
增加 multiple，按住ctrl，再进行选择，实现多个选中

    <!--  -->
    <select name="abc" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
      <option value="橘子">橘子</option>
    </select>
    <h2>您选择的水果是：{{fruits}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        fruit: '苹果',
        fruits: []
      }
    })
  </script>
</body>

input中的值绑定
在这里插入图片描述 :value=“item”，value 值是从动态给定的

<div>
  <label v-for="item in originFruits" :for="item">
      <input type="checkbox" :value="item" :id="item" v-model="fruits">{{item}}
  </label>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      fruit: '苹果',
      fruits: [],
      originFruits: ['苹果', '香蕉', '西瓜', '橘子']
    }
  })
</script>

v-model修饰符的使用
在这里插入图片描述

<!-- 1.lazy 可以让数据在失去焦点或者回车时才会更新 -->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>

<!-- 2.number可以将输入框中的内容自动转成数字类型 -->
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}</h2>

<!-- 3.trim修饰符可以过滤内容左右两边的空格 -->
<input type="text" v-model.trim="name">
<h2>您输入的名字:{{name}}</h2>

组件化
Vue组件化思想
在这里插入图片描述注册组件的基本步骤

在这里插入图片描述

<body>

  <div id="app">
    <!-- 3.使用组件 -->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    // 1.创建组件构造器对象
    const cpnC = Vue.extend({
      template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈哈哈哈哈</p>
        <p>我是内容，哈哈哈哈哈哈</p>
      </div>`
    });

    // 2.注册组件（全局组件）
    Vue.component('my-cpn', cpnC)

    const app = new Vue({
      el: '#app',
      data: {
        message: ''
      }
    })
  </script>

</body>

注册组件步骤解析
在这里插入图片描述 my-cpn必须要在Vue的实例里面，在这里即是 id名为app的div
全局组件和局部组件

1、全局组件
在多个Vue实例下面均可以使用

Vue.component('cpn', cpnC)

2、局部组件
利用 components 创建局部组件，如下程序创建了vue的app实例的组件

    const app = new Vue({
      el: '#app',
      data: {
        message: ''
      },
      components: {
        // 2.注册局部组件，只能在vue的app实例中使用
        // cpn使用组件时的标签名
        cpn: cpnC
      }
    })

父组件和子组件的区分

<body>
  <div id="app">
    <cpn2></cpn2>  // 在使用cpn2的时候，cpnC2在内部已经被编译完成。在解析template的过程中会用cpn1中的模板对<cpn1></cpn1>进行替换
    <cpn1></cpn1>   //会报错
  </div>

  <script src="../js/vue.js"></script>
  <script>

    // 创建第一个组件构造器(子组件)
    const cpnC1 = Vue.extend({
      template: `
        <div>
          <h2>我是标题1</h2>
          <p>我是内容，哈哈哈哈哈哈</p>
        </div>
        `
    })

    // 创建第二个组件构造器(父组件)
    const cpnC2 = Vue.extend({
      // 模板(template)里面，只能有一个根元素，所以cpn1标签必须在div里面
      template: `
        <div>
          <h2>我是标题2</h2>
          <p>我是内容，呵呵呵呵呵呵</p>
          <cpn1></cpn1>  
        </div>
        `,
      components: {
        cpn1: cpnC1
      }
    })

    // root组件
    const app = new Vue({
      el: '#app',
      components: {
        cpn2: cpnC2
      }
    })
  </script>

</body>

组件的语法糖注册方式

<script>

  // 注册全局组件的语法糖
  Vue.component('cpn1', {
    template: `
      <div>
        <h2>我是标题1</h2>
        <p>我是内容，哈哈哈哈哈哈哈</p>  
      </div>
    `
  })

  // 注册局部组件的语法糖
  const app = new Vue({
    el: '#app',
    components: {
      'cpn2': {
        template: `
          <div>
            <h2>我是标题2</h2>
            <p>我是内容，呵呵呵呵呵呵</p>
          </div>
          `
      }
    }
  })
</script>

模板的分离写法

1、script 标签，注意：类型必须是 text/x-template

  <script type="text/x-template" id="cpn">
    <div>
      <h2>我是标题</h2>
      <p>我是内容，哈哈哈哈哈哈</p>
    </div>
  </script>

2、template 标签

  <template id="cpn">
    <div>
      <h2>我是标题</h2>
      <p>我是内容，呵呵呵呵呵呵呵</p>
    </div>
  </template>

创建并注册全局组件

    Vue.component('cpn', {
      template: '#cpn'
    })

组件不能访问Vue实例数据

Vue组件有自己保存数据的地方
在这里插入图片描述组件中的data为什么是函数

保证每次返回的都是不同的对象，避免出现连锁反应。

    Vue.component('cpn', {
      template: '#cpn',
      // data必须是一个函数，且返回的是一个对象
      data() {
        return {
          title: 'abc'
        }
      }
    })

父子组件通信
在这里插入图片描述
父传子（props）

示例：这里，prop选项是使用一个数组

<body>
  <div id="app">
    <cpn :cmessage="message" :cbooks="books"></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>{{cmessage}}</h2>
      <ul>
        <li v-for="item in cbooks">{{item}}</li>
      </ul>
    </div>
  </template>

  <script src="../js/vue.js"></script>

  <script>

    //父传子：props
    const cpn = {
      template: '#cpn',
      props: ['cbooks', 'cmessage']
    }

    const app = new Vue({
      el: '#app',
      data: {
        message: '你好呀',
        books: ['西游记', '红楼梦', '水浒传']
      },
      components: {
        cpn
      }
    })

  </script>

</body>

在这里插入图片描述

props: {
  // 1.类型限制
  // cmovies: Array,
  // cmessage: String

  // 2.提供一些默认值,以及必传值
  cmessage: {
    type: String,
    // 在没有绑定message时,cmessage的默认值
    default: 'aaaaaaaa',
    // 增加该条语句，表示message是必传的
    required: true
  },

  // 3.类型是对象或者数组时，默认值必须是一个函数
  cbooks: {
    type: Array,
    default() {
      return []
    }
  }
}

props中的驼峰标识

在创建子组件时，如果使用了驼峰标识，则在调用该组件时，要将每一个单词用 - 连接。
cInfo --> c-info

<body>
  <div id="app">
    <cpn :c-info="info"></cpn>
  </div>

  <template id="cpn">
    <h2>{{cInfo}}</h2>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    const cpn = {
      template: '#cpn',
      props: {
        cInfo: {
          type: Object,
          default() {
            return {}
          }
        }
      }
    }

    const app = new Vue({
      el: '#app',
      data: {
        info: {
          name: 'Sunnie',
          age: 18,
          height: 1.88
        }
      },
      components: {
        cpn
      }
    })
  </script>
</body>

子传父（自定义事件）
在这里插入图片描述

<body>
  <!-- 父组件模板 -->
  <div id="app">
    <cpn @item-click="cpnClick"></cpn>
  </div>

  <!-- 子组件模板 -->
  <template id="cpn">
    <div>
      <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>

    // 1.子组件
    const cpn = {
      template: '#cpn',
      data() {
        return {
          categories: [
            { id: 'aaa', name: '热门推荐' },
            { id: 'bbb', name: '手机数码' },
            { id: 'ccc', name: '家用家电' },
            { id: 'ddd', name: '电脑办公' },
          ]
        }
      },
      methods: {
        btnClick(item) {
          //发射事件itemclick：自定义事件
          this.$emit('item-click', item)
        }
      }
    }

    // 2.父组件
    const app = new Vue({
      el: '#app',
      components: {
        cpn
      },
      methods: {
        cpnClick(item) {
          console.log('cpnClick', item);
        }
      }
    })
  </script>
</body>

父子组件通信——结合双向绑定案例（还没明白）
父访问子-children-refs
父子组件的访问方式： $children（很少使用） ![在这里插入图片描述](https://img-blog.csdnimg.cn/a32b7da46a044cb9a062d4b18a8d4e9a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAamFja2l5bG9uZw==,size_20,color_FFFFFF,t_70,g_se,x_16) 父子组件的访问方式：$ refs（经常使用）

$refs => 对象类型，默认是一个空的对象。

<cpn ref="aaa"></cpn>
console.log(this.$refs.aaa.name);

子访问父-parent-root
父子组件的访问方式：$parent（很少使用）

console.log(this.$parent.name);

父子组件的访问方式：$root（很少使用）

console.log(this.$root.message);

插槽（slot）
在这里插入图片描述

叶岚羲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高阶函数的使用、v-model、组件化

JavaScript高阶函数的使用、v-model、组件化JavaScript 高阶函数的使用1、 filter函数的使用filter中的回调函数有一个要求：不许返回一个boolean值（1）true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中（2）false：当返回false时，函数内部会过滤调这次的nconst nums = [10, 20, 111, 222, 333, 40, 50]let newNums = nums.filter(function (n) {
复制链接

扫一扫