首页 > 其他分享 >vue基础之4:el与data的两种写法、理解MVVM、Object.defineProperty方法、数据代理

vue基础之4:el与data的两种写法、理解MVVM、Object.defineProperty方法、数据代理

时间:2024-12-01 10:57:37浏览次数:8  
标签:el vue MVVM Object 举例 defineProperty data 属性

欢迎来到“雪碧聊技术”CSDN博客!

在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将不断探索Java的深邃世界,分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游,携手提升技术能力,共创美好未来!感谢您的关注与支持,期待在“雪碧聊技术”与您共同成长!

目录

一、el、data的两种写法

1、el的作用

举例:

2、el的替代写法

举例:

3、data的作用

4、data的替代写法

举例:

进一步化简:

注意:

①等我们学到以后,必须使用这种用函数返回data的方式。(如果不这么做,以后肯定会报错)

②用函数返回data时,一定不要写箭头函数()=>{},因为这么写,导致this不再是vue实例,而是window ,根本原因是箭头函数中不存在this的概念,因此就会往上找this。

5、总结

二、理解MVVM

1、什么是MVVM?

①M:模型(Model),对应vue实例的data中的数据。

②V:视图(View),模板,即html容器。

③VM:视图模型(ViewModel),指的是vue实例对象。

2、图示

注意:由于vue实例在MVVM模型中,是VM这个角色,因此以后vue实例都会命名为VM这个名称。

举例:

3、总结

举例:在容器中,通过{{ }}可以访问vue实例的所有内容。

三、Object.defineProperty方法

1、Object.defineProperty方法是用来干什么的?

2、举例:给对象添加一个属性

3、存在的问题

①通过Object.defineProperty添加的属性,默认是不可以遍历的

举例:

②通过Object.defineProperty添加的属性,默认是不可以修改的

举例:

③通过Object.defineProperty添加的属性,默认是不可以删除的

举例:

4、解决上述问题

5、Object.defineProperty方法的好处

6、Object.defineProperty中的get方法

①作用:读取变量的值,作为属性的值。

②举例:通过读取变量number的值,作为追加属性age的值。

7、Object.defineProperty中的set方法

①作用:用来接收属性被修改时,修改后的值。

②举例:

③存在的问题:person中的age属性没变化

④改进:在set方法中,刷新number变量的值

8、方法简写问题

举例:

四、数据代理

1、什么是数据代理?

2、举例:让对象obj2,代理对象obj


一、el、data的两种写法

1、el的作用

用来将容器和vue实例进行绑定。

举例:

2、el的替代写法

vue实例名.$mount('容器选择器')
举例:

3、data的作用

声明vue实例中的数据,这样才能给html容器(在vue中叫“模板”)中的数据赋值。

4、data的替代写法

举例:

进一步化简:

注意:

①等我们学到以后,必须使用这种用函数返回data的方式。(如果不这么做,以后肯定会报错)
②用函数返回data时,一定不要写箭头函数()=>{},因为这么写,导致this不再是vue实例,而是window ,根本原因是箭头函数中不存在this的概念,因此就会往上找this。

5、总结

二、理解MVVM

1、什么是MVVM?

①M:模型(Model),对应vue实例的data中的数据。

②V:视图(View),模板,即html容器。

③VM:视图模型(ViewModel),指的是vue实例对象。

2、图示

运行结果:

注意:由于vue实例在MVVM模型中,是VM这个角色,因此以后vue实例都会命名为VM这个名称。

举例:

3、总结

举例:在容器中,通过{{ }}可以访问vue实例的所有内容。

三、Object.defineProperty方法

1、Object.defineProperty方法是用来干什么的?

用来给对象添加一个属性。

2、举例:给对象添加一个属性

运行结果:

3、存在的问题

①通过Object.defineProperty添加的属性,默认是不可以遍历的

举例:

运行结果:

 

②通过Object.defineProperty添加的属性,默认是不可以修改的

举例:

③通过Object.defineProperty添加的属性,默认是不可以删除的

举例:

4、解决上述问题

5、Object.defineProperty方法的好处

使用该方法添加的对象属性,可以对其进行很多限制,比如:对象的属性是否可以被枚举、被修改、被删除等等,在某些特定场景下,是需要这些限制的。

6、Object.defineProperty中的get方法

①作用:读取变量的值,作为属性的值。

②举例:通过读取变量number的值,作为追加属性age的值。

运行效果:

7、Object.defineProperty中的set方法

①作用:用来接收属性被修改时,修改后的值。

②举例:

③存在的问题:person中的age属性没变化

④改进:在set方法中,刷新number变量的值

运行效果:

8、方法简写问题

举例:

简写后:

 

四、数据代理

1、什么是数据代理?

        通过一个对象代理,对另一个对象中的属性进行操作(读/写)。

2、举例:让对象obj2,代理对象obj

运行结果:

 

标签:el,vue,MVVM,Object,举例,defineProperty,data,属性
From: https://blog.csdn.net/qq_63981644/article/details/144145174

相关文章

  • 《操作系统真相还原》| 实验记录2.0【MBR,Loader,Kernel代码汇总】
    MBR.S%include"boot.inc"SECTIONMBRvstart=0x7c00 movax,cs movds,ax moves,ax movss,ax movfs,ax movsp,0x7c00 movax,0xb800 movgs,ax mov ax,0600h mov bx,0700h mov cx,0 mov dx,184fh int 10h movbyte[gs:0x00],'1......
  • Alfred Nobel
    AlfredNobel,bornin1833inSweden,wasafamouschemist,engineerandtheinventorofdynamite.Heinitiallymadedynamitetohelpwithbuildingandminingwork,makingthesetaskssaferandfaster.However,whenhesawitbeingusedinwars,hefelt......
  • 终结选择困难,Xshell、MobaXterm、PuTTY、SecureCRT 多款 SSH 终端软件该怎么选
     文章目录软件选取原则对比表各软件优势曝光的安全事件总结其他同类软件 软件选取原则windows下可用于ssh连接的终端软件有很多,本人会根据以下几个原则来进行对比选择:简单好用。无需过多设置,即可达到好用状态,最好支持中文和绿色版。功能强大。最好能一......
  • getelementbyId和queryselect平时经常使用哪一个?说说你的看法
    在前端开发中,getElementById和querySelector都是用于选择HTML元素的常用方法,但它们各有优缺点,适用场景略有不同。我通常会根据具体情况选择更合适的方法:getElementById:优点:速度最快:因为它直接通过ID查找,浏览器可以进行优化,使其速度非常快。代码简洁:语法简单,易......
  • 你有使用过BackboneJS吗?说说它和vue有什么区别?
    Backbone.js轻量级:Backbone.js非常小巧,专注于提供核心结构,例如模型、视图、集合和路由。它依赖于Underscore.js(一个实用程序库)和jQuery(用于DOM操作)。灵活且不拘谨:Backbone.js提供了构建web应用程序的基本构建块,但并没有规定太多的约定或结构。这使得它非常灵活,但也......
  • ssm+vue726基于web的学生就业管理系统的设计与实现
    博主介绍:专注于Java(springbootssm等开发框架)vue .net phpphythonnode.js  uniapp微信小程序等诸多技术领域和毕业项目实战、企业信息化系统建设,从业十五余年开发设计教学工作☆☆☆精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟我的博客空间发布了1600+毕设......
  • vue.js学习 (day 15)
    插槽:默认插槽   App.vue<template><div><!--2.在使用组件时,组件标签内填入内容--><MyDialog>你确定要删除吗?</MyDialog><MyDialog>你确定要退出本系统吗?</MyDialog></div></template><script&......
  • C# mvc +vue+ axios+ api + javascript
    一整天,分享了几条随笔,C#mvc+axios+webapi+javascripthttps://www.cnblogs.com/insus/p/18577591asp.netmvc视图传递数据至另一页的视图https://www.cnblogs.com/insus/p/18578261C#mvc+angular+$http+webapi+javascripthttps://www.cnblogs.com/insus/p/1857......
  • 【Linux】shell编程基础
    一、脚本的创建和执行创建一个1.sh文件vim1.sh在文件中写入以下内容:#!/bin/bash#或者写入#!/bin/sh#或者写入#!/bin/dash无论使用哪种脚本解释器,最终调用的可能是dash。检查默认的sh解释器:ls-l/bin/sh执行脚本文件./1.sh如果权限不足,可以......
  • RHEL9.4安装nfts驱动
    日期:2024.11.30目的:安装nfts系统,实现U盘和移动硬盘与主机互传文件打算3个U盘之间整理下数据,先创建3个挂载点[root@RHEL9~]#mkdir/mnt/mnt{1,2,3}[root@RHEL9~]#ls/mnt/mnt1mnt2mnt3插上U盘看下设备[root@RHEL9~]#manlsblkNAMElsblk-listblockde......