2.vue学习(8-13)

文章目录

  • 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.mzph.cn/news/233923.shtml

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

相关文章

时序预测 | Python实现LSTM-Attention电力需求预测

时序预测 | Python实现LSTM-Attention电力需求预测 目录 时序预测 | Python实现LSTM-Attention电力需求预测预测效果基本描述程序设计参考资料预测效果 基本描述 该数据集因其每小时的用电量数据以及 TSO 对消耗和定价的相应预测而值得注意,从而可以将预期预测与当前最先进的行…

vue 学习笔记

生命周期 1)定义:vue实例从创建到销毁的过程 2)钩子函数 2.1)beforeCreate:vue实例初始化之前调用,这个阶段vue实例刚刚在内存中创建,此时data和methods这些都没初始化好。 2.2)Cre…

【算法】红黑树

一、红黑树介绍 红黑树是一种自平衡二叉查找树,是在计算机科学中用到的一种数据结构,典型的用途是实现关联数组。 红黑树是在1972年由Rudolf Bayer发明的,当时被称为平衡二叉B树(symmetric binary B-trees)。后来&am…

6.1 接口- java核心卷1

6.1 接口 任何实现Comparable接口的类都要包含compareTo方法,该方法参数为Object对象,返回整型数值 Array类的sort方法对Employee对象排序: 1.Employee类实现Comparable接口 2.重写compareTo方法,用Double.compare(…

Go、Python、Java、JavaScript等语言的求余(取模)计算

余数符号规则: Go(%): 余数与被除数符号一致 Java(%): 余数与被除数符号一致 JavaScript(%): 余数与被除数符号一致 Python(%)…

[GDI绘图]画笔CPen

CPen类 CPen画笔是一种用来画线及绘制有形边框的工具,用户可以指定它的颜色及厚度,并且可以指定它画实线、点线或虚线。 CPen类,该类封装了Windows图形设备接口(GDI)画笔,主要通过构造函数来创建绘图对象…

Educational Codeforces Round 160 (Rated for Div. 2)

Educational Codeforces Round 160 (Rated for Div. 2) Educational Codeforces Round 160 (Rated for Div. 2) A. Rating Increase 题意:给定一个由数字字符组成的字符串,且无前导零,将其分割成ab两部分,b不能有前导零&#x…

DETR 【目标检测里程碑的任务】

paper with code - DETR 标题 End-to-End Object Detection with Transformers end-to-end 意味着去掉了NMS的操作(生成很多的预测框,nms 去掉冗余的预测框)。因为有了NMS ,所以调参,训练都会多了一道工序&#xff0c…

Gemini 1.0:Google推出的全新AI模型,改变生成式人工智能领域的游戏规则!

Gemini 1.0:Google推出的全新AI模型,将改变生成式人工智能领域的游戏规则! 🎥 屿小夏 : 个人主页 🔥个人专栏 : IT杂谈 🌄 莫道桑榆晚,为霞尚满天! 文章目录 …

Ubuntu18.04 上通过 jihu 镜像完成 ESP-IDF 编译环境搭建流程

为了解决国内开发者从 github 克隆 esp 相关仓库慢的问题,已将 esp-idf 和部分重要仓库及其关联的子模块镜像到了 jihu,这些仓库将自动从原始仓库进行同步。此篇博客用来阐述 Ubuntu18.04 上通过 jihu 镜像完成 ESP-IDF 编译环境搭建流程。 注&#xff1…

LeetCode Hot100 51.N皇后

题目: 按照国际象棋的规则,皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上,并且使皇后彼此之间不能相互攻击。 给你一个整数 n ,返回所有不同的 n 皇后问题 的…

亚马逊鲲鹏系统:引领批量自动操作买家号先进技术

亚马逊,作为全球最大的电商平台之一,其独特的自动化批量操作一直是众多我追逐的焦点。深入了解其主要使用方法,通过批量导入无数个买家账户,借助最新的反指纹技术和国外代理IP的绑定,可以成功规遍亚马逊市场&#xff0…

TortoiseGit通过SSH连接配置,生成SSH密钥方法

生成SSH密钥: Win环境下命令(git ssh key是可以自定义命名的): ssh-keygen -t ed25519 -C "git ssh key" && start "" "C:\Windows\notepad.exe" "C:\Users\%username%\.ssh\id_ed25519.pub" 打开cm…

三相异步电机动态数学模型推导及矢量控制仿真

文章目录 **原文链接,点击跳转**三相异步电机动态数学模型及矢量控制仿真1、异步电机三相方程2、坐标变换3、磁链3/2变换推导4、两相静止坐标系下的方程5、两相旋转坐标系下的方程6、以 ω-is-Ψr 为状态变量的状态方程7、矢量控制及 matlab 仿真 原文链接&#xff…

Linux中使用HTTP协议进行API交互的示例

在Linux中,HTTP协议就像一个神奇的传送门,让我们可以通过网络进行各种交互。这不,今天我们就来探讨一下如何使用HTTP协议在Linux中进行API交互。 首先,我们需要一个API。为了方便演示,我们假设有一个天气预报API&…

spark介绍及简单使用

简介 Spark是由加州大学伯克利分校AMPLab(AMP实验室)开发的开源大数据处理框架。起初,Hadoop MapReduce是大数据处理的主流框架,但其存在一些限制,如不适合迭代算法、高延迟等。为了解决这些问题,Spark在20…

Re解析(正则表达式解析)

正则表达式基础 元字符 B站教学视频: 正则表达式元字符基本使用 量词 贪婪匹配和惰性匹配 惰性匹配如下两张图,而 .* 就表示贪婪匹配,即尽可能多的匹配到符合的字符串,如果使用贪婪匹配,那么结果就是图中的情况三 p…

【Unity】运行时创建曲线(贝塞尔的运用)

[Unity]运行时创建线(贝塞尔的运用) 1. 实现的目标 在运行状态下创建一条可以使用贝塞尔方法实时编辑的网格曲线。 2. 原理介绍 2.1 曲线的创建 unity建立网格曲线可以参考Unity程序化网格体的实现方法。主要分为顶点,三角面&#xff0c…

浪潮信息KOS服务器操作系统:经过周密考虑后的智慧之选

文章目录 一、引言二、服务器操作系统概述三、选择服务器操作系统的关键因素四、评估服务器操作系统的标准五、选择服务器操作系统的实践经验六、浪潮信息KOS服务器操作系统一、稳定可靠二、高效协同三、全天候运维四、广泛兼容 七、总结与展望 浪潮信息信息KOS是浪潮信息信息基…

sql44(Leetcode1667修复表中的名字)

代码: SubString(字段,1,end) - 从某个文本字段提取字符 # Write your MySQL query statement below select user_id, concat(upper(substring(name,1,1)),lower(substring(name,2))) as name from Users order by user_id