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

news2024/9/21 16:28:33

双向绑定用命令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值,可遍历,可写,可删除等等
在这里插入图片描述
在这里插入图片描述

Object.defineProperty()有两个重要的函数,用于对新增属性的获取和赋值。
对新增属性的获取:get():
设置新增的属性:set():
在这里插入图片描述
注意:js的作用链和作用域
作用域:在js中,作用域一般有三个,全局作用域,函数作用域和块级作用域。

块级作用域:就好比是一个函数的一个功能块,就是if条件块,for循环块,在这些块中声明的变量是不可以在出了这些块后还可以继续用的。
在这里插入图片描述
在这里插入图片描述

函数作用域:和java中的函数作用域一样,在这个函数中声明的变量只能在这个函数中去用,出了这个函数就会无法调用。
在这里插入图片描述

全局作用域:可以认为是java中的静态资源,static修饰的,这个是在这个html文件都可以去用的。
在这里插入图片描述

作用域链:在js中,
在这里插入图片描述
所谓的作用域链就是,在函数嵌套的情况下,变量的值会从内部开始去寻找,在内部找不到就会向这个寻找的函数的上一级函数去寻找,一直找到相符合条件的变量。

箭头函数:主要是看this这个问题。

在这里插入图片描述

所以vue实例对象中如何去用箭头函数呢?
在这里插入图片描述

vue的数据代理:
用的大概是const vm=new Vue({})。
这个时候vm就是数据代理,所谓的数据代理,就是一个数据对象A可以操作另一个数据对象B,那么这个对象A就是对象B的数据代理。
例子:

在这里插入图片描述

看结果:
左上是vue实例原型
左下的是vue实例原型的数据代理对象,vm。
右下的是vm的进一步升级,此时也就是完整版的数据代理对象vm。
vm中的属性name,address都是通过Object.defineProperty这个方法的get()和set()方法去获取和修改vm._data中的name和address属性。
在这里插入图片描述

其中vm在控制台运行情况如下:
address和name都是冒号右边是(…)

address=(...)
name=(...)

这表示用了get和set方法
在这里插入图片描述

vue事件:
01.绑定事件和事件的参数
js中有很多的事件,比如说点击事件,键盘keydown和keyup事件等等。
在vue中如何去实现事件功能?用命令v-on去绑定相关的事件,而事件的功能在vue的methods属性中去完成。
比如说点击事件:

在这里插入图片描述
v-on:click=“方法名”,这里的方法名是showInfo1,showInfo2。参数event是一个默认的参数,也就是说每一个在methods中去声明的方法参数中都带有event(无论是无参还是有参方法声明的时候也可以不写event)。但是如果你需要去用event参数,此时方法不是无参方法的话(如果有参数例如number),这个有明显参数的方法,需要添加关键字$event在vue语句模版中。
在这里插入图片描述
结果:
在这里插入图片描述
02.事件的修饰符问题
js中特有的事件冒泡问题?
在这里插入图片描述
dom树:
在这里插入图片描述
如果你想去阻止事件冒泡的发生:
vue中有一个修饰符stop,在内部去写stop,因为事件冒泡顺序是从内部dom中去执行的。
在这里插入图片描述

如果你想去阻止事件默认事件的发生:
如果事件绑定的标签是一个超链接的标签<a href="www.hao123.com">,你不想在点击事件后会自动跳转到hao123页面,这样子需要在事件中去添加一个修饰符prevent(在触发事件类型的后面写)用来阻止默认事件的发生,此时的默认事件是超链接的点击后自动跳转。
在这里插入图片描述

如果你想去让事件发生一次:比如说按钮按第一次就会弹出对话框,其他的时候不会弹出对话框。
在这里插入图片描述

如果你想去让事件发生的顺序是捕获模式,而不是默认的冒泡模式:
默认的冒泡模式:
在这里插入图片描述
相关的事件:
在这里插入图片描述

结果:
在这里插入图片描述
这里是冒泡的顺序。
而capture的顺序是:
和冒泡的顺序相反的,事件的获取顺序是,先去捕获,而后冒泡执行。
添加修饰符capture,在最外层:
在这里插入图片描述

事件修饰符的总结:
在这里插入图片描述

事件全部总结:
在这里插入图片描述
第三条.vue中去使用箭头函数需要用一般的函数来包装一下,这样子this的志向才会是vue这个实例

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

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

相关文章

6、Kubernetes核心技术 - Pod

目录 一、概述 二、Pod机制 2.1、共享网络 2.2、共享存储 三、Pod资源清单 四、 Pod 的分类 五、Pod阶段 六、Pod 镜像拉取策略 ImagePullBackOff 七、Pod 资源限制 八、容器重启策略 一、概述 Pod 是可以在 Kubernetes 中创建和管理的、最小的可部署的计算单元。P…

oracle12c静默安装

目录 前言 安装配置步骤 关闭防火墙,禁止防火墙开机自启 关闭selinux yum安装必要安装包 内网环境下载依赖包的方式 创建用户和组 创建oinstall和dba组 创建oracle用户 设置oracle密码 查看创建结果 修改内核参数 使配置生效 修改用户及文件限制 改文件限制 修改用…

ol.Overlay+gif动画及隐藏问题

隐藏要使用css比较彻底&#xff0c;例如$("#markerLbs").hide()。 如果使用markerLbs.setVisible(false)&#xff0c;当地图刷新后再次显示&#xff0c;可能我的用法不对&#xff0c;欢迎指教。 我的demo是一个gif动画&#xff0c;当zoom变化时控制gif显隐&#xf…

防汛备汛 | EasyV数字孪生可视化防汛应急解决方案护平安!

一、方案背景 汛期是指季节性降雨增多&#xff0c;河流湖泊水位上涨的时期。当前&#xff0c;我国正式进入“七下八上”防汛关键期&#xff0c;多地进入主汛期。入汛以来&#xff0c;我国经历了18次强降雨过程&#xff0c;21个省份271条河流发生超警以上洪水。其中南方地区受台…

Linux文件和目录的777、755、644权限解释

1.文件权限 在linux系统中,文件或目录的权限可以分为3种: r:4 读 w:2 写 x:1 执行(运行) &#xff0d;&#xff1a;对应数值0 数字 4 、2 和 1表示读、写、执行权限 rwx 4 2 1 7 (可读写运行&#xff09; rw 4 2 6 &#xff08;可读写不可运行&#xff09; rx …

vue3+ts+vite项目中使用@时报错:找不到模块,两步教你快速解决

亲爱的小伙伴&#xff0c;如果你也在vue3tsvite项目中使用时报错&#xff1a;找不到模块的话&#xff0c;如下图情况&#xff0c;不要担心&#xff0c;不要害怕&#xff0c;两步教你解决&#xff01; 1.找到tsconfig.json文件 2.添加如下代码即可 代码如下&#xff1a; "…

SpringMVC中的返回值是什么?

1.谈谈你对SpringMVC的理解 SpringMVC是属于Spring Framework生态里面的一个模块&#xff0c;它是在Servlet的基础上构建并且使用了mvc模式设计的一个Web框架它的主要目的是为了去简化传统的ServletJSP模式下的Web开发方式&#xff0c;其次Spring mvc 的整个架构设计&#xff0…

建木使用进阶-创建密钥管理

阿丹&#xff1a; 第一次我们进入建木&#xff0c;第一件事情就是配置我们相关的密钥。 解读&#xff1a; 在建木中我们可以进行创建密钥来对我们服务器等密码进行方便的管理。 注意&#xff1a; 登录的时候账号为&#xff1a;admin 密码为&#xff1a;123456 这是初始…

【javaSE】 数组的定义与使用

目录 数组的基本概念 为什么要使用数组 什么是数组 数组的创建及初始化 数组的创建 数组的初始化 动态初始化 静态初始化 注意事项 数组的使用 数组中元素访问 注意事项 遍历数组 数组是引用类型 初识JVM的内存分布 基本类型变量与引用类型变量的区别 再谈引用…

java自定义导出excel

导出Excel时候&#xff0c;表头需要自定义&#xff0c;只能自己重新写导出代码了 1、引入包 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.6</version> </dependency>2、工具…

优化 SQL 体验:五款 AI 驱动工具助力 SQL 查询

SQL AI 工具能够极大提高跟数据和数据库打交道人员&#xff08;e.g. 数据分析师、数据科学家、数据库管理员、开发者&#xff09;的效率和生产力&#xff0c;比如可以根据自然语言输入自动生成 SQL 查询&#xff08;非技术用户也能轻松访问和分析数据了&#xff01;&#xff09…

为公网SSH远程Ubuntu配置固定的公网TCP端口地址主图

文章目录 为公网SSH远程Ubuntu配置固定的公网TCP端口地址 为公网SSH远程Ubuntu配置固定的公网TCP端口地址 在上篇文章中&#xff0c;我们通过cpolar建立的临时TCP数据隧道&#xff0c;成功连接了位于其他局域网下的Ubuntu系统&#xff0c;实现了不同操作系统、不同网络下的系统…

Web端即时通讯技术(SEE,webSocket)

目录 背景简介个人见解被动推送轮询简介实现 长轮询&#xff08;comet&#xff09;简介实现 比较 主动推送长连接&#xff08;SSE&#xff09;简介实现GETPOST 效果 webSocket简介WebSocket的工作原理:WebSocket的主要优点:WebSocket的主要缺点: 实现用法一用法二 **效果** 比较…

指定的驱动器号对于分配不可用怎么办?

驱动器号是计算机上驱动器的字母标识符也叫做“盘符”&#xff0c;例如内部硬盘、光驱、SD卡和外部U盘在文件资源管理器中可以直接看到的标志&#xff0c;如我们平常所说的C盘、D盘、H盘等。如果硬盘丢失了驱动器号&#xff0c;您将无法直接访问其中保存的文件&#xff0c;并且…

【小白必看】Python词云生成器详细解析及代码实现

文章目录 前言导入所需库将存好的Excel词频表读取成字典循环处理每个词频Excel文件定义词云样式和生成词云图完整代码运行效果截图知识点 结束语 前言 本文介绍了如何使用Python编写代码来生成词云图。在生成词云图之前&#xff0c;我们需要导入一些必需的库&#xff0c;包括nu…

中断控制器的驱动解析

这里主要分析 linux kernel 中 GIC v3 中断控制器的代码(drivers/irqchip/irq-gic-v3.c)。 设备树 先来看下一个中断控制器的设备树信息&#xff1a; gic: interrupt-controller51a00000 {compatible "arm,gic-v3";reg <0x0 0x51a00000 0 0x10000>, /* GI…

Python(四十四)嵌套循环

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

【C++详解】——智能指针

目录 为什么需要智能指针 抛异常引发内存泄漏 内存泄漏 什么是内存泄漏&#xff0c;内存泄漏的危害 内存泄漏分类 检测内存泄漏常用工具 如何避免内存泄漏 智能指针的使用及原理 RAII 智能指针的原理 各类智能指针介绍 auto_ptr unique_ptr shared_ptr weak_ptr …

vue3-Cannot use ‘in‘ operator to search for ‘path‘ in undefined

在创建vue3的路由时&#xff0c;报了这样的错&#xff1a;Cannot use ‘in’ operator to search for ‘path’ in undefined&#xff0c;经过多次排查发现是我在路由文件里面用错了createWebHashHistory()方法&#xff0c;将它用成了 变量。 一、报错情况 二、报错原因及解…

Kepware Modbus驱动简介

1. Modbus驱动能够解决什么问题&#xff1f; 它是Modbus设备驱动的集合&#xff0c;为用户提供一种方便快捷的Modbus设备数采解决方案。 只需要通过简单的配置就可以将常见的例如Modbus TCP/IP Ethernet、RTU Serial 和 ASCII Serial等协议设备无缝连接到 HMI/SCADA、MES/His…