Vue学习（学习打卡Day16）

最新推荐文章于 2023-02-07 20:11:05 发布
最新推荐文章于 2023-02-07 20:11:05 发布
阅读量258 收藏 3
点赞数 6
分类专栏： Vue 文章标签： vue.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yi_chen_c/article/details/124599334
版权


📋 作者介绍：友友们好我是乱披风锤，大二学生党一枚
💖作者主页：乱披风锤的个人博客主页.跳转到个人简介
🔥我和友友们一样喜欢编辑，天天敲代码🤭，沉迷学习，日渐消瘦。很荣幸能向大家分享我的所学，和大家一起进步。如果文章有错误，欢迎在评论区指正。那么开始今天的学习吧！
🎉 支持我：点赞👍+收藏⭐️+留言📝

Vue学习（学习打卡Day16）

一、天气案例2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../初始vue/js/vue.js"></script>
	</head>
	<body>
		<!-- 
				监视属性watch：
					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
					2.监视的属性必须存在，才能进行监视！！
					3.监视的两种写法：
							(1).new Vue时传入watch配置
							(2).通过vm.$watch监视
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */
		})

		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>
</html>

二、天气案例深度监视.html

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_深度监视</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../初始vue/js/vue.js"></script>
	</head>
	<body>
		<!-- 
				深度监视：
						(1).Vue中的watch默认不监测对象内部值的改变（一层）。
						(2).配置deep:true可以监测对象内部值改变（多层）。
				备注：
						(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
						(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
		 -->
		<!-- 准备好一个容器-->
		<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>
			<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
			{{numbers.c.d.e}}
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		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调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				//监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}
		})

	</script>
</html>

三、天气案例_监视属性_简写.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性_简写</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../初始vue/js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				//正常写法
				/* isHot:{
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, */
				//简写
				/* isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} */
			}
		})

		//正常写法
		/* vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */

		//简写
		/* vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		}) */

	</script>
</html>

四、列表排序.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" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyword" />
      <button>年龄升序</button>
      <button>年龄降序</button>
      <button>原顺序</button>
      <ul>
        <li v-for="(p,index) of filePerons" :key="index">
          {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
      </ul>
    </div>
    <script>
      Vue.Vue.config.productionTip = false;
      new Vue({
        el: "#root",
        data: {
          keyword: "",
          sortType: 0,
          persons: [
            { id: "001", name: "马冬梅", age: 19, sex: "女" },
            { id: "002", name: "周冬雨", age: 20, sex: "女" },
            { id: "003", name: "周杰伦", age: 21, sex: "男" },
            { id: "004", name: "温兆伦", age: 22, sex: "男" },
          ],
        },
        computed: {
          filPerons() {
            const arr = this.persons.filter;
          },
        },
      });
    </script>
  </body>
</html>

五、基本列表.html

v-for指令:
1.用于展示列表数据
2.语法：v-for=“(item, index) in xxx” :key=“yyy”
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" src="../初始vue/js/vue.js"></script>
	</head>
	<body>
		<!-- 
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy"
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<h2>汽车信息（遍历对象）</h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>测试遍历字符串（用得少）</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数（用得少）</h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
</html>

总结

好了，那么今天的学习就到这里了。友友们觉得不错的可以给个关注，点赞或者收藏哦！感谢各位友友们的支持。以下的代码希望各位大佬们自行检验哦，毕竟亲手操作让记忆更加深刻。

进击攻城狮
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
【Vue】基础系列（三）计算属性-监视属性-双向绑定-示例-getter/setter显示与监听-计算属性缓存
YK菌的博客
01-18 3755
1. 计算属性 2. 监视属性
vue -监视属性与计算属性
qq_52135740的博客
07-26 425
监视属性 监视属性watch： 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作 2.监视的属性必须存在，才能进行监视！！ 3.监视的两种写法： (1).new Vue时传入watch配置 (2).通过vm.$watch监视 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例_监视属性</title> <!-- 引入Vue
【翠花学Vue】每日打卡——vue打卡1
m0_57082679的博客
07-06 326
jQuery是基于操作dom的库。Vue框架是以数据驱动和组件化开发为核心。在学习vue 之前需要下载node.js（相当于一个平台，可以下载自己所需要的插件），以及vscode软件。下载Vue在D盘根目录创建1个文件夹，名字随意，这边取名为vue1。wind+R打开comd窗口，输入如下内容。(如果@后面不加版本号，默认下载最新版本3) 此时在D盘vue1目录下即可看到所下载的vue。打开node_modules文件夹，进入vue文件夹，即可看到不同的js文件。我们常用的是vue.js。 在vu
Vue中的监视属性watch和计算属性computed
m0_63836635的博客
08-21 934
vue中watch和computed复习
Vue的计算属性与watch
小hu同学
01-30 1157
一、Vue的计算属性是什么？ 它的计算属性是 computed 二、计算属性computed的特点有哪些？ computed是计算属性、实时响应的。计算属性会依赖于它所使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计算属性； 如果它所依赖的这些属性值没有发生改变，那么计算属性的值是从缓存中来的，而不是重新编译，那么它的性能就会比较高，所以Vue中尽可能的使用computed来代替watch。 <!DOCTYPE html> <html> <hea
全面分析 Vue 的 computed 和 watch 的区别
前端人的博客
09-26 579
一、computed介绍 computed 用来监控自己定义的变量，该变量在 data 内没有声明，直接在 computed 里面定义，页面上可直接使用。 //基础使用 {{msg}} <input v-model="name" /> //计算属性 computed:{ msg:function(){ return this.name } } 在输入框中，改变 name 值得时候，msg 也会跟着改变。这是因为 computed 监听自己的属性 msg，发现 name
Vue之监视属性
花&败
11-27 1526
我们实现以下的一个小案例：点击切换天气会分别显示凉爽、炎热(只有这两种状态)，且每一次天气切换的时候都会被控制台给捕获到。我们先不考虑控制台的那一部分，先把切换部分给做出来。我们可以使用前文刚刚介绍的计算属性。此处有两个注意点：①如果我们把上述代码模板中的插值语法给去掉，也就是这样：因为此时已有属性、计算属性在模板当中都没有使用，故会导致Vue的开发者工具出现一点小问题。
watch和computed的区别及两者的使用场景
徐三岁的博客
04-24 5803
区别 watch watch是监听一个值的变化，然后执行对应的回调； watch中的函数不需要调用； watch有两个参数； immediate：组件加载立即触发回调函数执行， deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变 watch中的函数名称必须要和data中的属性名一致，watch依赖于data中的属性，data中的属性发生变化的时候，watch中的函数就会发生变化。 watch不支持缓存； computed computed是计算属性，通过属
Computed 和 Watch 的区别
m0_62118859的博客
04-27 1万+
1.computed计算属性： 作用： （1）解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。 （2）它支持缓存，只有依赖的数据发生了变化，才会重新计算。例如模板中多次用到数据拼接可以用计算属性，只执行一次计算，除非数据发生变化。 （3）不支持异步，如果有异步操作，无法监听数据的变化。 （4）如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。 （5）computed的值会默认走缓存，计
Vue中computed和watch的区别
weixin_57677300的博客
08-15 553
Vue中computed和watch的区别
vue的computed和watch的区别
热门推荐
weixin_44063225的博客
07-06 1万+
computed和watch都是vue框架中用于监听数据变化的属性
vue中的methods,watch和computer区别
qq_54250695的博客
12-26 1208
借鉴，总结学习了一下 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-...
Vue学习笔记二
colspanprince的博客
07-11 1199
监视属性、绑定样式、条件渲染、列表渲染
vue中computer和watch的区别和使用
weixin_47284756的博客
08-18 3200
vue中computer和watch的区别和使用 众所周知computer和watch都是用作监听某些变量使用的 也就是说当某一个数据发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。 他们两个的左右除了监听数据以外还可以让代码变得简洁,没有过多地赘余混乱 有什么区别呢: 1.computed是计算属性，实际上和data对象里的数据属性是差不多的（使用上）。 2.watch:类似于监听机制+事件机制。(监听某个变量,里面可以运行事件) watch和co
vue中computed和watch的区别
qq_55869426的博客
02-03 849
只间听数据的值是否发生变化，不会监听的数据的地址是否发生变化，数据结构比较深的话需要深度监听设置deep:true。computed函数所依赖的属性不变的时候会调用缓存；watch可以监听data中数据的值也可以监听computed计算属性的值，必须与数据的值一样。使用方法和data中的数据一样，可以做执行方法，对其进行传值接收进行处理。computed是计算属性，watch是监听一个值的变化而执行对应的回调。computer和watch都是vue监听数据变化的属性。三、watch监听属性。
vue项目中computed用法讲解
weixin_56496578的博客
04-03 5312
计算属性出现的目的是解决模板中放入过多的逻辑会让模板过重且难以维护的问题. 计算属性是根据data中已有的属性，计算得到一个新的属性. 下面，我们可以通过一个案例来学习一下计算属性、 在一个文本框中输入第一个名字，第二个文本框中输入第二个名字，然后展示全部名称。 了解了计算属性后，下面对用户列表添加一个功能，要求是计算总人数。 可以在ul列表下面，添加如下的代码。 最终展示出了，对应的人数，但是这里在模板中做了运算（在这里做了字符串拼接，虽然计算简单，但是最好还是通过计算属性..
Vue中computed和watch区别
小陈的博客
10-30 1万+
watch和computed都是以Vue的依赖追踪机制为基础的，当某一个依赖型数据发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。当依赖的值变化时，在watch中，可以做一些复杂的操作，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
Vue学习：监视属性-实现天气切换
最新发布
weixin_47295886的博客
02-07 534
点击按钮。可以实现天气的直接切换。并且在控制台显示切换前后的天气。
vue中watch和computer区别
qg2276879379的博客
10-26 3826
前言：watch和computed都是以函数为基础的，但各自却都不同 一、作用机制上 watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。 二、从性质上 1.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）。 2.watch:类似于监听机制+事件机制。 例如： watch: { firstNam
深入了解VUE框架及其应用，满足面试、学习和使用的需求。
Vue是一套用于构建用户界面的渐进式框架，“前端框架”，它的详细介绍可以满足面试，学习，使用等初步的了解。Vue让程序员脱离自己操作DOM，专注于写逻辑和操作数据，使得开发更加简单高效。Vue的核心库只关注视图层...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

进击攻城狮

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

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

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

打赏作者

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

抵扣说明：

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

余额充值