0402_ Vue_D3：计算、监听、if-else

Amor_1998

已于 2022-04-03 13:15:06 修改

阅读量520

点赞数

分类专栏：学习日志文章标签： vue.js

于 2022-04-03 12:57:59 首次发布

本文链接：https://blog.csdn.net/Amor_1998/article/details/123909149

版权

学习日志专栏收录该内容

10 篇文章 0 订阅

订阅专栏

computed计算属性

1定义：要用的属性不存在，需要通过已有属性计算得来
2原理：底层借助了Objcet.defineproperty()方法提供的getter和setter
3get函数什么时候执行？
a初次读取时会执行一次
b当依赖的数据发生改变时会被再次调用
4优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5备注
a计算属性最终会出现在vm上，直接读取使用即可
b如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
c如果计算属性确定不考虑修改，可以使用计算属性的简写形式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue -->
		<script type="text/javascript" src="../js/vue.js">
			<!-- 3
			computed计算属性
			1
			定义： 要用的属性不存在， 需要通过已有属性计算得来
			2
			原理： 底层借助了Objcet.defineproperty() 方法提供的getter和setter
			3
			get函数什么时候执行？
			a
			初次读取时会执行一次
			b
			当依赖的数据发生改变时会被再次调用
			4
			优势： 与methods实现相比， 内部有缓存机制（ 复用）， 效率更高， 调试方便
			5
			备注
			a
			计算属性最终会出现在vm上， 直接读取使用即可
			b
			如果计算属性要被修改， 那必须写set函数去响应修改， 且set中要引起计算时依赖的数据发生改变
			c
			如果计算属性确定不考虑修改， 可以使用计算属性的简写形式 -->
		</script>
	</head>
	<body>
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br />
			名：<input type="text" v-model="lastName"> <br />
			全名：<span>{{fullName}}</span>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false;
		const vm = new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三'
			},
			// 计算属性不能直接调用，不是你写什么就是什么，而是先拿get的返回值，放到vm身上，然后名字是fullName
			computed: {
				fullName: {
					//get有什么作用？当有人读取fullName时，get被调用，且返回值就作为fullName的值
					//get 什么时候调用？1、初次读取fullName时 2、所依赖的数据发生变化时
					get() {
						console.log('get被调用了')
						console.log(this)
						return this.firstName + '-' + this.lastName
					},
					// set 什么时候调用？当fullName的值被修改时
					set(value) {
						console.log('set', value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}

			}

		})
	</script>
</html>

computed计算属性简写形式

只有“只读取，不修改”的时候，才能用简写形式，用get

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue -->
		<script type="text/javascript" src="../js/vue.js">
		 
		</script>
	</head>
	<body>
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br />
			名：<input type="text" v-model="lastName"> <br />
			全名：<span>{{fullName}}</span>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false;
		const vm = new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三'
			},
			computed: {


			       //	---完整写法---------
				// fullName: {
                //     get(){
				// 		console.log('get被调用了')
				// 		console.log(this)
				// 		return this.firstName + '-' + this.lastName
				// 	},
				 
				//}

				// --------简写---------
			  	    fullName () {
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					} 
				 
				 
			}

		})
	</script>
</html>

vm.fullName的属性的值，是这个函数调用的结果

1.10监视属性

1.10.1. 侦听/监视属性基本用法
watch监视属性
1当被监视的属性变化时，回调函数自动调用，进行相关操作
2监视的属性必须存在，才能进行监视，既可以监视data，也可以监视计算属性
3配置项属性immediate:false，改为 true，则初始化时调用一次 handler(newValue,oldValue)
4监视有两种写法
a创建Vue时传入watch: {}配置
b通过vm.$watch()监视

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue -->
		<script type="text/javascript" src="../js/vue.js">
			
		</script>
	</head>
	<body>
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<!-- 绑定事件的时候，@xxx='yyy'  yyy可以写一些简单语句，但多语句时不推荐 -->
			<!-- <button @click="isHot=!isHot ; x++" >切换天气</button> -->
			
			<button @click="changeWeather" >切换天气</button>
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip=false;
	 new Vue({
		 el:'#root',
		 data:{
			 isHot:true,
			 x:1
		 },
		 computed:{
			 info(){
				 return this.isHot?'hot':'cold'
			 }
		 },
		methods:{
				changeWeather(){
					this.isHot=!this.isHot
					this.x++
				}
		} ,
	 })
	 
	</script>
</html>

1.10.1. 侦听属性基本用法

watch监视属性
1当被监视的属性变化时，回调函数自动调用，进行相关操作
2监视的属性必须存在，才能进行监视，既可以监视data，也可以监视计算属性
3配置项属性immediate:false，改为 true，则初始化时调用一次 handler(newValue,oldValue)
4监视有两种写法
a创建Vue时传入watch: {}配置
b通过vm.$watch()监视

<title>天气案例_监视属性</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <h2>今天天气很{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
  <hr >
  <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">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
	  numbers:{
		  a:1,
		  b:1
		  
	  }
    },
    computed: {
      info() {
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot
      }
    },
    
    watch:{		
			isHot:{
				
		//		immediate:true,
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				
				
				}
			}
		// 监视多级结构中某个属性的变化
			// 'numbers.a':{    //对象里的key的完整写法是字符串，要加‘’
			// 	handler(){
			// 		console.log('a被改变了')
			// 	}
		 // 		}
		 },
		 
		 // // 监视多级结构中所有属性的变化
		 numbers:{
			 deep:true, //深度监视开启
			 handler(){
				 console.log('a被改变了')
				 
		 }}
  })
 
</script>

1.10.2. 深度侦听
1Vue中的watch默认不监测对象内部值的改变（一层）
2在watch中配置deep:true可以监测对象内部值的改变（多层）
注意
1Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
2使用watch时根据监视数据的具体结构，决定是否采用深度监视

1.10.4. 计算属性 VS 侦听属性

computed和watch之间的区别
●computed能完成的功能，watch都可以完成
●watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作
两个重要的小原则
●所有被Vue管理的函数，最好写成普通函数，这样 this 的指向才是vm或组件实例对象
●所有不被Vue所管理的函数（定时器的回调函数、ajax 的回调函数等、Promise 的回调函数），最好写成箭头函数，这样 this 的指向才是vm或组件实例对象

定时器setTimeout是js帮你调用的，所以不是vue管理的函数，写成箭头函数

箭头函数和普通函数

箭头函数 - 廖雪峰的官方网站

1、箭头函数没有它自己的this值，箭头函数的this值继承自外围作用域

2、所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：

1.11. 绑定样式

class样式
●写法：:class="xxx"，xxx 可以是字符串、数组、对象
●:style="[a,b]"其中a、b是样式对象
●:style="{fontSize: xxx}"其中 xxx 是动态值
○字符串写法适用于：类名不确定，要动态获取
○数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
○对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js"></script>
		
		<style>
		  .basic {width: 300px;height: 50px;border: 1px solid black;}
		  .happy {border: 3px solid red;background-color: rgba(255, 255, 0, 0.644);
		    background: linear-gradient(30deg, yellow, pink, orange, yellow);}
		  .sad {border: 4px dashed rgb(2, 197, 2);background-color: skyblue;}
		  .normal {background-color: #bfa;}
		  .atguigu1 {background-color: yellowgreen;}
		  .atguigu2 {font-size: 20px;text-shadow: 2px 2px 10px red;}
		  .atguigu3 {border-radius: 20px;}
		</style>
		
		<div id="root">
     	   <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
		  <div class="basic" :class="aa" @click="changeMood">{{name}}</div><br/><br/>
		
		<!--    绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
		  <div class="basic" :class="classArr" >{{name}}</div><br/><br/>
		
		  <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
		  <div class="basic" :class="classObj" >{{name}}</div><br/><br/>		 
		 
		 <!-- 绑定style样式--对象写法 -->
		   <div class="basic" :style=" styleObj1" >{{name}}</div><br/><br/>			  
		 
		  <!-- 绑定style样式--数组写法 -->
		  <div class="basic" :style="[ styleObj1,styleObj2]" >{{name}}</div><br/><br/>			  
		
		</div>
		
		<script type="text/javascript">
		  Vue.config.productionTip = false
		
		  new Vue({
		    el: '#root',
		    data: {
		      name: '尚硅谷',
		      aa:'normal',
			  classArr:['atguigu1','atguigu2','atguigu3'],
			  classObj:{
				  atguigu1:false,
				  atguigu2:false
		      },
			  styleObj1:{
				  fontSize:'40px'
			  },
			  styleObj2:{
				  backgroundColor:'red'
			  }
		    },
		    methods: {
		      changeMood() {
				  this.aa=' happy'
		         const arr = ['happy', 'sad', 'normal']
		        const x=  Math.floor(Math.random() * 3)
		        this.aa = arr[x]
		       }
		    },
		  })
		</script>
	</head>
	<body>
	</body>
</html>

要写成一个对象

这里的东西不能瞎写，必须是事先定义好，或原先js、css里存在的，驼峰小写变大写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue -->
		<script type="text/javascript" src="../js/vue.js">
		
		</script>
	</head>
	<body>
		<div id="root">
			<h2>当前的n值是{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- 使用v-show做条件渲染 -->
		<!-- 	<h1 v-show="true">欢迎你{{name}}</h1>
			<h1 v-show="1===3">欢迎你{{name}}</h1> -->
		
		<!-- 使用v-if做条件渲染 -->
		<!-- 	<h1 v-if="false">欢迎你{{name}}</h1>
			<h1 v-if="1===3">欢迎你{{name}}</h1> --> 
		
		<!-- v-else和v-else-if- -->
<!-- 		<div v-if="n===1">1</div>
		<div v-else-if="n===2">2</div>
		<div v-else-if="n===3">3</div>
		<div v-else> haha</div> -->
		
		<!-- v-if和template的配合使用-->
		<template v-if="n===1">
		 <h2>你好</h2>
		 <h2>你好2</h2>
		 <h2>你好3</h2>
		</template>
 
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip=false;
	   new Vue({
		   el:'#root',
		   data:{
			   name:'小张',
			   n:0
		   },
		   
	   })
	 
	</script>
</html>

列表渲染

Amor_1998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0402_ Vue_D3：计算、监听、if-else

computed计算属性1定义：要用的属性不存在，需要通过已有属性计算得来2原理：底层借助了Objcet.defineproperty()方法提供的getter和setter3get函数什么时候执行？a初次读取时会执行一次b当依赖的数据发生改变时会被再次调用4优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便5备注a计算属性最终会出现在vm上，直接读取使用即可b如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变c如果.
复制链接

扫一扫