Vue 语法-Vue 中涉及的 js 高阶函数？

🎉 遍历数组的高阶函数语法？

数组索引值的获取：

1
2
3
4

shownum(){
  for (let i in this.books){
    console.log(i) //获取索引值i
  }

数组元素的获取：

1
2
3
4

showitem(){
  for (let item of this.books){
    console.log(item) //获取数组元素item
  }

🎉 一般的编程范式？

编程范式：命令式编程/声明式编程

编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：数组）

🎉 高阶函数 filter？

filter 中的回调函数有一个要求：必须返回一个布尔值

true：当返回 true 时，函数内部会自动将这次回调的 n 加入到新的数组中

false：当返回 false 时，会默认过滤掉这次的 n

1
2
3

let newarr = filter(function (n) {
  return n < 100;
});

🎉 高阶函数 map？

对数组的所有元素进行一次变化处理可以采用 map 函数

1
2
3

let newarr2 = newarr.map(function (n) {
  return n * 2;
});

🎉 高阶函数 reduce？

对数组中所有元素进行汇总可以用 reduce

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let total = newarr2.reduce(function (preValue, n) {
  return 100;
}, 0);
//第一次：preValue 0 n 20
//第二次：preValue 100 n 40
//第三次：preValue 100 n 80
//第四次：preValue 100 n 100
let total = newarr2.reduce(function (preValue, n) {
  return preValue + n;
}, 0);
//第一次：preValue 0 n 20
//第二次：preValue 20 n 40
//第三次：preValue 60 n 80
//第四次：preValue 140 n 100
//最终返回 240

🎉 高阶函数嵌套？

一步式实现需求。

1
2
3

const nums = [10,20,30,40,50,60];
let total =
nums.filter(n => n<100).map(n => n*2).reduce((pre,n) => pre + n);

Vue 语法-Vue 中表单绑定 v-model？

🎉v-model 的使用和原理？

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

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

当我们在输入框输入内容时

因为 input 中的 v-model 绑定了 message，所以会实时将输入的内容传递给 message，message 发生改变。

当 message 发生改变时，因为上面我们使用 Mustache 语法，将 message 的值插入到 DOM 中，所以 DOM 会发生响应的改变。

所以，通过 v-model 实现了双向的绑定。

1
2
3
4
5

<div id="app">
 <input type="text" v-model="message">
 //改变input输入值，message的值也发生改变
  {{message}}
</div>

v-model 其实是个语法糖

它包含了 v-bind 指令用于绑定 value

同时通过监听 input 事件给当前元素绑定最新的 value

1
2
3
4
5
6

<input type="text" v-model="message">
<input
type="text"
:value="message"
@input="message = $event.target.value"
>

🎉v-model 结合 radio 类型？

1
2
3
4
5
6
7
8
9

<div id="app">
  <label for="male">
    <input type="radio" name="sex" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" name="sex" id="female" value="女" v-model="sex">女
  </label>
  <h2>{{sex}}</h2>
</div>

这里省略 name 也可以达到互斥的效果。

🎉v-model 结合 checkbox 类型？

单选框对应布尔值：

1
2
3
4
5
6
7
8
9

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

多选框对应数组：

1
2
3
4
5
6
7
8
9
10
11

<div id="app">
<input type="checkbox" id="agree" value="篮球"
v-model="hobby">篮球
<input type="checkbox" id="agree1" value="足球"
v-model="hobby">足球
<input type="checkbox" id="agree2"  value="羽毛球"
v-model="hobby">羽毛球
<input type="checkbox" id="agree3" value="排球"
v-model="hobby">排球
<h2>您的选择是：{{hobby}}</h2>
</div>

🎉v-model 结合 select 类型？

单选框对应字符串：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="app">
  <select v-model="noodles">
    <option v-for="item in food" :value="item" >{{item}}</option>
  </select>
  <h2>您选择的面是 {{noodles}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好！',
      food:["热干面","杂酱面","担担面","乌冬面"],
      noodles: "热干面"
    }
  })
</script>

多选框对应数组：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="app">
  <select v-model="noodles" multiple>
    <option v-for="item in food" :value="item" >{{item}}</option>
  </select>
  <h2>您选择的面是 {{noodles}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好！',
      food:["热干面","杂酱面","担担面","乌冬面"],
      noodles: []
    }
  })
</script>

🎉v-model 中的值绑定？

初看 Vue 官方值绑定的时候，我很疑惑：what the hell is that？

但是仔细阅读之后，发现很简单，就是动态的给 value 赋值而已：

我们前面的 value 中的值，可以回头去看一下，都是在定义 input 的时候直接给定的。

但是真实开发中，这些 input 的值可能是从网络获取或定义在 data 中的。

所以我们可以通过 v-bind:value 动态的给 value 绑定值。

这不就是 v-bind 吗？

这不就是 v-bind 在 input 中的应用吗？搞的我看了很久，搞不清他想讲什么。

这里不再给出对应的代码，因为会用 v-bind，就会值绑定的应用了。

Vue 语法-Vue 中 v-mode 的修饰符？

🎉lazy 修饰符？

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

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

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

1
2
3
4

<div id="app">
  <input v-model.lazy="message">
 <h2>{{message}}</h2>
</div>

🎉number 修饰符？

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

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

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

1
2
3
4

<div id="app">
  <input v-model.number="message">
 <h2>{{message}}</h2>
</div>

🎉trim 修饰符？

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

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

1
2
3
4

<div id="app">
  <input v-model.trim="message">
 <h2>{{message}}</h2>
</div>