2.vue学习(8-13)

news2024/11/15 23:46:51

文章目录

  • 8.数据绑定
  • 9.el与data的2种写法
  • 10.理解mvvm
  • 11.object.defineProperty
  • 12. 理解数据代理
  • 13 vue中的数据代理

8.数据绑定

在这里插入图片描述
单向数据绑定就是我们学的v-bind的方式,vue对象变了,页面才变。但是页面变了,vue对象不会变。
双向数据绑定需要用v-model,就能实现双向的改变。
在这里插入图片描述
在这里插入图片描述
注意:不是所有的标签都能使用v-model属性的。如果用在了不支持的元素类型上会报错如下图。使用了

在这里插入图片描述
总结:v-model只能用于输入类元素上。多是表单类元素。

在这里插入图片描述
在这里插入图片描述

9.el与data的2种写法

在这里插入图片描述
这个$mount是Vue对象的一个全局参数,每个实例都可以用。mount这种方式更灵活,比如想让界面等1s钟再显示数据。

在这里插入图片描述

  • date的2种写法
    在这里插入图片描述
    对象式和函数式,用到组件的时候,必须使用函数式

在这里插入图片描述
函数式,是全局Vue实例对象帮你调用的。

总结:
在这里插入图片描述

10.理解mvvm

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
输出一下这个vm对象:
在这里插入图片描述
界面f12:
在这里插入图片描述
说明vm的data阈里面,不管写什么kv映射,最后都出现在vm实例对象里面了。vm实例对象有的属性,都可以在容器里直接访问到。

11.object.defineProperty

需求:给一个对象增加一个属性,并赋值。

在这里插入图片描述
这种方式声明的比较高级,这种方式声明的属性,颜色比较淡,如下图。淡的颜色,代表不可以被枚举。
在这里插入图片描述
调用这种枚举的代码,不会被枚举出来。也可以理解为不能遍历。
在这里插入图片描述
在这里插入图片描述
可以修改这种方式变为可以枚举:
在这里插入图片描述
但是这种方式,还有个特点,就是设置的属性,默认是不会被更改的。
在这里插入图片描述
这个不可被修改的特性,也可以改变,如下图。
在这里插入图片描述
通过属性定义得来的字段不能被删掉。删除会返回false。
在这里插入图片描述
也可以更改这一特性。
在这里插入图片描述
问题引入,如果想用一个变量给属性赋值,如下图:
在这里插入图片描述
这种情况,修改numer的值,person里面的不会改变。想要实现属性绑定效果,如下图:
在这里插入图片描述
界面上调用调试工具,会看到age是一个省略号,真正去获得的时候,会调用getter(就是上图的get函数)来获得。
在这里插入图片描述
有get方法,同样也会有set方法:
在这里插入图片描述
通过getset就实现了类似双向绑定的效果。

12. 理解数据代理

在这里插入图片描述
实际效果:
在这里插入图片描述

13 vue中的数据代理

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

上述这个例子,可以发现data里面的属性,是用了数据代理的,有getter和setter。可以验证一下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
上面2个截图就证明了,vm确实把data拿来做了存储和kv映射。
总结:
在这里插入图片描述

数据代理就是为了让编码更方便。

在这里插入图片描述

在这里插入图片描述
_data 里面做的是数据劫持,不是数据代理。这个数据劫持,主要是为了监控属性对象的变化,然后渲染到界面上。

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

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

相关文章

项目经理和产品经理的区别,如何判断自己适合哪个,从事该岗位前期需做的准备(学习技能考、哪些证书)?

最近很多人咨询“项目经理跟产品经理该怎么选,我更适合哪个?”“项目经理跟产品经理哪个更有钱途 ”“项目经理转产品经理好转吗”等等,今天就一次性说清楚项目经理跟产品经理有什么区别,应该怎么选择。 不想看长篇大论的&#x…

[计网02] 数据链路层 笔记 总结 详解

目录 数据链路层概述 主要功能 封装成帧 透明传输 差错检测 冗余码 差错控制 检错编码 纠错编码 奇偶效验法 CRC循环冗余码 静态分配信道 频分多路复用FDM 时分多路复用TDM 波分多路复用WDM 码分多路复用CDM 随机访问介质的访问控制 ALOHA CSMA CSMA/CD CSMA/…

关于“Python”的核心知识点整理大全30

目录 12.2.3 在 OS X 系统中安装 Pygame 12.2.4 在 Windows 系统中安装 Pygame 12.3 开始游戏项目 12.3.1 创建 Pygame 窗口以及响应用户输入 首先,我们创建一个空的Pygame窗口。使用Pygame编写的游戏的基本结构如下: alien_invasion.py 12.3.2 设…

零刻EQ12 N100 双2.5G网口 All In One新手教程

零刻EQ12 N100 双2.5G网口 All In One新手教程 前言1.硬件配置2.准备工作2.1. ESXI8.0U2镜像2.2. Rufus磁盘工具下载2.3. ikuai镜像下载2.4. StarWindConverter虚拟磁盘格式转换工具下载2.5. OpenWrt镜像下载2.6. 黑群晖RR引导镜像下载(DSM7.2)2.7. 需要准备的硬件2.8. 格式化需…

【C语言(十五)】

动态内存管理 一、为什么要有动态内存分配? 我们已经掌握的内存开辟方式有: int val 20 ; // 在栈空间上开辟四个字节 char arr[ 10 ] { 0 }; // 在栈空间上开辟 10 个字节的连续空间 但是上述的开辟空间的方式有两个特点: • 空间开辟大小是固…

vCenter HA拆分和部署

原创作者:运维工程师 谢晋 vCenter HA拆分和部署 拆分vCenter HA部署vCenter HA 拆分vCenter HA 客户vCenter HA内一台虚拟机出现故障无法连接,报错如下: 点击移除集群报错如下: 查找官方KB,按照官方KB进行移除…

货仓选址

title: 货仓选址 date: 2023-12-19 15:06:02 tags: 排序 categories: 算法进阶指南 题目大意 解题思路 将数组排序后&#xff0c;将货仓建在 x x x 坐标处&#xff0c;其左侧和右侧的商家数量相同的时候最优 实现代码 #include<bits/stdc.h>using namespace std; type…

SQL进阶理论篇(十三):数据库的查询优化器是什么?

文章目录 简介什么是查询优化器查询优化器的两种优化方式总结参考文献 简介 事务可以让数据库在增删改查的过程中&#xff0c;保证数据的正确性和安全性&#xff0c;而索引可以帮数据库提升数据的查找效率。查询优化器&#xff0c;则是帮助我们获取更高的SQL查询性能。 本节我…

FreeRTOS的heap文件

在动态创建任务的时候, 只需要提供一个任务句柄, 内存的分配, TCB的分配, 都是系统来进行的, 也是这个文件做的工作. heap文件一共有5个, 都是内存管理文件, 工程只需要一个就行, 这五个的内存分配方法都不一样. heap1: 只实现了malloc功能, 没有实现free功能.(不用) heap2: 实…

小程序使用web-view无法打开该H5页面不支持打开的解决方法

我在正式上线版小程序使用 web-view 组件测试时提示&#xff1a;“无法打开该页面&#xff0c;不支持打开 https://xxxxxx&#xff0c;请在“小程序右上角更多->反馈与投诉”中和开发者反馈。” 奇怪的是&#xff0c;“真机调试”、“开发模式”都可以使用 web-view 组件访…

【Netty】NIO与Netty核心概念

目录 NIO编程NIO介绍NIO和BIO的比较缓冲区(Buffer)基本介绍常用API缓冲区对象创建添加数据读取数据 通道(Channel)基本介绍Channel常用类ServerSocketChannelSocketChannel Selector (选择器)基本介绍常用API介绍示例代码 NIO 三大核心原理 Netty核心概念Netty 介绍原生 NIO 存…

扑克牌炸金花

1.创建类 使用权限修饰符定义所需要参数&#xff0c;使用this关键字生成方法 public class gamejinhua { private String suit;//花色 private int rank;//数字 public gamejinhua(String suit, int rank) { this.suit suit; this.rank rank; } 2.使用快捷键生成get和…

基于ssm生鲜配送系统设计及实现论文

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对生鲜配送信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差…

换热站数字孪生 | 图扑智慧供热 3D 可视化

换热站作为供热系统不可或缺的一部分&#xff0c;其能源消耗对城市环保至关重要。在双碳目标下&#xff0c;供热企业可通过搭建智慧供热系统&#xff0c;实现供热方式的低碳、高效、智能化&#xff0c;从而减少碳排放和能源浪费。通过应用物联网、大数据等高新技术&#xff0c;…

Java多线程技术三:锁的使用——使用ReentrantReadWriteLock类

1 概述 ReentrantLock类具有完全互斥排它的特点&#xff0c;同一时间只有一个线程在执行ReentrantLock.lock()方法后面的任务&#xff0c;这样做保证了同时写实例变量的线程安全性&#xff0c;但 效率是非常低下的。在JDK提供了一种读写锁ReentrantReadWriteLock类&#xff0c;…

Android开发中报错总结之一

在我们开发中经常会遇到报错&#xff0c;今天主要是记录一下&#xff0c;我在开发中遇到的问题&#xff1a; 问题一&#xff1a;material-1.5.0-alpha03\res\values-v31\values-v31.xml:3:5-94: AAPT: error: resource android:color/system_neutral1_1000 not found 解决方案…

基于“Galera+MariaDB”搭建多主数据库集群的实例

1、什么是多主数据库集群 多主数据库集群是一种数据库集群架构&#xff0c;每个节点都可以接收写入操作和读取操作&#xff0c;并且通过心跳机制同步数据&#xff0c;保证数据一致性和高可用性。因多主数据库集群每个节点都可以承担读写操作&#xff0c;因此它可以充分利用各个…

HarmonyOS应用开发-手写板(二)

在前一篇手写板的文章中&#xff08;HarmonyOS应用开发-手写板-CSDN博客&#xff09;&#xff0c;我们通过使用Path实现了一个基本的手写板&#xff0c;但遗憾的是&#xff0c;无法保存所绘制的图像。在本文中&#xff0c;我们将采用canvas和Path2D来重新构建手写板应用。依然只…

数据可视化---柱状图

类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统计学检验箱…

PHPStorm一站式配置

phpstorm安装好之后&#xff0c;先别急着编码。工欲善其事&#xff0c;必先利其器&#xff0c;配置好下面这些之后让编码事半功倍。 主题 Appearance & Behavior -> Appearance -> Theme 选中 [Light with Light Header] 亮色较为护眼 关闭更新 Appearance & …