Vue.js基础语法学习(vue2)（三）

Vue.js基础语法学习(vue2)（三）

七、JavaScript高阶函数的使用

①filter过滤器的使用：

过滤数据时可以使用

const nums = ['308','852','88','173','156','21','25','33']
// filter中的回调函数有一个要求：必须返回一个布尔值
// 当返回true时，函数内部会自动将回调的n加入新的数组中去
// 当返回false时，函数内部会过滤掉此次的n

// 要求返回所有小于100的数存到新数组
let newNums = nums.filter(function(n){
    return n < 100
})

②map函数的使用：

当想对数组里每一个元素进行变化时可以使用

const nums = ['30','82','88','13','15','21','25','33']
// 当想对数组里每一个元素进行变化时可以使用
let newNums = nums.map(function(n){
  return n*2
})
console.log(newNums);

③*reduce函数的使用：

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

const nums = ['20','40','80','100']

// reduce(第一个参数是一个函数，第二个参数是preValue的初始值)
let total = nums.reduce(function(preValue,n){
    return preValue+n
},0)

// 因为数组里面有4个元素，所以应该要遍历四次
// 第一次：preValue=0(括号后面的初始值),n=20;
// 第二次：preValue=第一次调用函数的返回值:20,n=40;
// 第三次：preValue=第二次调用函数的返回值:60,n=80;
// 第四次：preValue=第三次调用函数的返回值:140,n=100
// 最终：返回240

汇总：

一个数组先找出小于100的数，然后乘以2，最后汇总：

const newNums = ['90','55','400','108','32','74']
let totals = newNums.filter(function(n){
  return n<100
}).map(function(n){
  return n*2
}).reduce(function(preValue,n){
  return preValue+n
})
console.log(totals);

// 箭头函数写法：
let t = newNums.filter(n => n<100).map(n => n*2).reduce((preValue,n) => preValue+n);
console.log(t)

八、表单绑定v-model的使用：

①v-model的原理：

• 表单控件在实际开发中是非常常见的，特别是对于用户信息的提交需要大量的表单。

• Vue中使用v-model指令来实现表单元素和数据的双向绑定。
  

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

• v-model其实是一个语法糖,它的背后本质上是包含两个操作:
• 1.v-bind绑定一个value属性
• 2.v-on指令给当前元索绑定input事件

<div id="app">
    <!-- v-model等于两个操作的结合 -->
    <!-- input事件可以监听输入 -->
    <input type="text" :value="massage" @input="valueChange">
    {{massage}}
  </div>
  <script src="../../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage:'你好啊'
      },
      methods: {
        valueChange(e) {
          // e.target.value是实时输入的数据
          this.massage = e.target.value;
        }
      }
    })
  </script>

<!-- 最简便的写法 -->
    <input type="text" :value="massage" @input="massage = $event.target.value">

$event:手动获取浏览器产生的event对象

②v-model结合radio类型：

<div id="app">
  <label for="male">
    <input type="radio" id="male"  value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female"  value="女" v-model="sex">女
  </label>
  <h2>{{sex}}</h2>
  </div>
  <script src="../../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        massage: "你好啊",
        // 可以通过这里设置默认值
        sex: "女"
      }
    })
  </script>

注意：

1. 如果这里没有绑定v-model需要在标签里添加相同的name才能保证两个标签互斥。
2. label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。

③v-model结合CheckBox：

<div id="app">
    <!-- 1.CheckBox单选框 -->
   <label for="agree">
     <input type="checkbox" name="" id="agree" v-model="isAgree">同意协议
   </label>
   <br>
   <button :disabled="!isAgree">下一步</button>
   <br>
   <!-- 2.CheckBox多选 (结合值绑定)-->
   <label v-for="item in hobbies" :for="item">
    <input type="checkbox" :id="item" :value="item" v-model="myHobbies">{{item}}
   </label>

   <h2>{{myHobbies}}</h2>
  </div>
  <script src="../../JS/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        massage:'你好啊',
        isAgree: false,
        hobbies: ['唱歌','跳舞','篮球','足球','羽毛球'],
        myHobbies: []
      }
    })
  </script>

④v-model结合select：

<div id="app">
   <!-- 选择一个 -->
   <select name="" id="" v-model="fruit">
     <!-- 注意v-model写这里 -->
     <option value="葡萄" >葡萄</option>
     <option value="草莓" >草莓</option>
     <option value="西瓜" >西瓜</option>
     <option value="芒果" >芒果</option>
   </select>
   <h2>您的选择是：{{fruit}}</h2>
   <!-- 选择多个 -->
   <select name="" id="" v-model="fruits" multiple>
     <!-- 注意v-model写这里 -->
     <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: {
        massage:'你好啊',
        fruit: '西瓜',
        fruits: []
      }
    })
  </script>

⑤v-model修饰符的使用：

• lazy修饰符 :

  • 默认情况下, v-model默认是在input事件中同步输入框的数据的。

  • 也就是说, -旦有数据发生改变对应的data中的数据就会自动发生改变。

  • lazy修饰符可以让数据在失去焦点或者回车时才会更新:

  <div id="app">
     <!--1.修饰符： lazy (懒加载) -->
     <!-- 延迟加载 当失去焦点或回车的时候再绑定 -->
     <input type="text" v-model.lazy="massage">
     <h2>{{massage}}</h2>
  </div>
    <script src="../../JS/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          massage:'你好啊',
        }
      })
    </script>
  

• number修饰符:

  • 默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。

  • 但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。

  • number修饰符可以让在输入框中输入的内容自动转成数字类型。

  <div id="app">
     <!-- 2.number -->
     <input type="number" v-model.number="age">
     <!-- 默认情况下v-model在绑定时赋值都是string类型 如果想要保持数字类型 -->
     <h2>{{age}}的类型是{{typeof(age)}}</h2>
    </div>
    <script src="../../JS/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          age: 18
        }
      })
    </script>
  

• trim修饰符:

  • 如果输入的内容首尾有很多空格,通常我们希望将其去除

  • trim修饰符可以过滤内容左右两边的空格

  <div id="app">
     <!-- 3.trim 自动去除左右两边输入的空格-->
     <input type="text" v-model.trim="name">
     <h2>{{name}}</h2>
    </div>
    <script src="../../JS/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          name: ''
        }
      })
    </script>