Vue.js学习笔记（第三弹）

2020.5.6，开始学习第三章的内容，加油ヾ(◍°∇°◍)ﾉﾞ

1.JavaScript高阶函数的使用

1.eg：之前用for处理循环的例子

（1）普通的for循环

computed:{
	    totalPrice(){
		//1.普通的for循环
		let totalPrice = 0;
		for(let i=0;i<this.books.length;i++)
		{
			totalPrice += this.books[i].price*this.books[i].count;
		}
		return totalPrice;
	    }
	}

（2）for(let i in this.books)

	computed:{
		totalPrice(){
			//2 for(let i in this.books)
			let totalPrice = 0;
			for(let i in this.books)
			{
				totalPrice += this.books[i].price*this.books[i].count;
			}
			return totalPrice;
		}
	}

（3）for(let i of this.books)

	computed:{
		totalPrice(){
			// 3 for(let i of this.books)
			let totalPrice = 0;
			for(let i of this.books)
			{
				totalPrice+= i.price * i.count;
			}
			return totalPrice;
		}
	}

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

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

2.计算小练习（和下面的高阶函数对比）

const nums = [10,20,111,69,444,40,50];
//1.需求：取出所有小于100的数字
let numOne=[];
for(let i of nums)
{
	if(i<100)
	{
		numOne.push(i);
	}
}
//2.将所有小于100的数字进行转化：全部*2
let numTwo = [];
for(let n of numOne)
{
	numTwo.push(n*2);
}
//3.需求：将第二步所有的数字相加，得到最终的结果
let numThree = 0;
for(let g of numTwo)
{
	numThree += g;
}

3.3个高阶函数（filter/map/reduce）

（1）普通写法

//filter中的回调函数有一个要求：必须返回一个boolean值
//true：当返回true时，函数内部会自动将这次回调的n加入新的数组中
//false：当返回false时，函数内部会过滤掉这次的n
//1.filter函数的使用
//10,20,69,40,50
const nums = [10,20,111,69,444,40,50];
let numOne = nums.filter(function(n){//返回true把n加入数组,返回false跳过
	return n<100;
})
//2.map函数的使用
//20,40,138,80,100
let numTwo = numOne.map(function(n){
	return n*2;
})
//3.reduce函数的使用
//reduce作用：对数组中所有的内容进行汇总
let numThree = numTwo.reduce(function(preValue,n){//preValue：上次返回的值
	return preValue+n;
},0)//0是初始值
// preValue 0 n 20
// preValue 20 n 40
// preValue 60 n 138
// preValue 198 n 80
// preValue 278 n 100
// preValue 378 n 
// 378

（2）函数式编程（链式编程）（套娃）

const nums = [10,20,111,69,444,40,50];
let total = nums.filter(function(n){
	return n<100;
}).map(function(n){return n*2;
}).reduce(function(preV,n){
	return n + preV;
},0)

（3）箭头函数

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

2.v-model的使用和原理

数据双向绑定三种方法

（1）v-model

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

（2）<input type="text" :value="message" @input="change"/>

<input type="text" :value="message" @input="change"/>
methods:{
	    change(event){
	    this.message = event.target.value;
	}
},

（3）<input type="text" :value="message" @input="message = $event.target.value"/>

<input type="text" :value="message" @input="message = $event.target.value"/>
{{message}}

3.v-model结合radio类型使用

<div id="app">
	<label for="male">
		<input id="male" type="radio" value="boy" v-model="sex">boy
	</label>
	<label for="fmale">
		<input id="fmale" type="radio" value="girl" v-model="sex">girl
	</label>
	您选择的是{{sex}}
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			sex :'boy'
		},
		methods:{
		},
		computed:{}
	})
</script>

4.v-model结合checkbox类型使用

（1）.checkbox单选框

<div id="app">
	<!--1.checkbox单选框-->
	<input type="checkbox" v-model="dan"/>我愿意
	{{dan}}
	<button :disabled="!dan">继续</button> 
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			dan:false
		},
		methods:{

		},
		computed:{}
	})
</script>

（2）checkbox复选框

<div id="app">
	<!--2.checkbox复选框-->
	<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">铅球
	我的爱好是{{hobbies}}
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			hobbies:[]
		},
		methods:{

		},
		computed:{}
	})
</script>

5.v-model结合select类型使用

（1）选择一个

<div id="app">
	<!--选择一个-->
	<select v-model="fruit">
		<option value="香蕉">香蕉</option>
		<option value="菠萝">菠萝</option>
		<option value="苹果">苹果</option>
		<option value="橙">橙</option>
	</select>
	你喜欢的水果是{{fruit}}
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			fruit:'苹果',
		},
		methods:{

		},
		computed:{}
	})
</script>

（2）选择多个

<div id="app">
	<!--选择多个-->
	<select v-model="fruits" multiple><!--multiple选择多个,不是点选,是多选（Ctrl/shift选择）-->
		<option value="香蕉">香蕉</option>
		<option value="菠萝">菠萝</option>
		<option value="苹果">苹果</option>
		<option value="橙">橙</option>
	</select>
	你喜欢的水果是{{fruits}}
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			fruits:[],
		}
	})
</script>

6.input中的值绑定

<div id="app">
	<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">铅球
	我的爱好是{{hobbies}}
	<label v-for="item in hobbiesList" :for="item">
		<input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
	</label>
	我的爱好是{{hobbies}}
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			hobbies:[],
			hobbiesList:['篮球','羽毛球','铅球','乒乓球']
		},
		methods:{

		},
		computed:{}
	})
</script>

v-bind指令用于给html标签设置属性。

7.v-model修饰符的使用

1.修饰符：laz（失去焦点或回车才会更新）

<div id="app">
	<!--1.修饰符：laz（失去焦点或回车才会更新）-->
	<input type="text" v-model.lazy="message">
	<h2>{{message}}</h2>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			message:'荷塘月色',
		},
		methods:{

		},
		computed:{}
	})
</script>

2.修饰符：number（将数字的类型转为number）

<div id="app">
	<!--2.修饰符：number（将数字的类型转为number）-->
	<input type="text" v-model.number="age">
	<h2>{{age}} {{typeof age}}</h2>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			age:0,
		},
	})
</script>

3.修饰符：trim去除首尾空格

<div id="app">
	<!--3.修饰符：trim去除首尾空格-->
	<input type="text" v-model.trim="name">
	<h2>{{name}}</h2>
</div>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			name:'',
		},
	})
</script>

8.组件化的实现和使用步骤

数据结构：数组/栈/堆/链表/树结构

组件化：将整体拆分为若干个组件

组件使用分为三个步骤

（1）创建组件构造器（Vue.extend()）

（2）注册组件（Vue.component()）

（3）使用组件

9.组件化的基本使用过程

<div id="app">
	<!--3.使用组件-->
	<my-lyf></my-lyf>
	<my-lyf></my-lyf>
	<my-lyf></my-lyf>
	<my-lyf></my-lyf>
	<my-lyf></my-lyf>
	<my-lyf></my-lyf>
</div>
<script>
	//1.创建组件构造对象
	const cpnC = Vue.extend({//esc下的`符号
		template:
			`<div>
				<h2>LAH</h2>
				<p>LYF</p>
				<p>HG</p>
			</div>`
	})
	//2.注册组件
	Vue.component("my-lyf",cpnC)
			
	const app = new Vue({
		el:'#app',
		data:{
		},
		methods:{

		},
		computed:{}
	})
</script>

10.全局组件和局部组件

<div id="app">
	<cpn></cpn>
	<cpn></cpn>
	<cpn></cpn>
</div>
<script>
	//1.组件构造器
	const cpnC =Vue.extend({
		template:`
			<h2>无所谓</h2>
			<h2>哈哈</h2>
		`
	})
	//2.注册组件（全局组件，意味着可以在多个Vue下的实例下面使用）
	// Vue.component('cpn',cpnC);
	const app = new Vue({
		el:'#app',
		data:{

		},
		components:{//局部组件（在局部注册）
			cpn:cpnC
		}
	})
</script>

11.父组件和子组件的区分（套娃）

vue模板只能有一个根对象

所以你想要出现正常的效果，你的用一个div来或是别的标签来包裹全部的元素

<div id="app">
	<cpn2></cpn2>
</div>
<script>
	//1.创建第一个组件构造器（子组件）
	const Cpn1 = Vue.extend({
		template:`
			<h2>我是One</h2>
		`
	})

	//2.创建第二个组件构造器（父组件）
	const Cpn2 = Vue.extend({
		template:`
			<div>//要用div包裹里面的组件和元素
				<cpn1></cpn1>
				<h2>我是Two</h2>
			</div>
		`,
		components:{
			cpn1:Cpn1
		}
	})
	const app = new Vue({（根组件（爷组件））
		el:'#app',
		data:{
		},
		methods:{

		},
		components:{
			cpn2:Cpn2
		}
	})
</script>

12.注册组件的语法糖写法

1.全局组件注册的语法糖

<div id="app">
	<cpn></cpn>
</div>
<script>
	//1.全局组件注册的语法糖
	//1.创建组件构造器
	// const Cpn = Vue.extend();
	Vue.component('cpn',
	{
		template:`
		    <div>AA</div>
		`
	})
	const app = new Vue({
		el:'#app',
		data:{

		},
		methods:{

		},
	})
</script>

2.局部组件语法糖

<div id="app">
	<cpn></cpn>
</div>
<script>
	const app = new Vue({
		el:'#app',
		components：{//局部组件语法糖
			cpn:{
				template:`
				    <div>AA</div>
				`
			}
		}
	})
</script>

13.组件模板抽离的写法

1.script标签，注意:类型必须是text/x-template

<body>
<div id="app">
	<cpn></cpn>
</div>
<!--1.script标签，注意:类型必须是text/x-template-->
<script type="text/x-template" id="cpn1">
	<div>
		<h2>WALYF</h2>
	</div>
</script>
<script>
	//1.注册一个全局组件
	Vue.component('cpn',{
		template:'#cpn1'
	})
	const app = new Vue({
		el:'#app',
	})
</script>
</body>

2.template标签

<body>
    <div id="app">
	<cpn></cpn>
    </div>
<!--2.template标签-->
<template id="cpn1">
	<div>
		<div>{{love}}</div>
		<h2>WALYF</h2>
	</div>
</template>
<script>
	//1.注册一个全局组件
	Vue.component('cpn',{
		template:'#cpn1',
		data(){
			return {
				love:'Hg'
			}
		}
	})
	const app = new Vue({
		el:'#app',
	})
</script>
</body>

14.为什么组件data必须是函数

1.地址是分开了

<script>
function abc(){
	return{
		name:'why',
		age:18
	}
}
let obj1 =abc();
let obj2 =abc();
let obj3 =abc();
obj1.name = "aaa";
console.log(obj1);
console.log(obj2);
console.log(obj3);
</script>

2.指向同一地址

<script>
	const obj ={
		age:18,
		name:'aaa'
	}
	function abc(){
		return obj
	}
	let obj1 = abc();
	let obj2 = abc();
	let obj3 = abc();
	obj1.name = "aaa";
	console.log(obj1);
	console.log(obj2);
	console.log(obj3);
</script>

组件被复用多次，但每个复用的地方组件内的数据相互不受影响，它们各自维护各自内部的数据。

总结：组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

详细讲解：vue中组件的data为什么是一个函数

15.父子组件通信-父传子props

1.大组件请求data数据再传给子组件

<div id="app">
	<cpn1 :cmessage="message" :cmoves="moves"></cpn1>
</div>
<template id="cpn"> 
<div><!--子组件中包含多个元素，必须在外侧有根元素（div）-->
	<h2>who is me?</h2>
	<h1>{{cmessage}}</h1>
	<h1>{{cmoves}}</h1>
</div>
</template>
<script>
	const cpn1 = {
		template:'#cpn',
		props:['cmessage','cmoves'],
		data(){
			return{}
		}
	}
	const app = new Vue({
		el:'#app',
		data:{
			message:'你好啊',
			moves:['情深深雨蒙蒙','花非花雾非雾','还珠格格']
		},
		components:{
			cpn1
		}
	})
</script>

propos几种写法

（1）类型限制（提供一些默认值）

props:{
	cmessage:String,
	cmoves:Array,
},

（2）<cpn>没有传值，读默认值  required:true（必须传值，不传报错）

props:{
	cmessage:{
		type:String,
		default:'lyffff',
		required:true
	}
}

（3）类型是对象或者数组，默认值必须是一个函数

props:{
	cmoves:{
		type:Array,
		default(){
		return [];
		}
	}
}

eg:ALL

<body>
<div id="app">
	<cpn1 :cmessage="message" :cmoves="moves"></cpn1>
</div>
<template id="cpn"> 
<div><!--子组件中包含多个元素，必须在外侧有根元素（div）-->
	<h2>who is me?</h2>
	<h1>{{cmessage}}</h1>
	<ul>
		<li v-for="item in cmoves">{{item}}</li>
	</ul>
</div>
</template>
<script>
	const cpn1 = {
		template:'#cpn',
		// props:['cmessage','cmoves'],
		// 1.类型限制
		// props:{
		// 	cmessage:String,
		// 	cmoves:Array,
		// },
		// 2.提供一些默认值，以及必传值
		props:{
			cmessage:{
				type:String,
				default:'lyffff',
				required:true
			},
			cmoves:{
				type:Array,
				default(){
					return [];
				}
			}
		},
		data(){
			return{}
		}
	}
	const app = new Vue({
		el:'#app',
		data:{
			message:'你好啊',
			moves:['情深深雨蒙蒙','花非花雾非雾','还珠格格']
		},
		components:{
			cpn1
		}
	})
</script>

16.父子组件通信-props驼峰标识

1.驼峰写法换成中间斜杠

<cpn :c-Info="info" :c-Message="message"></cpn>

<body>
<div id="app">
	<!-- <cpn :cinfo="info"></cpn> -->
	<cpn :c-Info="info" :c-Message="message"></cpn><!--驼峰写法换成中间斜杠-->
</div>
<template id="cpn2">
	<div>
		<h2>{{cInfo}}</h2>
		<h1>{{cMessage}}</h1>
	</div>
</template>
<script>
const cpn = {
	template:'#cpn2',
	props:{
		cInfo:{
			type:Object,
			default(){
				return{}
			}
		},
		cMessage:{
			type:String,
			default:'AAA'
		}
	}
}
const app = new Vue({
	el:'#app',
	data:{
		info:{
			name:'why',
			age:18,
			height:1.88,
		},
		message:'BBBB'
	},
	components:{
		cpn
	}
})
</script>

17.父子组件通信-子传父(自定义事件)

<body>
<!--父组件模板-->
<div id="app">
	<cpn3 @item-click="cpnClick"></cpn3>
</div>
<!--子组件模板-->
<template id="cpn4">
<div>
	<button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<script>
	//1.子组件
	const cpn3 ={
		template:"#cpn4",
		data(){
			return{
				categories:[
					{id:1,name:'数码家电'},
					{id:2,name:'男装女装'},
					{id:3,name:'装饰橱柜'},
					{id:4,name:'衣服鞋袜'}
				]
			}
		},
		methods:{
			btnClick(item){
				//发射（父组件接收）
				this.$emit('item-click',item);
			}
		}
	}
	//2.父组件
	const app = new Vue({
		el:'#app',
		components:{
			cpn3
		},
		methods:{
			cpnClick(item){
				console.log('cpnClick',item);
			}
		}
	})
</script>
</body>

练习

<body>
<div id="app">
	<h5>点击:{{total}}</h5>
	<cpn @add-fun="add" @up-fun="add"></cpn>
</div>
<template id="cpn">
	<div>
		<button @click=add>+</button>
		<button @click=up :disabled=this.sum<1>-</button>
	</div>
</template>
<script>
	const cpn ={
		template:'#cpn',
		data(){
			return{
				sum:0,
			}
		},
		methods:{
			add(){
				this.sum++;
				this.$emit('add-fun',this.sum);
			},
			up(){
				this.sum--;
				this.$emit("up-fun",this.sum);
			}
		}
	}
	const app = new Vue({
		el:'#app',
		data:{
			total:0,
		},
		components:{
			cpn
		},
		methods:{
			add(sum){
				this.total=sum;
			}
		}
	})
</script>

18.项目演示

19.知识回顾

老师在回顾这三章的知识

本章目录

1.JavaScript高阶函数的使用

2.v-model的使用和原理

3.v-model结合radio类型使用

4.v-model结合checkbox类型使用

5.v-model结合select类型使用

6.input中的值绑定

7.v-model修饰符的使用

8.组件化的实现和使用步骤

9.组件化的基本使用过程

10.全局组件和局部组件

11.父组件和子组件的区分（套娃）

12.注册组件的语法糖写法

13.组件模板抽离的写法

14.为什么组件data必须是函数

15.父子组件通信-父传子props

16.父子组件通信-props驼峰标识

17.父子组件通信-子传父(自定义事件)

18.项目演示

19.知识回顾

---

5.6-5.12第三章学习完毕，每天都保持着学习，每天进步一点点，希望未来看到更努力的自己！感觉Vue越来越难了呢，加油！

ヾ(◍°∇°◍)ﾉﾞ