vue初学-day07

01-(掌握)JavaScript高阶函数的使用P45 - 00:44



filter，map，reduce

1、filter中的回调函数有一个要求：必须返回一个boolean值，（返回true时，函数内部会自动将这次回调的n加入到新的数组中，返回false时，函数内部会滤掉这次的n）

2、map对数组中的所有东西进行某一次变化的时候，

3、reduce函数的使用。对数组中所有内容进行汇总。

  const nums=[10,20,100,254,300,41]
//1、filter函数的使用，filter参数是一个回调函数，返回必须是个布尔值，
    //当返回true时，函数内部会自动将这次回调的n加入新的数组中
    //当返回false时，函数内部会自动过滤掉这次的n
    // 取出小于100的
  let newNums = nums.filter(function (n) {
    return n < 100
  });
    console.log(newNums);//[10,20,41]
//  2、map对数组中的所有东西进行某一次变化的时候
  let new2nums = nums.map(function (n) {
    return n*2
  });
  console.log(new2nums);//[20, 40, 200, 508, 600, 82]
//  3、reduce作用 对数组中所有的内容进行汇总
    // preValue初始值为0默认的参数，n为数组的每一个值（后面依次往后，preValue 是n和preValue计算）
  let total = nums.reduce(function (preValue,n) {
      return preValue + n;
  },0);
  console.log(total)//725
//  第一次 preValue=0 ，n=10
//  第二次 preValue=10 ，n=20
//  第三次 preValue=30 ，n=100
//  第四次 preValue=130 ，n=254
//  第四次 preValue=384 ，n=300
//  第四次 preValue=684 ，n=41

//  三个高阶函数综合写法
  let totalF=nums.filter(function (n) {
    return n<100;
  }).map(function (n) {
    return n*2;
  }).reduce(function (preValue,n) {
    return preValue +n;
  },0);
  console.log(totalF)

02-(掌握)v-model的使用和原理P46 - 00:02

1. v-model和表单一起使用，实现数据双向绑定
2. 用于input textarea元素
3. 实时将输入的内容传递给message,message发生改变，dom中会发生响应的改变。

• 原理：v-bind绑定value属性，v-on指令给当前元素绑定input事件。

  {{message}}

  等同于

03-(掌握)v-model结合radio类型使用P47 - 00:11

04-(掌握)v-model结合checkbox类型使用P48 - 09:36

<div id="app">
    <h2>{{message}}</h2>
  <!--input ,textarea-->
  <input type="text" v-model="message">
  <textarea v-model="message" cols="30" rows="10"></textarea>
<!--radio-->
  <input type="radio" value="男" name="sex" v-model="sex">男
  <input type="radio" value="女" name="sex" v-model="sex">女
  <h2>你选择的性别是：{{sex}}</h2>
  <!--checkbox-->
  <input type="checkbox" v-model="isCheck">单选框
  <button :disabled="!isCheck">下一步</button>
  <h2>是否选中{{isCheck}}</h2>

  <input type="checkbox" value="篮球" v-model="hobbits">篮球
  <input type="checkbox" value="羽毛球" v-model="hobbits">羽毛球
  <h2>选中{{hobbits}}</h2>
</div>


const app = new Vue({
  el:"#app",
  data:{
    message:"你好啊",
    sex:"男",
    isCheck:false,//单选
    hobbits:[],//多选
  }
})

05-(掌握)v-model结合select类型使用P49 - 00:14

<!--下拉单选-->
<select v-model="fruit">
  <option value="香蕉">香蕉</option>
  <option value="苹果">苹果</option>
  <option value="橘子">橘子</option>
  <option value="黄瓜">黄瓜</option>
  <option value="榴莲">榴莲</option>
</select>
<h2>你选择的水果是：{{fruit}}</h2>
<!--下拉多选 -->
<select v-model="fruits" multiple>
  <option value="香蕉">香蕉</option>
  <option value="苹果">苹果</option>
  <option value="橘子">橘子</option>
  <option value="黄瓜">黄瓜</option>
  <option value="榴莲">榴莲</option>
</select>
<h2>你选择的水果是：{{fruits}}</h2>
const app = new Vue({
  el:"#app",
  data:{
  
    fruit:"默认",
    fruits:[]
  }
})

06-(掌握)input中的值绑定P50 - 00:04

<!--input中值绑定-->
<label v-for="item in users" :for="item">
  <input type="checkbox" :value="item" :id="item">{{item}}
</label>

users:["张三","李四","王麻子","隔壁老王"]

07-(掌握)v-model修饰符的使用P51 - 00:50



<!--修饰符-->
<input type="text" v-model.lazy="message"><!--//lazy失去焦点响应或者回车-->
<h2>输入的是：{{message}}</h2>

<input type="text" v-model.number="message"><!--//number 将输入框自动转换为数字类型，我们默认的是字符串-->
<h2>输入的是：{{message}} {{typeof message}}</h2>

<input type="text" v-model.trim="message"><!--//trim 去除左右两边的空格-->
<h2>输入的是：{{message}}</h2>