Day03 JS高阶函数和Vue指令（下）

Day03 JS高阶函数和指令(下)

一、JS数组高阶函数

filter函数

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

this.numbers.filter(function (n) {
    return n > 50;
})

返回一个由原数组大于50的元素组成的新数组。

map函数

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

this.numbers.map(function (n) {
    return n * 2;
})

遍历数组每个元素乘以2，返回一个新数组。

reduce函数

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

this.numbers.reduce(function (previous, n) {
    return previous + n;
}, 0)

reduce()函数有两个参数，第二个参数是初始化值，第一次执行时会传给previous，n为每次执行函数时传递的数组元素。当计算出结果时，改结果会作为下一次函数的previous进行计算。

实例中的函数表示计算数组元素之和。

二、v-model指令

基本使用

v-model实现了数据的双向绑定。

双向绑定与响应式的区别：

双向绑定：当改变输入框的值时vue对象内的数据也会发生改变。

<div id="app">
  <input type="text" v-model="username"/>
  {{username}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      username: 'admin'
    }
  })
</script>

{{username}}表示将Vue的data属性的值显示到界面上，当改变输入框的值时，{{username}}也会改变，说明Vue内的数据改变了，这样v-model就实现了双向绑定。

响应式：只能通过改变vue的data属性内的数据从而改变页面的值。

本质

v-model是一个语法糖，是v-bind和v-on指令的结合。

<div id="app">
  {{username}}
  <!--本质-->
  <input type="text" @input="getInputValue" :value="username">
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      username: 'admin'
    },
    methods: {
      getInputValue(event){
        this.username = event.target.value;
      }
    }
  })
</script>

v-bind实现了Vue内data变量的绑定，v-on实现了监听事件，监听输入框的输入，将输入的值赋给Vue内data变量。

和radio结合使用

<div id="app">
  <label>
    <!-- 通过name属性使radio单选 -->
    <!--<input type="radio" value="0" name="gender"/>男
    <input type="radio" value="1" name="gender"/>女-->

    <label for="male">
      <input type="radio" value="男" v-model="gender" id="male"/>男
    </label>
    <label for="female">
      <input type="radio" value="女" v-model="gender" id="female"/>女
    </label>
    <h2>性别: {{gender}}</h2>
  </label>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      gender: '男'
    }
  })
</script>

和checkbox结合

<div id="app">
  <!--单选：boolean-->
  <div>
    <label for="license">
      <input type="checkbox" id="license" v-model="license">同意协议
    </label>
    <button :disabled="!license">下一步</button>
  </div>
  <!--多选：数组-->
  <div>
    <!--值绑定-->
    <label v-for="hobby in originHobbies" :for="hobby">
      <input type="checkbox" :id="hobby" :value="hobby" v-model="hobbies"> {{hobby}}
    </label>
    <!--<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>
<!--  <input type="checkbox">-->
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      license: false,
      hobbies: [],
      originHobbies: [
          "篮球", "游泳", "羽毛球", "保龄球"
      ]
    }
  })
</script>

和select结合

<div id="app">
  <!--当option不写value属性时，绑定的值与选项相同-->
  <div>
    <select v-model="actor">
      <option>刘德华</option>
      <option>张学友</option>
      <option>黎明</option>
      <option>郭富城</option>
    </select>
    <h2>单选: {{actor}}</h2>
  </div>
  <div>
    <select v-model="actors" multiple>
      <option>刘德华</option>
      <option>张学友</option>
      <option>黎明</option>
      <option>郭富城</option>
    </select>
    <h2>多选: {{actors}}</h2>
  </div>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      actor: '刘德华',
      actors: []
    }
  })
</script>

v-model修饰符

lazy：当失去焦点或按下回车才会触发双向绑定。

number：绑定的值作为数字。

trim：去除字符串左右两边空格。

<div id="app">
  <!--layz-->
  <input type="text" v-model.lazy="username">
  {{username}}
  <!--number-->
  <input type="number" v-model.number="age">
  {{age}}---{{typeof age}}
  <!--trim-->
  <input type="text" v-model.trim="username">
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      username: 'admin',
      age:0
    }
  })
</script>