vue新学习 02 vue命令v-model,数据代理,事件,监听,渲染,计算属性(也就是把操作属性的语句放到vue实例中)

news2024/11/15 13:47:17

双向绑定用命令v-model:
v-bind的命令是单项去绑定data中的相关属性,此时的data是真正的data,并没有用变量声明的方式去接收vue实例对象,也就是例如用const vm = new Vue({})。而是直接就采用了new Vue({})这样子的形式,(v-bind和v-model在这个例子中都是如此,所以现在并没有数据代理的问题)所以此时数据的来源是vue实例对象,不是以后所采用的数据代理模式(也就是变量vm的数据来源)。

v-model通常是和输入元素进行合作的,这一部分通常是表单标签,例如input,checkbox等等,功能是修改输入元素的值,会去修改相应的vue实例化的对象中的data中的相关属性。
例如:
在这里插入图片描述

结果:
在这里插入图片描述
用v-model来与不是输出标签的标签进行合作:
在这里插入图片描述
结果:
在这里插入图片描述
数据代理:
首先是用Object.defineProperty方法,这个方法在以后的vue知识点中都是很重要的,因为这个是给对象额外(也就是在规划之外的时候添加对象的属性值)添加属性并且获取和赋值。
Object.defineProperty(参数1,参数2,参数3)
用法:参数1是对象名,参数2是需要添加的属性名,参数三是一个配置对象,是对这个添加的属性进行配置,包括value值,可遍历,可写,可删除等等
在这里插入图片描述
在这里插入图片描述

vue的数据代理:
用的大概是const vm=new Vue({})

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

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

相关文章

亿万富翁Tim Draper:比特币将改变货币与商业的运作方式

点击视频可观看完整版 编译/编辑:秦晋 Draper Associates 创始人、亿万富翁Tim Draper最近接受FOX商业频道「克拉曼倒计时」采访时表示,尽管最近有所下跌,但比特币一直在不断增强持久力,他表示该资产与其他加密货币有所不同。 在T…

okhttp原理分析

工程目录图 请点击下面工程名称,跳转到代码的仓库页面,将工程 下载下来 Demo Code 里有详细的注释 01okhttp module里 包含的设计模式:建造者设计模式、责任链设计模式CustomInject 演示自定义注解 代码:okhttp原理分析、Androi…

GoLand IDE 2023 快捷键大全:提高开发效率的必备操作

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…

汉诺塔与二进制、满二叉树的千丝万缕

汉诺塔(Tower of Hanoi)源于印度传说中,大梵天创造世界时造了三根金钢石柱子,其中一根柱子自底向上叠着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始按大小顺序重新摆放在另一根柱子上。并且规定,在小圆盘上不能放大圆盘,在三…

PostgreSQL PG16 逻辑复制在STANDBY 上工作 (译)

开头还是介绍一下群,如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题,有需求都可以加群群内有各大数据库行业大咖,CTO,可以解决你的问题。加群请联系 liuaustin3 ,在新加的朋友会分到2群(共…

【Ubuntu18.04免密码登录SSH】

Ubuntu18.04免密码登录SSH 1 查看Ubuntu18.04系统中是否存在SSH服务2 配置SSH2.1 先删除一下ssh的目录,重新配置2.2 生存公钥和私钥2.3 将公钥上传到需要登录的服务器2.4 测试登录 1 查看Ubuntu18.04系统中是否存在SSH服务 sudo ps -e |grep ssh没有的话&#xff0…

【Vue3+Ts+Vite】配置滚动条样式

一、先看效果 二、直接上代码 <template><div class"main-container"><h1 v-for"index in 50" :key"index">这是home页面</h1></div> </template> <style lang"scss" scoped> .main-conta…

Stephen Wolfram:类似人类任务的模型

Models for Human-Like Tasks 类似人类任务的模型 The example we gave above involves making a model for numerical data that essentially comes from simple physics—where we’ve known for several centuries that “simple mathematics applies”. But for ChatGPT w…

SSTI学习的笔记(橙子)

放心&#xff0c;我会一直陪着你 一.在终端的一些指令1.虚拟环境2.docker容器 二.SSTI相关知识介绍1.魔术方法2.python如何执行cmd命令3.SSTI常用注入模块(1)文件读取(2)内建函数eval执行命令(3)os模块执行命令(4)importlib类执行命令(5)linecache函数执行命令(6)subprocess.Po…

暖手宝UL认证 亚马逊UL测试报告 UL499测试项目

UL499测试内容&#xff1a;1、 漏电流测试 2、 输入测试 3、 潮态下漏电流测试4、正常温升测试 5、 耐高压测试 6、 稳定性测试7、异常测试&#xff08;DRY&#xff09;8、 异常测试  9、 静压及强度测试10、 烧熔断器测试、 电源线拉力测试11、 电源线推力测试12、 塑件变…

二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom

要实现这个效果&#xff0c;我们先看一下目前的页面展示&#xff1a; 左边有一个图例&#xff0c;我们可以方法缩小地图&#xff0c;右边是动态的marker标记&#xff0c;到时候肯定时候是后端将对应的颜色标识、文字展示、坐标点给咱们返回、我们肯定可以拿到一个list&#xf…

怎么清空电脑回收站?教您这三招(附上清空的回收站数据怎么恢复教程)

电脑回收站是一个临时存放被删除文件的地方&#xff0c;如果不清空回收站&#xff0c;这些文件仍然占用磁盘空间。清空回收站可以释放这些空间&#xff0c;提高磁盘的可用空间。那么&#xff0c;怎么清空电脑回收站的东西呢&#xff1f;清空的回收站数据怎么恢复呢&#xff1f;…

ICMP隐蔽隧道攻击分析与检测

• ICMP隧道攻击工具特征分析 一、原理 由于ICMP报文自身可以携带数据&#xff0c;而且ICMP报文是由系统内核处理的&#xff0c;不占用任何端口&#xff0c;因此具有很高的隐蔽性。 通过改变操作系统默认填充的Data&#xff0c;替换成自己构造的数据&#xff0c;这就是ICMP隐…

测试开发第一章、软件测试介绍

一、什么是软件测试 最常见的理解是:软件测试就是找BUG,发现缺陷。 软件测试就是验证软件产品特性是否满足用户的需求。 从这话我们可以看出以下两点: 测试试图验证软件是“工作的”,也就是验证软件功能执行的正确性测试的活动是以测试人员“预期的结果”为依据,这里的…

centos7 部署 k8s 1m2n

1 系统环境准备 1.1 安装所需工具 yum -y install vim yum -y install wget# 设置yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo1.2 修改…

【性能优化篇】.ttf字体包过大引起的网页加载过慢 font-spider 压缩字体包 适用于任何前端项目

背景 项目使用的是阿里巴巴普惠2.0字体&#xff0c;型号分别是 35-thin 和 45-light 这两个字体包 都是 8mb 左右 本地加载的时候可能速度不会收影响&#xff0c;发到生产和测试环境下&#xff0c;速度会很慢&#xff0c;尤其是测试环境&#xff0c;字体包加载了一分钟&#…

详细分析Python中运算符“==“和“is“的区别

目录 Python中运算符"" Python中运算符"is" ""和"is"的区别 总结 Python中运算符"" 在Python中&#xff0c;双等号运算符"" 用于比较两个值是否相等。它返回一个布尔值&#xff0c;即True或False&#xff0c;…

自动完成网页局部区域截图的方法

一般网页包含标题、导航、正文、图片、广告、外链等内容&#xff0c;但只有正文内容对我们才有价值&#xff0c;或者我们只关心其中的数据分析图表。希望把网页有价值的区域截图下来&#xff0c;在手工截图时&#xff0c;可以利用截图工具选择截图区域&#xff0c;那么能自动截…

如何评估自动化测试脚本的编写时间和维护工作量?

一、如何评估自动化测试脚本的编写时间和维护工作量&#xff1f; 评估自动化测试脚本的编写时间和维护工作量是一个复杂的过程&#xff0c;需要综合考虑以下因素&#xff1a; 脚本复杂性&#xff1a;评估脚本的复杂性&#xff0c;包括测试需求的复杂程度、涉及的功能和模块的复…

简单认识Redis 数据库的高可用

文章目录 一、Redis 高可用&#xff1a;1.简介&#xff1a;2、在Redis中实现高可用的技术 二、Redis持久化&#xff1a;1.持久化的功能&#xff1a;2.Redis 提供两种方式进行持久化&#xff1a; 三、RDB 持久化&#xff1a;1.简介&#xff1a;2.触发条件&#xff1a;4.启动时加…