Vue框架学习笔记——数据代理

文章目录

  • 前文提要
  • 数据代理的概念
  • MVVM模型和Vue中的数据代理
    • M,模型
    • V,视图
    • VM,视图模型


前文提要

本人仅做个人学习记录,如有错误,请多包涵


数据代理的概念

使用一个对象代理对另一个对象中属性的操作。

MVVM模型和Vue中的数据代理

Vue框架是建立在MVVM的基础上开发的。
MVVM框架模型了解:什么是MVVM框架?
第一个M代表Model,模型,也就是数据
第一个V代表View,视图,也就是呈现出来的效果
最后的VM代表ViewModel,是视图模型,是抽离出来的部分逻辑代码,用于构建视图和模型之间的关联,能够借此管理两部分。

M,模型

Vue中的Model也就是Vue实例中的data中的数据,也就是下文data后大括号中的内容

const vm = new Vue({// el: '#box',data: {name: "这里是name的值",}
})

V,视图

Vue中的View视图,则是html中嵌入了Vue框架特殊语法待处理的模版代码,

<div class="box" id="box"><h1>hello,world{{name}}</h1></div>

例如这里的,div标签,就是我理解中的Vue里的视图,

VM,视图模型

至于VM,视图模型,则是整个Vue实例。

通过这种关系,也就是通过这种数据代理的方法,将html中的数据和Vue实例中的data数据关联起来。

在第一个M中的代码用vm指向整个Vue实例,代码中的data会在vm上生成一个属性_data,_data不是Vue实例中的data,但是实例中的data的数据,_data中都有。

接着就是一串代码

<div class="box" id="box"><h1>hello,world{{name}}</h1></div>

在这两层大括号中,我们可以直接写js表达式也可以写出Vue实例中含有的各类属性
那么Vue实例中有name吗,按照上面的讲述,是不是应该写成

hello,world{{_data.name}}

才对,写成_data.name这样没错,但其中Vue中数据代理的体现还体现在,它自动地在vm的身上创建了data中的属性
你对data的访问和修改,实际上操控的都是_data中的数据(这里就是数据代理的体现,用一个对象代理另一个对象的操作),_data和data中的数据又是关联的。
就可以通过name实现_data.name的操作,目的是编写代码更加方便


至此,结束。

如果你觉得这篇文章写的不错,多多点赞~收藏吧!

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

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

相关文章

开发、测试、生产环境

开发环境&#xff1a;开发环境是程序猿们专门用于开发的服务器&#xff0c;配置可以比较随意&#xff0c; 为了开发调试方便&#xff0c;一般打开全部错误报告。简单讲就是项目尚且处于编码阶段&#xff0c;一般这时候会把代码放在开发环境中&#xff0c;不会放在生产环境中。 …

【JMeter】不同场景下的接口请求

场景1: 上传文件接口即Content-Type=multipart/form-data 步骤: 1. 接口url,method以及path正常填写 2.文件上传content-type是multipart/form-data,所以可以勾选【use multipart/form-data】,如果还有其他请求头信息可以添加一个请求头元件 3.请求参…

ubuntu 使用快照启动polygon主网

文章目录 一、 环境部署1.1 golang环境部署1.2 git安装1.3 gcc安装1.4 zstd 安装1.5 pv 安装1.6 aria2c 安装二、安装 polygon2.1 heimdall 安装2.1.1 heimdall 编译2.1.2 初始化 heimdall2.1.3 修改配置文件2.2 bor 安装2.2.1 bor 编译2.2.2 创建bor数据目录2.2.3 修改配置文件…

痤疮分类-yolov5 学习过程

1、在github上下载yolov5-5.0的源码。 GitHub - ultralytics/yolov5: YOLOv5 &#x1f680; in PyTorch > ONNX > CoreML > TFLite

【数据中台】开源项目(2)-Dbus系统架构

大体来说&#xff0c;Dbus支持两类数据源&#xff1a; RDBMS数据源 日志类数据源 1 RMDBMS类数据源的实现 以mysql为例子. 分为三个部分&#xff1a; 日志抽取模块(最新版DBus已经废弃该模块&#xff0c;使用canal直接输出到kafka) 增量转换模块 全量拉取模块 1.1 日志抽…

【JavaEE初阶】线程安全问题及解决方法

目录 一、多线程带来的风险-线程安全 1、观察线程不安全 2、线程安全的概念 3、线程不安全的原因 4、解决之前的线程不安全问题 5、synchronized 关键字 - 监视器锁 monitor lock 5.1 synchronized 的特性 5.2 synchronized 使用示例 5.3 Java 标准库中的线程安全类…

【Spring Boot】如何集成Swagger

Swagger简单介绍 Swagger是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化RESTful风格的Web服务。功能主要包含以下几点&#xff1a; 可以使前后端分离开发更加方便&#xff0c;有利于团队协作接口文档可以在线自动生成&#xff0c;有利于降低后端开发人员编写…

【源码分析】zeebe actor模型源码解读

zeebe actor 模型&#x1f64b;‍♂️ 如果有阅读过zeebe 源码的朋友一定能够经常看到actor.run() 之类的语法&#xff0c;那么这篇文章就围绕actor.run 方法&#xff0c;说说zeebe actor 的模型。 环境⛅ zeebe release-8.1.14 actor.run() 是怎么开始的&#x1f308; Lon…

【python】Python将100个PDF文件对应的json文件存储到MySql数据库(源码)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

那些年,关于CKACKS认证的那些事儿?

前言 遥想2020年的年初&#xff0c;疫情封城封村之际&#xff0c;工作之余在B站将尚硅谷的linux中的k8s视频完整系统的学习了一遍&#xff0c;自此像是打通了任督二脉一般&#xff0c;开启了对k8s的探索之旅&#xff0c;一路也是磕磕绊绊的在工作中使用k8s。 终于在23年的6月仲…

【办公软件】电脑开机密码忘记了如何重置?

这个案例是家人的电脑&#xff0c;已经使用多年&#xff0c;又是有小孩操作过的&#xff0c;所以电脑密码根本不记得是什么了&#xff1f;那难道这台电脑就废了吗&#xff1f;需要重新装机吗&#xff1f;那里面的资料不是没有了&#xff1f; 为了解决以上问题&#xff0c;一般…

编程语言发展史:Python语言的兴起和特点

预计更新 第一部分&#xff1a;早期编程语言 1.1布尔代数和机器语言 1.2汇编语言的出现和发展 1.3高级语言的兴起 第二部分&#xff1a;主流编程语言 1.1 C语言的诞生及其影响 1.2 C语言的发展和应用 1.3 Java语言的出现和发展 1.4 Python语言的兴起和特点 1.5 JavaScript语言…

技术前沿探索:人工智能与大数据融合的未来

技术前沿探索&#xff1a;人工智能与大数据融合的未来 摘要&#xff1a;本博客将探讨人工智能与大数据融合领域的最新技术趋势、前沿研究方向以及挑战与机遇。通过介绍相关技术和案例&#xff0c;我们希望激发读者对这一领域的兴趣&#xff0c;并为其职业发展提供有益参考。 一…

万字解析设计模式之模板方法与解释器模式

一、模板方法模式 1.1概述 定义一个操作中算法的框架&#xff0c;而将一些步骤延迟到子类中&#xff0c;模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 例如&#xff0c;去银行办理业务一般要经过以下4个流程&#xff1a;取号、排队、办理具体业…

ubuntu22.04安装swagboot遇到的问题

一、基本情况 系统&#xff1a;u 22.04 python&#xff1a; 3.10 二、问题描述 swagboot官方提供的安装路径言简意赅:python3 -m pip install --user snagboot 当然安装python3和pip是基本常识&#xff0c;这里就不再赘述。 可是在安装的时候出现如下提示说 Failed buildin…

qt pdf 模块简介

文章目录 1. 技术平台2. Qt pdf 模块3. cmake 使用模块4. 许可证5. 简单示例5.1 CMakeLists.txt5.2 main.cpp 6. 总结 1. 技术平台 项目说明OSwin10 x64Qt6.6compilermsvc2022构建工具cmake 2. Qt pdf 模块 Qt PDF模块包含用于呈现PDF文档的类和函数。 QPdfDocument 类加载P…

监控同一局域网内其它主机上网访问信息

1.先取得网关IP 2.安装IPTABLES路由表 sudo apt-get install iptables 3.启用IP转发 sudo sysctl -p 查看配置是否生效 4.配置路由 iptables -t nat -A POSTROUTING -j MASQUERADE 配置成功后,使用sudo iptables-save查看

[leetCode]257. 二叉树的所有路径(两种方法)

257. 二叉树的所有路径 题目描述&#xff1a; 给你一个二叉树的根节点 root &#xff0c;按 任意顺序 &#xff0c;返回所有从根节点到叶子节点的路径。 叶子节点 是指没有子节点的节点。 示例&#xff1a; 输入&#xff1a;root [1,2,3,null,5]输出&#xff1a;["1-&g…

每日OJ题_算法_双指针⑦力扣15. 三数之和

目录 力扣15. 三数之和 解析代码 力扣15. 三数之和 难度 中等 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三…

【Spring】Spring事务失效问题

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;2022年度博客之星全国TOP3&#xff0c;专注于后端、中间件、计算机底层、架构设计演进与稳定性建设优化&#xff0c;文章内容兼具广度、深度、大厂技术方案&#xff0c;对待技术喜欢推理加验证&#xff0c;就职于…