二、再识VUE-MVVM

一、初识VUE
二、再识VUE-MVVM
三、VUE数据代理

MVVM

  • Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters。

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

ViewModel

  • 一个同步 Model 和 View 的对象。在 Vue.js 中,每个 Vue 实例都是一个 ViewModel。它们是通过构造函数 Vue 或其子类被创建出来的。
var vm = new Vue({ /* options */ })

View

  • 被 Vue 实例管理的 DOM 节点。
vm.$el 
  • Vue.js 使用基于 DOM 的模板。每个 Vue 实例都关联着一个相应的 DOM 元素。当一个 Vue 实例被创建时,它会递归遍历根元素的所有子结点,同时完成必要的数据绑定。当这个视图被编译之后,它就会自动响应数据的变化。

  • 在使用 Vue.js 时,除了自定义指令 (稍后会有解释),您几乎不必直接接触 DOM。当数据发生变化时,视图将会自动触发更新。这些更新的粒度精确到一个文字节点。同时为了更好的性能,这些更新是批量异步执行的。

Model

  • 一个轻微改动过的原生 JavaScript 对象。
vm.$data // The Model
  • Vue.js 中的模型就是普通的 JavaScript 对象 —— 也可以称为数据对象。一旦某对象被作为 Vue 实例中的数据,它就成为一个 “响应式” 的对象了。你可以操作它们的属性,同时正在观察它的 Vue 实例也会收到提示。Vue.js 把数据对象的属性都转换成了 ES5 中的 getter/setters,以此达到无缝的数据观察效果:无需脏值检查,也不需要刻意给 Vue 任何更新视图的信号。每当数据变化时,视图都会在下一帧自动更新。

  • Vue 实例代理了它们观察到的数据对象的所有属性。所以一旦一个对象 { a: 1 } 被观察,那么 vm. d a t a . a 和 v m . a 将会返回相同的值,而设置 v m . a = 2 则也会修改 v m . data.a 和 vm.a 将会返回相同的值,而设置 vm.a = 2 则也会修改 vm. data.avm.a将会返回相同的值,而设置vm.a=2则也会修改vm.data。

  • 数据对象是被就地转化的,所以根据引用修改数据和修改 vm.$data 具有相同的效果。这也意味着多个 Vue 实例可以观察同一份数据。在较大型的应用程序中,我们也推荐将 Vue 实例作为纯粹的视图看待,同时把数据处理逻辑放在更独立的外部数据层。

  • 值得提醒的是,一旦数据被观察,Vue.js 就不会再侦测到新加入或删除的属性了。作为弥补,我们会为被观察的对象增加 $add , $set和 $delete 方法。

Directives

  • 指令

  • 带特殊前缀的 HTML 特性,可以让 Vue.js 对一个 DOM 元素做各种处理。

<div v-text="message"></div>
  • 这里的 div 元素有一个 v-text 指令,其值为 message。Vue.js 会让该 div 的文本内容与 Vue 实例中的 message 属性值保持一致。

  • Directives 可以封装任何 DOM 操作。比如 v-attr 会操作一个元素的特性;v-repeat 会基于数组来复制一个元素;v-on 会绑定事件等。

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

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

相关文章

Stable Diffusion基础:ControlNet之线稿成图

今天继续给大家分享Stable Diffusiion的基础能力&#xff1a;ControlNet之线稿成图。 所谓线稿就是由一条条的线段组成的图形&#xff0c;主要用于绘画和设计领域的打底稿、表达构想和预见最终效果。 所谓线稿成图就是利用 Stable Diffusion ControlNet 的能力&#xff0c;依…

极目楚天 共襄星汉 | 同元软控受邀参加2024年中国航天大会

4月23日至26日&#xff0c;2024 年中国航天大会&#xff08;CSC2024&#xff09;在湖北省武汉市成功举办。大会由中国宇航学会和中国航天基金会联合主办&#xff0c;以“极目楚天 共襄星汉”为主题&#xff0c;汇聚国内外航天领域知名专家、学者、管理者&#xff0c;深入探讨航…

el-date-picker 禁用时分秒选择(包括禁用下拉框展示)

2024.04.26今天我学习了对el-date-picker进行禁用时分秒&#xff0c; 在使用el-date-picker组件的时候&#xff0c;我们有可能遇到需要把时分秒的时间固定&#xff0c;然后并且不能让他修改&#xff1a; 1714120999296 比如右上角的这个时间&#xff0c;我们要给它固定是‘08:…

C++中auto关键字的用法详解

1.简介 auto作为一个C语言就存在的关键字&#xff0c;在C语言和C之间却有很大区别。 在C语言中auto修饰的变量&#xff0c;是具有自动存储器的局部变量&#xff0c;但因为局部变量默认类别默认是auto修饰导致一直没有人去使用它。 C11中&#xff0c;标准委员会赋予了auto全新…

红魔8/8Pro/8SPro手机升级安卓14版RedMagic9.0系统+降级出厂救砖刷机

红魔8系列手机也终于引来了安卓14系统的更新&#xff0c;该系统为最新的RedMagic9.0&#xff0c;目前属于公测版本&#xff0c;如果你已经升级了官方UI8.0最新版系统&#xff0c;并且拥有公测资格&#xff0c;可以直接在线检测到最新版UI9.0系统。9.0系统目前对比之前的8.0的版…

记录k8s以docker方式安装Kuboard v3 过程

原本是想通过在k8s集群中安装kuboad v3的方式安装kuboard&#xff0c;无奈在安装过程中遇到了太多的问题&#xff0c;最后选择了直接采用docker安装的方式&#xff0c;后续有时间会补上直接采用k8s安装kuboard v3的教程。 1.kuboard安装文档地址&#xff1a; 安装 Kuboard v3 …

【Jenkins】持续集成与交付 (一):深入理解什么是持续集成?

🟣【Jenkins】持续集成与交付 (一):深入理解什么是持续集成? 1、软件开发生命周期与持续集成2、 持续集成的流程3、持续集成的好处4、Jenkins的应用实践5、结语💖The Begin💖点点关注,收藏不迷路💖 1、软件开发生命周期与持续集成 软件开发生命周期(SDLC)是指软…

windows11安装nginx

1.解压nginx安装包到没有中文的目录 2.双击运行nginx.exe 3.任务管理器查看是否有nginx进程 4.任务管理器->性能->资源监视器 5.网络->侦听端口&#xff0c;查看nginx侦听的端口&#xff0c;这里是90端口

MySQL怎么看死锁记录

这个结果分成三部分&#xff1a; (1) TRANSACTION&#xff0c;是第一个事务的信息&#xff1b; (2) TRANSACTION&#xff0c;是第二个事务的信息&#xff1b; (3)WE ROLL BACK TRANSACTION (1)&#xff0c;是最终的处理结果&#xff0c;表示回滚了第一个事务。 第一个事务的信…

解决Linux CentOS 7安装了vim编辑器却vim编辑器不起作用、无任何反应

文章目录 前言一、解决vim不起作用&#xff08;卸载重新安装&#xff09;1.重新安装vim2.测试vim是否能正常使用 二、解决vim: error while loading shared libraries: /lib64/libgpm.so.2: file too short报错三、解决vim编辑器不能使用方向键和退格键问题 remove vim-common …

Scrapy 爬虫教程:从原理到实战

Scrapy 爬虫教程&#xff1a;从原理到实战 一、Scrapy框架简介 Scrapy是一个由Python开发的高效网络爬虫框架&#xff0c;用于从网站上抓取数据并提取结构化信息。它采用异步IO处理请求&#xff0c;能够同时发送多个请求&#xff0c;极大地提高了爬虫效率。 二、Scrapy运行原…

mysql事故复盘: 单行字节最大阈值65535字节(原创)

背景 记得还在银行做开发&#xff0c;投产上线时&#xff0c;项目发版前&#xff0c;要提DDL的sql工单&#xff0c;mysql加1个字段&#xff0c;因为这张表为下游数据入湖入仓用的&#xff0c;长度较大。在测试库加字段没问题&#xff0c;但生产库字段加不上。 先说结论 投产…

【AIGC调研系列】来认识一下:WebLlama

WebLlama是一个基于Meta Llama 3构建的代理&#xff0c;专门为了网页导航和对话进行了微调。它是由McGill University的自然语言处理团队开发的研究项目&#xff0c;旨在通过对话进行网页浏览的智能代理[1][2]。WebLlama的目标是构建有效的人为中心的代理&#xff0c;帮助用户浏…

uniapp 微信小程序 获取openid,手机号进行登录,配合后端

流程:登录注册功能,通过uni.getUserProfile获取wxcode,通过wxcode传给后端获取openid,sessionkey,unionid。 通过<u-button type="success" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">一键登录</u-button>…

快速构建Spring boot项目

1、Idea里新建项目 2、创建HelloController 3、运行 4、开发环境热部署 pom.xml 查看目前已有的依赖 配置properties 设置 ctrlshiftalt/ 新版本的compiler.automake.allow.when.app.running已经不在registry里面了&#xff0c;在settings里面的Advanced settings里面Allow au…

前端页面单元测试最佳策略:全面涵盖逻辑、组件、流程、UI及性能优化测试,全面保障软件应用的质量

页面级别的测试要求我们从更宏观的角度审视应用&#xff0c;不仅关注单个组件的正确性&#xff0c;还要确保组件间的协作无误&#xff0c;以及用户在应用中的完整体验。通过集成测试、E2E测试和场景测试&#xff0c;我们可以更全面地覆盖应用的各种使用情况&#xff0c;提高软件…

《HCIP-openEuler实验指导手册》1.6 Apache静态资源配置

知识点 常用用途&#xff1a; 软件仓库镜像及提供下载服务&#xff1a; 配置步骤 删除网站主目录中的文件&#xff08;本实验机目录为/home/source ip为192.168.12.137 端口为81&#xff09; cd /home/source rm -rf *在主目录中新建6个文件夹如下图 mkdir test{1..6}新建…

线性神经网络示例

通过5个条件判定一件事情是否会发生&#xff0c;5个条件对这件事情是否发生的影响力不同&#xff0c;计算每个条件对这件事情发生的影响力多大&#xff0c;写一个线性神经网络模型pytorch程序,最后打印5个条件分别的影响力。 一 在这个场景中&#xff0c;一个线性神经网络&…

短视频矩阵营销系统 poihuoqu 任意文件读取漏洞复现

0x01 产品简介 短视频矩阵营销系统是由北京华益云数据科技有限公司开发的一款产品,这家公司专注于抖音短视频矩阵营销系统的研发,致力于为企业提供全方位的短视频营销解决方案。华益云抖销短视频矩阵系统可以帮助企业快速搭建多个短视频账号,实现内容的批量制作和发布,提高…

FSNotes for Mac v6.7.1中文激活版:强大的笔记管理工具

FSNotes for Mac是一款功能强大的文本处理与笔记管理工具&#xff0c;为Mac用户提供了一个直观、高效的笔记记录和整理平台。 FSNotes for Mac v6.7.1中文激活版下载 FSNotes支持Markdown语法&#xff0c;使用户能够轻松设置笔记格式并添加链接、图像等元素&#xff0c;实现笔记…