Vue-Day03（2021-08-21）

1.计算属性computed

• 用于计算并返回当前属性的值，在初始化显示和相关数据发生变化时执行；
• 计算属性中方法的返回值作为属性值；
• 回调函数get()(默认函数)
  当需要读取当前属性值时回调，根据 相关的数据 计算并返回当前属性的值；
• 回调函数set(value)
  监视当前属性值变化，当属性值发生改变时回调，更新相关的属性数据；
• 回调函数三要素
  1.你定义的；2.你没有掉；3.但最终它执行了；
• 计算属性存在缓存，多次读取只执行一次getter（属性的get方法）计算；

<div id="app">
	姓：<input type="text" placeholder="First Name" v-model="fname" /><br />
	名：<input type="text" placeholder="Last Name" v-model="lname" /><br />
	姓名1（单向）<input type="text" placeholder="Full Name1" v-model="fullname1" /><br />
	姓名2（双向）<input type="text" placeholder="Full Name2" v-model="fullname2"><br />
</div>

const vm = new Vue({
	el: "#app",
	data: {
		fname: "wang",
		lname: "yidi"
	},
	computed: {
		fullname1() { //计算属性中的一个方法，方法的返回值作为属性值
		//fullname1: function() { 的缩写形式
			return this.fname + ' ' + this.lname;
		},
		fullname2: {
			//get回调函数 当需要读取当前属性值时回调，根据相关的数据 计算并返回当前属性的值
			get() {
				return this.fname + ' ' + this.lname
			},
			//set回调函数 监视当前属性值变化，当属性值发生改变时回调，更新相关的属性数据
			set(value) {
				const names = value.split(" ")
				this.fname = names[0]
				this.lname = names[1]
			}
		}
	}
})

2.侦听watch

随时监听某一个数据的变化而做出实时响应
例子：用户名不超过6位

<div id="app">
	<input type="text" v-model="msg" />
</div>

new Vue({
	el:"#app",
	data:{
		msg:""
	},
	//侦听属性
	watch:{
		msg:function(){
			if(this.msg.length > 6){
					alert("用户名长度已经6位了")
				this.msg =  this.msg.substring(0,6)
			}
		}
	}
})

3.class和style的动态绑定

我们可以传给 v-bind:class 一个对象，以动态地切换 class

.blue{
	color: blue;
}
.pink{
	color: deeppink;
}
.cu{
	font-weight: 800
}
.xi{
	font-weight: 100
}
.big{
	font-size: 50px;
}
.small{
	font-size: 14px;
}

• 使用字符串绑定
  多个class用空格分开同时作用

<div id="app">
	<p :class="str">使用字符串绑定</p>
</div>

new Vue({
	el:"#app",
	data:{
		str:"blue cu small",
	}
})

• 使用数组绑定

<div id="app">
	<p :class="[color,cuxi,daxiao]">使用数组绑定</p>
</div>

new Vue({
	el:"#app",
	data:{
		color:"pink",
		cuxi:"cu",
		daxiao:"big"
	}
})

• 使用对象绑定

<div id="app">
	<p :class="{cu:true,big:true}">使用对象形式绑定</p>
</div>

• 使用三元运算符绑定

<div id="app">
	<p :class="flag?color:cuxi">使用三元(目)运算符绑定</p>
</div>

new Vue({
	el:"#app",
	data:{
		flag:false
	}
})

4.数组的更新检测

4.1变更方法（改变数组本身）

• push(a,b,c)
  向数组末尾添加一个或多个元素，返回数组的新长度；
  (a，b，c是要添加进去的内容)
• unshift(a,b,c)
  向数组的首位添加一个或多个元素，返回数组的新长度；
• pop（）
  删除并返回数组的最后一个元素；
• shift（）
  删除并返回数组的第一个元素；
• splice（）
  参照js函数；

4.2非变更方法（不改变数组本身，返回一个新数组）

• filter()：过滤

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
/* 创建一个计算属性，来返回过滤或排序后的数组 */
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

• slice(start，end )
  返回一个新的数组，包含从 start（必须参数） 到 end （不包括该元素，非必须参数）的 arrayObject 中的元素；
• sort（）等等

5.事件修饰符

• .once
  按钮只能执行一次，一般用于注册的监听（防止垃圾数据进入数据库）

<div id="app">
	<button @click.once="run()">注册</button>
</div>

new Vue({
	el:"#app",
	methods:{
		run:function(){
			alert("正在注册")
		}
	}
})

• .stop
  用来组织冒泡事件的发生

<div @click="run2('a')">
	aaa
	<div @click="run2('b')">
		bbb
		<div @click.stop="run2('c')">
			ccc
		</div>
	</div>
</div>

new Vue({
	el:"#app",
	methods:{
		run2:function(x){
			alert(x);
		}
	}
})

• .prevent
  阻止元素发生默认行为

<form  @submit.prevent = run2('阻止')>
	姓名：<input type="text" />
	<input type="submit" value="提交"/>
</form>

new Vue({
	el:"#app",
	methods:{
		run2:function(x){
			alert(x);
		}
	}
})