vue02 vue遍历、过滤器、监听器和组件

---

前言

---

本次我们来学习并简单运用vue中的遍历，过滤器、监听器和组件

vue遍历

<template>
<!-- 对象数组遍历 -->
<div id="box">
	<table cellspacing="0" cellpadding="0" border="1">
		<tr>
			<th>选择</th>
			<th>ID</th>
			<th>name</th>
			<th>age</th>
		</tr>
		<!-- 注意：v-for 是根据数组下标追踪的，如果你之前选择的是某一个元素，
		然后又往数组中添加元素，原先的元素数组下标可能会发生变化，这就会导致你选择的不是你原来选择的元素
		 这个时候我们会使用key来解决这个问题-->
		<tr v-for="person in persons" :key="person.id">
			<td><input type="checkbox" name="pid" value="person.id"></td>
			<td>{{person.id}}</td>
			<td>{{person.name}}</td>
			<td>{{person.age}}</td>
		</tr>
	</table>
	<div>
		<p><input type="text" name="pid" v-model="pname">name</p>
		<p><input type="text" name="pid" v-model="page">age</p>
		<p><button @click="addPerson">添加</button></p>
	</div>
	
	<!-- css样式的引用    true 表示应用  相反的 false表示不应用 -->
	<p :class="{yellow:true}">hhhhhh</p>
	<p :class="{yelloq:false}">wwwwww</p>
	<!-- style针对每个属性 -->
	<p :style="style">hhhhhh</p>
</div>
</template>
<script>
	
export default {
	data() {
		return{
			pid:"",
			pname:"",
			page:"",
			persons:[
				{id:1,name:"流大哥",age:34},
				{id:2,name:"里的",age:54},
				{id:3,name:"洋大大",age:14},
				{id:4,name:"风在天",age:24}
			],
			cls:"yellow",
			/* 引用多个选择器 */
			clss:["red","show","font-size"],
			style:{
				"color":"red",
				"font-size":"20px"
			}
		}
	},
	computed:{
		addDouble(){
			return this.page*20;
		},
		myDate(){
			return function(date){
				/* let year=date. */
			}
		}
	},
	methods:{
		addPerson(){
			/* 自动生成id */
			this.pid=this.persons[this.persons.length-1].id+1;
		let person={
			id:this.pid,
			name:this.pname,
			age:this.page
		}
		/* 在数组开头添加元素 */
		this.persons.unshift(person);
		}
	}
	 
	
	
}
</script>

<!-- 组件的css样式
 scoped表示这个样式只作用于当前组件-->
<style scoped>
  #box table{
	  width: 600px;
	  margin: 0px auto;
	  
  }
  .yellow{
	  color: yellow;
  }
 
</style>

vue属性

过滤器可以vue2中使用，但是由于vue3版本已经移除了过滤器，所以我们如果在vue3中使用过滤器，就会报错，那么，我们就没有办法使用过滤了吗?并不是的，我们可以使用vue3中的计算属性来间接实现过滤器的功能。

计算属性定义语法

//我们设置了名为sum的计算属性
computed:{
			sum(){
			return this.a+this.b;	
			},
		}

计算属性的简单使用

<template>
<div>
   <p>{{sum}}</p>
   <p>{{myDate(date)}}</p>
</div>
</template>

<script>
export default {
data() {
	return{
		a:2,
		b:4,
		date:new Date()
			}
		},

/* 计算属性，默认是只读的状态
   我们可以设置它可读可写
   计算属性具有缓存的特性：
   调用一次属性后，数据存入缓存，只要数据没有改变，当再次调用时，直接从缓存中获取数据
	优势： 带缓存
    计算属性对应函数执行后, 会把return值缓存起来
    依赖项不变, 多次调用都是从缓存取值
    依赖项值-变化, 函数会"自动"重新执行-并缓存新的值	 */
computed:{
		sum(){
		return this.a+this.b;	
		},
		/* 设置可读可写 */
		sun:{
		get(){
		return this.a+this.b;
			},
		set(value){
		return this.a+value;
				}
			},
		/* 实现对日期的过滤 */
		myDate(){
		return function(date){
		let year=date.getFullYear();
		let month=(date.getMonth()+1).toString().padStart(2,'0');
		let day=date.getDate().toString().padStart(2,'0');
		return year+"-"+month+"-"+day
			   }
			}
		}
}
</script>

<style>
</style>

vue监听器

监听器的作用是检测到属性值的变化情况

语法

watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    "被侦听的属性名" (newVal, oldVal){
        
    }
}

vue监听器的简单使用

<template>
	<div>
		<input type="text" name="val" v-model="val">
	  </div>
</template>
<script>
export default {
data() {
		return{
		a:2,
		b:4,
		val:""
		}
	},
	 watch:{
		   val(newVal,oldVal){
		   console.log("旧的值："+oldVal);
		   console.log("新的值："+newVal);
		   }
	   }
}
</script>

<style>
</style>

结果

vue组件（vue开发的重点）

vue组件采用封装的思想，把页面上可重复使用的部分封装成组件，达到方便项目开发的目的。
一个可以拆分为一个个组件，一个组件就是一个整体，每个组件有自己的结构（html）、样式（css）和行为（js）

在src/components目录下创建一个以.vue结尾的vue组件

<template>
<tr>
	<input type="text" name="count" v-model="count" @blur="change">
	<p style="display: inline-block;">{{name}}</p>
	<p :class="{show:bool}" >{{"卖光啦！"}}</p>
</tr>
</template>

<script>
export default{
	props:["name"],
	data() {
		return{
		count:0,
		bool:false
		}
	},
	methods:{
		change(){
			if(this.count===0){
				this.bool=false;
			}else{
				this.bool=true;
			}
		},
		getfarter(){
			this.$emit("getname",name)
		}
	}
}	
</script>

<style scoped>
.show{
	display: none;
}
</style>

在主组件APP.vue中引入刚刚创建并写好的组件，引入并注册后成为了主组件的子组件

<template>
/* 3、使用组件 */
<bay v-for="(obj,index) in arr" :key="index" name="obj[index]"></bay>
//双向绑定
<input type="text" name="val" v-model="val">
</template>

<script>
/* 1、引入组件 */
import bay from './components/bay.vue'; 
	export default {
	/* 2、注册组件 */
	components:{
			bay,
		},
	data(){
	return{
	val:"",
	arr:["arr1","arr2","arr3","arr4"]}}
	}
</script>

<style>
</style>

总结

本次我们学习了vue遍历、过滤器、监听器和vue组件，这些需要我们去经常练习，做到熟练，因为在vue开发中我们会经常用到这些知识点，能熟练运用这些知识点也能帮助我们更快更好的进行vue的开发。