Vue - 天气切换、深度监视、watch

最新推荐文章于 2024-03-31 09:31:00 发布
最新推荐文章于 2024-03-31 09:31:00 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： Vue 成长阶段 笔记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39123467/article/details/127300186
版权
笔记 同时被 3 个专栏收录
324 篇文章 9 订阅
订阅专栏
成长阶段
272 篇文章 4 订阅
订阅专栏
Vue
18 篇文章 0 订阅
订阅专栏

文章目录

天气案例

源码1

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script type="text/javascript" src="../js/vue.js"></script>
		<title>Document</title>
	</head>
	<body>
		<body>
			<div id="root">
				<h2>今天天气很{{info}}</h2>
				<button @click="changeWeather">切换天气</button>
			</div>
		</body>

		<script>
			Vue.config.productionTip = false

			new Vue({
				el: '#root',
				data: {
					isHot: true,
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽'
					},
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot
					},
				},
			})
		</script>
	</body>
</html>

源码2（简化）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script type="text/javascript" src="../js/vue.js"></script>
		<title>Document</title>
	</head>
	<body>
		<body>
			<div id="root">
				<h2>今天天气很{{info}}</h2>
				<button @click="isHot = !isHot">切换天气</button>
			</div>
		</body>

		<script>
			Vue.config.productionTip = false

			new Vue({
				el: '#root',
				data: {
					isHot: true,
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽'
					},
				},
			})
		</script>
	</body>
</html>

天气案例_监视属性

watch

明确监视对象的时候我们建议使用watch即可

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script type="text/javascript" src="../js/vue.js"></script>
		<title>Document</title>
	</head>
	<body>
		<body>
			<div id="root">
				<h2>今天天气很{{info}}</h2>
				<button @click="changeWeather">切换天气</button>
			</div>
		</body>

		<script>
			Vue.config.productionTip = false

			new Vue({
				el: '#root',
				data: {
					isHot: true,
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽'
					},
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot
					},
				},
				watch: {
					isHot: {
						immediate: true,
						//handler什么时候调用？当isHot发生改变时
						handler(newValue, oldValue) {
							console.log('isHot被修改了', newValue, oldValue)
						},
					},
				},
			})
		</script>
	</body>
</html>

vm.$watch

不明确监视对象时，我们使用vm.$watch

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script type="text/javascript" src="../js/vue.js"></script>
		<title>Document</title>
	</head>
	<body>
		<body>
			<div id="root">
				<h2>今天天气很{{info}}</h2>
				<button @click="changeWeather">切换天气</button>
			</div>
		</body>

		<script>
			Vue.config.productionTip = false

			const vm = new Vue({
				el: '#root',
				data: {
					isHot: true,
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽'
					},
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot
					},
				},
			})

			vm.$watch('isHot', {
				immediate: true,
				handler(newValue, oldValue) {
					console.log('isHot被修改了', newValue, oldValue)
				},
			})
		</script>
	</body>
</html>

讲师笔记

在这里插入图片描述

深度监视

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script type="text/javascript" src="../js/vue.js"></script>
		<title>Document</title>
	</head>
	<body>
		<body>
			<div id="root">
				<h2>今天天气很{{info}}</h2>
				<button @click="changeWeather">切换天气</button>
				<hr />
				<h3>a的值是：{{numbers.a}}</h3>
				<button @click="numbers.a++">点我让a+1</button>
				{{numbers.c.d.e}}
			</div>
		</body>

		<script>
			Vue.config.productionTip = false

			const vm = new Vue({
				el: '#root',
				data: {
					isHot: true,
					numbers: {
						a: 1,
						b: 1,
						c: {
							d: {
								e: 100,
							},
						},
					},
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽'
					},
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot
					},
				},
				watch: {
					isHot: {
						// immediate: true,
						//handler什么时候调用？当isHot发生改变时
						handler(newValue, oldValue) {
							console.log('isHot被修改了', newValue, oldValue)
						},
					},
					numbers: {
						handler() {
							console.log('a被改变了')
						},
					},
				},
			})
		</script>
	</body>
</html>

演示深度监视

在这里插入图片描述

讲师笔记

在这里插入图片描述

监视的简写形式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script type="text/javascript" src="../js/vue.js"></script>
		<title>Document</title>
	</head>
	<body>
		<body>
			<div id="root">
				<h2>今天天气很{{info}}</h2>
				<button @click="changeWeather">切换天气</button>
				<hr />
				<h3>a的值是：{{numbers.a}}</h3>
				<button @click="numbers.a++">点我让a+1</button>
				{{numbers.c.d.e}}
			</div>
		</body>

		<script>
			Vue.config.productionTip = false

			const vm = new Vue({
				el: '#root',
				data: {
					isHot: true,
					numbers: {
						a: 1,
						b: 1,
						c: {
							d: {
								e: 100,
							},
						},
					},
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽'
					},
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot
					},
				},
				watch: {
					//正常写法
					// isHot: {
					// 	// immediate: true,
					// 	//handler什么时候调用？当isHot发生改变时
					// 	handler(newValue, oldValue) {
					// 		console.log('isHot被修改了', newValue, oldValue)
					// 	},
					// },
					//简写
					// isHot(newValue, oldValue) {
					// 	console.log('isHot被修改了', newValue, oldValue)
					// },
				},
			})

			//正常写法
			// vm.$watch('isHot', {
			// 	immediate: true,
			// 	handler(newValue, oldValue) {
			// 		console.log('isHot被修改了', newValue, oldValue)
			// 	},
			// })

			vm.$watch('isHot', (newValue, oldValue) => {
				console.log('isHot被修改了', newValue, oldValue, this)
			})
		</script>
	</body>
</html>

watch对比computed

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script type="text/javascript" src="../js/vue.js"></script>
		<title>Document</title>
	</head>
	<body>
		<div id="root">
			姓: <input type="text" v-model="firstName" /> 名:
			<input type="text" v-model="lastName" /> 姓名:
			<span>{{fullName}}</span><br /><br />
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示

		const vm = new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三',
				fullName: '张-三',
			},

			watch: {
				firstName(val) {
					//注意这里的箭头函数
					setTimeout(() => {
						console.log(this)
						this.fullName = val + '-' + this.lastName
					}, 1000)
				},
				lastName(val) {
					this.fullName = this.firstName + '-' + val
				},
			},
		})
	</script>
</html>

讲师笔记

在这里插入图片描述

鬼鬼骑士
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
基于Vue开发的迷你实时天气预报组件 项目展示 基于Vue框架开发的一款迷你天气预报展示的小组件，目前只支持中国大陆的天气预报，原因在更新公告中有，有问题请提 :package: 安装 2021.04.24 因为刚上传到npm仓库没多久，可能其他镜像库还没有镜像过去，所以要下载只能切换npm源为官方源。 npm i vue-mini-weather --save // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <template> <v></v> </template> // 2. 局部引入 //a
vueweather一个基于elementui的简单天气演示
08-12
vue-weather 一个基于element-ui的简单天气演示
Web前端vueDemo—实现天气预报功能（四）
weixin_45118229的博客
07-21 3974
该案例是axios+vue实现的天气预报功能。
推荐开源项目：Vue-Weather —— 一款基于 Vue.js 的实时天气应用
最新发布
gitblog_00063的博客
03-31 704
推荐开源项目：Vue-Weather —— 一款基于 Vue.js 的实时天气应用 项目地址:https://gitcode.com/alanWongsGithub/vue-weather Vue-Weather 是一个轻巧且美观的开源项目，它利用 Vue.js 框架构建了一个实时展示天气信息的应用。该项目不仅提供了基础的天气查询功能，还展示了 Vue.js 在构建交互式前端应用时的强大能力。 技...
vue项目中可使用天气预报小组件推荐vue-mini-weather
deciduous_leaves的博客
05-16 1万+
该部分内容引自基于Vue开发的迷你实时天气预报组件 由于该组件在2021.4.24日刚上传到npm仓库，请用npm安装！ 1、安装 npm i vue-mini-weather --save 2、引入 // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <template> ......
Vue监视属性与深度监视
weixin_71181899的博客
07-14 422
1).Vue自身可以检测对象内部值的改变，但Vue提供的watch不可以。1.当被监视的属性变化时，回调函数自动调用，进行相关操作。(2).使用watch时根据数据具体结构，决定时候采用深度监视。（1）.newVue时传入watch配置。2.监视的属性必须存在，才能进行监视！（2）.通过vm.$watch监视。(1).Vue中的watch默认不检测对象内部值的改变(一层)(2).配置deeptrue可以监测对象内部值改变(多层)1.通过一个点击切换的案例来理解。...
在VUE中使用中国天气网插件
yun的博客
09-15 1900
第一步 在中国天气网根据自己的需要修改配置并生成代码 中国天气网：创建网页标准天气插件 第二步 html <div id="weather-v2-plugin-standard"></div> js mounted() { //天气插件配置 window.WIDGET = { CONFIG: { layout: 2, width: "386", height: "356", backgrou
vue中使用天气插件
qq_40390762的博客
06-16 4573
（不知为什莫中国天气网cha'jian） 壹： 插件网址：
vue中使用天气插件（和风天气）
热门推荐
qq_42453890的博客
03-03 2万+
1.进入中国天气网插件首页 中国天气网 选择适合项目的插件 2.自定义插件样式，登录后生成代码 <div id="weather-v2-plugin-simple"></div> <script> WIDGET = { CONFIG: { "modules": "02", "background": 5, "tmpColor": "4A4A4A", "tmpSize": 16, "cityColor": "4A4A4A",
Vue 完成 动态搜索天气预报
D77107的博客
05-03 1171
main 中开启全局总线。
好用的天气组件：vue3-mini-weather
G55331337547的博客
12-15 2345
在逛gitghub时发现一个非常好用的天气组件，可以实时呈现天气状况，可以应用到vue3项目中(gitHub中也有vue2版本的)，只需几行代码就可实现。
解决vue-router 切换tab标签关闭时缓存问题
10-15
主要介绍了解决vue-router 切换tab标签关闭时缓存问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
深度解读vue-resize的具体用法
10-15
主要介绍了vue-resize深度解读，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法，一般使用Window scrollTo() 方法实现，本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
Vue学习：监视属性-实现天气切换
weixin_47295886的博客
02-07 526
点击按钮。可以实现天气的直接切换。并且在控制台显示切换前后的天气。
使用Vue制作天气预报界面
qq_55299191的博客
06-15 2214
使用Axios请求数据，在页面中显示近七天的天气情况
VUE添加中天气网插件
qq_40104261的博客
10-21 1325
1.去天气网生成代码 https://cj.weather.com.cn/ 2.在vue页面引入js mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = 'js的地址'; document.body.appendChild(s); }, 3.拷贝配置到script根目录
【vue3+和风天气插件】城市实时天气
Emptyecho的博客
10-14 2718
使用vue3+和风天气插件，搜索城市获取实时天气
vue-core-video-player切换播放源
12-28
你可以使用vue-core-video-player组件来切换播放源。首先，确保你已经安装了vue-core-video-player。你可以使用npm或yarn来安装它。下面是两种安装方式的示例： 使用npm安装： ```shell npm install --save vue-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鬼鬼骑士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值