Vue学习计划-Vue2--Vue核心(四)watch、class、style、set

Vue

  1. 监听(watch): 监听一个属性的变化

    1. 监事属性watch:

      1. 当监视的属性变化时,回调函数自动调用,进行相关操作
      2. 监视的属性必须存在,才能进入监视
      3. 监视的两种写法:
        1. new Vue 时传入watch配置
        2. 通过 vm.$watch()监视
      4. immediate初始化时让handler调用一下
    2. 深度监视:

      1. Vue中的watch默认不监视对象内部值的变化(只监视一层)
      2. 配置deep:true可以监视对象内部值变化(多层)

      备注:

      1. Vue自身可以监视对象内部值得变化,但Vue提供的watch默认不可以
      2. 使用watch时,根据数据的具体结构,决定是否采用深度监听
    3. 简写:当确定不使用immediate和deep属性时可以简写

    一、监听1. const vm = new Vue({el: "#app",watch:{immediate: true, // 初始化时让handler调用一下deep: true, // 深度监听handler(newValue, oldValue){console.log(newValue, oldValue)}}})2. vm.$watch('isSHow',{immediate: true, // 初始化时让handler调用一下deep: true, // 深度监听handler(newValue, oldValue){console.log(newValue, oldValue)}})
    二、简写1. const vm = new Vue({el: "#app",watch:{isShow(newValue, oldValue){console.log(newValue, oldValue)}}})2. vm.$watch('isSHow', function(newValue, oldValue){console.log(newValue, oldValue)})
    
  2. 计算属性(computed)、方法methods、监听(watch)的区别?
    computed、watch、methods专人干专事

    1. 计算属性computed:
      1. 目的是得到一个计算结果,必须要有return,一个状态值受多个状态值影响。
      2. 有缓存,当依赖状态值变化是,才会重新计算。
      3. 不能异步
      4. 本身不支持传参,可以使用闭包
    2. 事件methods:
      1. 绑定的事件处理,非必须return
      2. 没有缓存
    3. 监听watch:
      1. 一个状态的改变 影响多条数据,没有return
      2. 没有缓存
      3. 可以异步
      4. 不传参
  3. class和style绑定

    1. class样式 写法: :class = “xxx”, xxx可以是字符串、对象、数组
      1. 字符串写法适用于:类名不确定,要动态获取
      2. 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
      3. 数组写法适用于:要绑定多个样式,个数确定,名字也确定
    2. style样式
      :style = "{fontSize: xxx}" 其中xx是动态的
      :style = "[a, b]" 其中a, b是样式对象
      
      示例:
      <!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><script src="./vue.js"></script><style>/* #region */.red{color: red;}.blue{color: blue;}.green{color: green}.yellow{color: yellow}/* #endregion */.bold{font-weight: bold;}.size{font-size: larger;}</style></head><body><div id="app"><!-- 1. 绑定字符串 --><!-- 1.1.1 固定切换class名称 --><p :class="name">这是一个动态class</p><button @click="changClass">点击单次切换class名</button><br><!-- 1.1.2 随机切换class名称 --><!-- class 和:class 可以绑定多个class名称 --><p class="bold" :class="name">这是一个动态class</p><button @click="changClass2">点击数组切换class名</button><br><!-- 1.1.3 三元表达式表达式切换class名称 --><p :class="isName ? 'red' : 'blue'">这是一个动态class</p><button @click="isName = !isName">表达式切换class名</button><hr><!-- 2. 绑定对象 --><!-- <p :class="{bold: true, size: false}">这是一个对象绑定的class类名</p> --><p :class="objClass">这是一个对象绑定的class类名</p><button @click="objClassChange">表达式切换class名</button><hr><!-- 3. 绑定数组 --><!-- <p :class="['blue', 'bold', 'size']">这是一个对象绑定的class类名</p> --><p :class="arrClass">这是一个对象绑定的class类名</p><button @click="arrClassChange">表达式切换class名</button></div><script>const vm = new Vue({el: '#app',data: {name: 'red',isName: true,arr:['red', 'blue', 'green'],// 对象class名称objClass:{red: true,bold: true},// 数组class名称arrClass:[ 'blue', 'bold', 'size']},methods: {// #region 字符串绑定changClass(){this.name = 'blue'},changClass2(){const a = Math.floor(Math.random() * 3)console.log(this.arr[a]);this.name = this.arr[a]},// #endregionobjClassChange(){// this.objClass.size = true// 解决方法 $set方法// this.$set(this.objClass, 'size', true)Vue.set(this.objClass, 'size', true)},arrClassChange(){// this.arrClass.splice(0, 1, 'yellow')// 存在问题?为何vm中的arrClass值改变了,页面却没有渲染 => Vue内部监视原理// this.arrClass[0] = 'yellow'// 解决方法// this.$set(this.arrClass, 0, 'yellow')this.$set(this.arrClass, 0, 'yellow')}},})</script></body></html>
      
  4. set方法

    1. Vue会监视data中所有层次的数据。

    2. 如何监视对象的数据? 通过setter实现监视,且要在new Vue时就传入要监测的内容

      • 对象中后追加的属性,Vue默认不做响应式处理
      • 如需要给后添加的属性做响应式,使用如下API:
      Vue.set(target, propertyName/index, value)
      vm.$set(target, propertyName/index, value)
      
    3. 如何监视数组中的数据? 通过包裹数组更新元素的方法实现,本质就是做两件事

      1. 调用原生对应的方法对数组进行更新
      2. 重新解析模板,进而更新页面
    4. 在Vue修改数组中的某个元素一定要用如下方案:

      1. 使用这些API:push(), pop(), shift(), unshift(), sort(), reverse(), splice()
    5. Vue.set()或者vm.$set()

      特别注意:Vue.set()和vm.$set()不能给vm或者vm的根数据对象添加属性!!
      示例:

      <!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><script src="./vue.js"></script></head><body><div id="app">{{ obj }}<button @click="changeObj">点击改变obj值</button><hr>{{ arr }}<button @click="changeArr">点击改变arr值</button><hr>{{ arr2 }}<span v-once>{{ arr2 }}</span><button @click="changeArr2">点击改变arr顺序sort方法</button><hr>{{ arr3 }}<button @click="changeArr3">点击翻转arr</button></div><script>const vm = new Vue({el: '#app',data:{obj:{name: '小明'},arr:['小亮', 10],arr2:[ 10, 40, 5, 30],arr3:[ 1, 2, 3, 4]},methods: {changeObj(){// this.obj.banji = 'xx班级'// 解决方法// this.$set(this.obj, 'banji', 'xx班级')Vue.set(this.obj, 'banji', 'xx班级')},changeArr(){// this.arr[0] = '小白'// 解决方法一: set// this.$set(this.arr, 2, 'xx班级')// Vue.set(this.arr, 2, 'xx班级')// this.arr[2] = '小白'// 解决方法二:内置函数// 1. 数组后添加值// this.arr.push('小白')// 2. 数组后删除值// this.arr.pop()// 3. 从头往后删除数组// this.arr.shift()// 4. 数组前面加值// this.arr.unshift('小小')},// 数组排序changeArr2(){// 5. sort()// 正序this.arr2.sort((a,b) =>{console.log('--');console.log(a, b);return a-b})// this.arr2.sort((a,b) =>{//   return b - a// })},// 翻转数组changeArr3(){// this.arr3.reverse()// this.arr3.splice(1, 2, 'a', 'b', 'v')// 注意: 禁止给vm或者vm的跟数据对象添加属性// console.log(vm._data)// this.$set(vm._data, 'name', 'ssss')// this.$set(vm, 'name', 'ssss')}},})</script></body></html>
      

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/202843.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

运行在多个端系统上的程序是如何互相通信的?

一、进程通信 1.首先搞清楚一点&#xff0c;对于操作系统而言&#xff0c;进行通信的实际上是进程&#xff0c;而不是程序。 2.一个进程可以被认为是运行在端系统上的一个程序&#xff0c;当多个进程运行在相同的端系统上的时候&#xff0c;它们使用进程间通信机制相互通信。…

深入Os--动态链接

1.动态链接库的使用 动态库支持以两种模式使用&#xff0c;一种模式下&#xff0c;在程序加载运行时&#xff0c;完成动态链接。一种模式下&#xff0c;在程序运行中&#xff0c;完成动态链接。 1.1.程序加载运行时完成动态链接 我们通过一个实例介绍程序加载运行时&#xff0c…

【Pandas思考记录】力扣181. 超过经理收入的员工

原题链接 Pandas 代码&#xff1a; import pandas as pddef find_employees(employee: pd.DataFrame) -> pd.DataFrame:merged_df pd.merge(employee, employee, left_onmanagerId, right_onid, howinner, suffixes(, _manager))print("merged_df", merged_df)#…

Socket.D 网络应用协议,首版发布!

有用户说&#xff0c;“Socket.D 之于 Socket&#xff0c;尤如 Vue 之于 Js、Mvc 之于 Http” 主要特性 基于事件&#xff0c;每个消息都可事件路由所谓语义&#xff0c;通过元信息进行语义描述流关联性&#xff0c;有相关的消息会串成一个流语言无关&#xff0c;使用二进制输…

【debug】Image 库 字体问题

可能的报错信息&#xff1a; from PIL import ImageFont, ImageDrawdraw ImageDraw.Draw(image)# use a bitmap font font ImageFont.load("arial.pil")draw.text((10, 10), "hello", fontfont)# use a truetype font font ImageFont.truetype("a…

4G基站BBU、RRU、核心网设备

目录 前言 基站 核心网 信号传输 前言 移动运营商在建设4G基站的时候&#xff0c;除了建设一座铁塔之外&#xff0c;更重要的是建设搭载铁塔之上的移动通信设备&#xff0c;这篇博客主要介绍BBU&#xff0c;RRU以及机房的核心网等设备。 基站 一个基站有BBU&#xff0c;…

代数学笔记7: 交换群结构定理,群在集合上的作用

交换群结构定理 G ≅ Z / d 1 Z Z / d 2 Z ⋯ Z / d n Z , d 1 ∣ d 2 , ⋯ , d n − 1 ∣ d n G\cong \mathbb{Z}/d_1\mathbb{Z}\times \mathbb{Z}/d_2\mathbb{Z}\times\cdots\times \mathbb{Z}/d_n\mathbb{Z}, \quad d_1|d_2,\cdots,d_{n-1}|d_n G≅Z/d1​ZZ/d2​Z⋯Z/dn​…

Liunx系统使用超详细(四)~文件/文本相关命令1

目录 一、mkdir命令 1.1基本语法 1.2常用示例 1.2.1创建目录 1.2.2创建多级目录 1.2.3设置权限 1.2.4递归修改权限 1.2.5显示帮助信息 二、touch命令 2.1基本语法 2.2常用示例 2.2.1创建新的空文件 2.2.2更新现有文件的访问和修改时间戳 2.2.3创建多个文件 2.2.…

【Midjourney实战】| 新年红包、元宝、灯笼、福袋生成

文章目录 1 红包生成2 灯笼生成3 福袋生成4 元宝生成 1 红包生成 之前我们生成了新年礼盒&#xff0c;这一期我们来生成一些过年时特有的元宝和红包 首先&#xff0c;最重要的是画面主体 red envelope&#xff08;红包&#xff09;颜色红色 黄色的 red and yellow 为了后期方…

跳水比赛(C++)

系列文章目录 进阶的卡莎C++_睡觉觉觉得的博客-CSDN博客数1的个数_睡觉觉觉得的博客-CSDN博客双精度浮点数的输入输出_睡觉觉觉得的博客-CSDN博客足球联赛积分_睡觉觉觉得的博客-CSDN博客大减价(一级)_睡觉觉觉得的博客-CSDN博客小写字母的判断_睡觉觉觉得的博客-CSDN博客纸币(…

解决部署到k8s上的服务返回的msg乱码和控制台乱码的问题

解决部署到k8s上的服务返回的msg乱码和控制台乱码的问题 java -Dfile.encodingutf-8 -jar xxx.jar

Web漏洞分析-SQL注入XXE注入(下)

随着互联网的不断普及和Web应用的广泛应用&#xff0c;网络安全问题愈发引起广泛关注。在网络安全领域中&#xff0c;SQL注入和XXE注入是两个备受关注的话题&#xff0c;也是导致许多安全漏洞的主要原因之一。本博客将深入研究这两种常见的Web漏洞&#xff0c;带您探寻背后的原…

Python中数组去重的方法汇总

Python中数组去重的方法汇总 1. 使用 set2. 使用列表推导式3. 使用 numpy 库4. 使用 pandas 库5. 使用 collections 库的 Counter6. 使用 functools 库的 reduce7. 使用 itertools 库的 groupby总结 在 Python 中&#xff0c;对数组进行去重是常见的操作&#xff0c;以确保数据…

Python 上下文管理器 with 相关用法

Python 上下文管理器 什么是上下文管理器&#xff1f; context manager一个上下文管理器是一个对象它定义了运行时的上下文使用 with 语句来执行 with 语句 with context as ctx:# 使用这个上下文对象 # 上下文对象已经被清除​ 这里我们使用 Python的文件操作 打开一个文…

GNSEC 2022年第8届全球下一代软件工程线上峰会-核心PPT资料下载

一、峰会简介 新一代软件工程是指利用新的理论、方法和技术&#xff0c;在软件开发、部署、运维等过程中&#xff0c;实现软件的可控、可预测、可维护的软件生产方式。它涵盖了多个领域&#xff0c;如软件开发、测试、部署、运维等&#xff0c;旨在提高软件生产效率和质量。 …

103.进程概述

目录 1.并行和并发 区别&#xff1a; 2.PCB 3.进程状态 4. 进程命令 从严格意义上来讲&#xff0c;程序和进程是两个不同的概念&#xff0c;他们的状态&#xff0c;占用的系统资源都是不同的。 程序&#xff1a;程序是一种静态实体&#xff0c;是存储在计算机存储介质上的…

排序算法之二:冒泡排序

冒泡排序的思路 冒泡排序是交换排序 基本思想&#xff1a;所谓交换&#xff0c;就是根据序列中两个记录键值的比较结果来对换这两个记录在序列中的位置&#xff0c;交换排序的特点是&#xff1a;将键值较大的记录向序列的尾部移动&#xff0c;键值较小的记录向序列的前部移动…

判断三角形-第11届蓝桥杯选拔赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第12讲。 判断三角形&#…

AOC computer monitor

【窗口增亮】关闭就没掉了

Java异常讲解

&#x1f435;本篇文章将对异常相关知识进行讲解 一、异常的结构 在程序执行的过程中出现的一些问题叫做异常&#xff0c;异常其实是一个一个类&#xff0c;每一种异常都代表一个类 1.1 几种常见的异常 System.out.println(10/0); //算数异常 //Exception in thread "m…