Vue学习笔记(4)--响应式数组、JavaScript高阶函数、v-model双向绑定

一、响应式数组

btnClick() {
			//1、push()在数组结尾加上数据
			this.name.push('aa', 'bb','cc');
						
			//2、pop()删除数组的最后一个元素
			this.name.pop();
						
			//3、shift()删除数组中的第一个元素
			this.name.shift();
						
			//4、unshift()在数组最前面添加元素
			this.name.unshift();
						
			//5、splice(从哪个位置开始，要删除几个，‘要添加替换的元素’)
			//若为输入第二个参数数则删除后面所有元素
			//若要插入元素时，就输入第二个参数为0，后面跟上要加上的数字
			this.name.splice(1, 2, 'a', 'b'); 
						
			//6、reverse()将数组内容反转
			this.name.reverse()
}
					

二、JavaScript高阶函数

关于for循环

1、普通for循环

let total = 0,
for(let i = 0; i < this.books.length; i++){
	total += this.books[i].price * this.books[i].count
}
return total

2、for(let i in this.books)

let total = 0,
for(let i in this.books){
	total += this.books[i].price * this.books[i].count
}
return total

3、for(let item of this.books)

let total = 0,
for(let item of this.books){
	total += item.price * item.count
}
return total

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

filter

• 对数组进行筛选

• filter中回调函数有一个要求：必须返回boolean

• 返回true时，函数内部会自动将这次回调的n加入数组

• 返回false时，函数内部会过滤掉这次n

let nums = [10,11,13,44,135,324,555]
let newNums = nums.filter(function(n){
	return false
})

map

• 对数组统一操作

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

reduce

• 对数组中所有内容进行汇总

let new2Nums = [20, 10, 50, 20]
let total = new2Nums.reduce(function(preValue, n){
	return preValue + n
}, 0) 
          
//进行四次遍历
	//第一次：preValue: 0， n：20
	//第二次：preValue: 20， n：10
	//第三次：preValue: 30， n：50
	//第四次：preValue: 80， n：20

再简单一些完成上述操作

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

或者使用指向函数

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

三、v-model双向绑定

原理：实现表单元素和数据的双向绑定

<input type="text" v-model="message"/>

//message: 'hhh',

v-model相当于：

• v-bind绑定一个value元素
• v-on指令给当前元素绑定input事件

radio

			<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>

chexbox

单选：大多用在那种同意协议注册那种

			<label for="">
				<input type="checkbox" id="agree" v-model="isAgree"/>同意
			</label>
			
			<h2>你选择的是：{{isAgree}}</h2>
			<button type="button" :disabled="!isAgree">next</button>

多选：

			<input type="checkbox" value="1" v-model="count"/>1
			<input type="checkbox" value="2" v-model="count"/>2
			<input type="checkbox" value="3" v-model="count"/>3
			<h2>{{count}}</h2>

			count: [],

正常使用时

			<label v-for="item in books">
				<input type="checkbox" :value="item" v-model="count"/>{{item}}
			</label>

			//count: [],
			//books: ['x','y','z'],

v-model修饰符

• lazy修饰符

  • 默认情况下，v-model默认时在input事件中同步输入数据。一旦发生数据改变data中的数据就会自动改变
  • lazy修饰符可以让数据在失去焦点或者回车的时候才会更新

• number修饰符

  • 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当作字符串类型进行处理
  • 有时希望可以处理的是数字的时候就可以通过number修饰符将输入框中输入的内容自动转成数字类型

• trim修饰符

  • 如果输入的内容首位有很多空格，可以通过trim修饰符过滤内容左右两边的空格

主要参考这个教学视频学习：https://www.bilibili.com/video/BV15741177Eh?p=1