第一章 Vue基础知识（2）

VUE学习系列

第一章 Vue基础知识一
第二章 Vue基础知识二

---

---

一、计算属性

1、基础使用

1、计算属性是通过已有属性计算得来。注意：计算属性和data属性都是变量，所以不能重名。
2、计算属性内部有缓存机制，与methods中函数实现相比，计算属性 效率更高。
3、如果计算属性要被修改（必须使用完整写法），那必须写set函数去响应修改，且set发生改变时，会引起计算时依赖的数据发生改变。

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	姓名1：<span>{{fullName_one}}</span> <br/><br/>
	姓名2：<span>{{fullName_two}}</span> <br/><br/>
</div>
<script type="text/javascript">
	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName:'三',
		},
		computed:{
			//完整写法
			fullName_one:{
				get(){
					return this.firstName + '-' + this.lastName
				},
				set(value){
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			},
			//简写
			fullName_two(){
				return this.firstName + '-' + this.lastName
			}
		}
	})
</script>

二、监视属性（侦听器）

1.基础使用

1、当被监视的属性变化时, 回调函数自动调用, 进行相关操作；这要求监视的属性必须存在，才能通过watch进行监视
2、监视属性有两种写法，一种是在vm中通过watch配置进行监视；一种是通过 vm.$watch 进行监听；
3、注意监视属性有两个配置项。immediate:true代表页面初始加载的时候就进行调用；deep:true代表深度监听

<div id="root">
  <p>
    请输入内容:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<script type="text/javascript">	
	const vm = new Vue({
		el:'#root',
		data:{
			question:'',// 问题
			answer:'',//答案
		},
		methods: {
			changeWeather(){
				this.isHot = !this.isHot
			}
		},
		/**第一种写法**/
		watch:{
		    // 如果 `question` 发生改变，这个函数就会运行
			question:{
				//immediate:true, //初始化时让handler调用一下
				//handler什么时候调用？当isHot发生改变时。
				handler(newValue,oldValue){
					console.log('question被修改了',newValue,oldValue)
					this.answer = 'Waiting for you to stop typing...' + newValue;
				}
			}
		} 
	})
	/**第二种写法**/
	vm.$watch('question',{
		handler(newValue,oldValue){
			console.log('question被修改了',newValue,oldValue)
			vm.answer = 'Waiting for you to stop typing...' + newValue;
		}
	})
</script>

2.监视属性简写

监视属性可以有两种写法；个人习惯使用正常写法。

<script type="text/javascript">
watch:{
	//正常写法
	username:{
		// immediate:true, //初始化时让handler调用一下
		// deep:true,//深度监视
		handler(newValue,oldValue){
			console.log('username被修改了',newValue,oldValue)
		}
	},
	//简写
	username(newValue,oldValue){
		console.log('username被修改了',newValue,oldValue)
	}
}
</script>

3.深度监视

配置deep：true，可以在 watch中实现深度监听

<div id="root">
	<h3>a的值是:{{numbers.a}}</h3>
	<button @click="numbers.a++">点a+1</button>
	<h3>b的值是:{{numbers.b}}</h3>
	<button @click="numbers.b++">点b+1</button>
</div>
<script type="text/javascript">
	const vm = new Vue({
		el:'#root',
		data:{
			isHot:true,
			numbers:{
				a:1,
				b:1,
			}
		},
		watch:{
			//监视多级结构中某一个属性的变化
			'numbers.a':{
				handler(){
					console.log('a被改变了')
				}
			} 
			//监视多级结构中所有属性的变化 注意使用深度监听
			//如果此处不写deep深度监听，则如果a或b发生改变后，不会去监听numbers
			numbers:{
				deep:true,	
				handler(){
					console.log('numbers改变了')
				}
			}
		}
	})
</script>

二、绑定样式

1、绑定class样式

写法:class=“xxx” xxx可以是字符串、对象、数组。

<style>
	.red{color:red;}
	.yellow{background-color:yellow;}
	.black{border:1px solid black;}
</style>
<div id="root">
	<!-- 绑定class样式：字符串写法， 将红色样式绑定到当前div元素上 -->
	<div class="basic" :class="red" >颜色</div> <br/><br/>
	
	<!-- 绑定class样式：数组写法，适用于：要绑定的样式个数不确定、名字也不确定；
	     将多个样式绑定到div中，后续可以操作classArr对象增加class或删除class。 -->
	<div class="basic" :class="classArr">颜色</div> <br/><br/>
	
	<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用
		 将多个样式以对象的方式绑定到div上，可以通过操作对象元素为true或false,更改是否将class加到div中 -->
	<div class="basic" :class="classObj">颜色</div> <br/><br/>
</div>
const vm = new Vue({
	el:'#root',
	data:{
		red:'red',
		classArr:['red','yellow','black'],
		classObj:{
			red:false,
			yellow:false,
		},
	},
})

2、绑定style(个人不建议使用)

:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[baseStyles,overridingStyles]"其中baseStyles、overridingStyles是样式对象。

<div id="root">
	<!-- 绑定style样式--对象写法 -->
	<div class="basic" :style="styleObj">颜色</div>
	<div :style="{ color: styleObj.color, fontSize: styleObj.fontSize2 + 'px' }">实例</div>
	
	<!-- 绑定style样式--数组写法 -->
	<div class="basic" :style="[baseStyles,overridingStyles]">{{name}}</div>
</div>
<script type="text/javascript">
	const vm = new Vue({
		el:'#root',
		data:{
			styleObj:{
				fontSize: '40px',
				fontSize2: '40',
				color:'red',
			},
			baseStyles : {
				fontSize: '40px',
				color:'blue',
			},
			overridingStyles : {
				backgroundColor:'gray'
			}
		},
	})
</script>

---

总结