Vue.createApp的对象参数

目录

template 属性

data 属性

methods 属性

疑问

function 函数的两种写法

methods 属性中 this 的指向

总结


Vue 实例是通过 Vue.createApp() 创建的,该函数需要接收一个对象作为参数,该对象可添加 template、data、methods 等属性。

template 属性

vue.js 3 中的 template 属性用于定义需要渲染的模板内容,其中包括 html 标签或组件,最终将其挂载到 元素上,相当于为 innerHTML 赋值。

在模板中,会使用一些语法,例如 {{}} 和 @click 等。

data 属性

data 属性用于为 vue.js 组件定义响应式数据,该属性需要传入一个函数,该函数返回一个对象。

该对象会被 vue.js 劫持,之后对该对象的修改或访问都会在劫持中被处理,所以该对象中定义的数据都是响应式的。

例如,在 template 中通过使用 {{counter}},可访问到该对象定义的 counter;当修改 counter 时,template 中的 {{counter}} 也会发生改变。

在浏览器中运行代码时,需要注意。

在 vue.js 2 中,data 属性可传入一个对象。

在 vue.js 3 中,data 属性必须传入一个函数,否则会在浏览器中报错。

methods 属性

methods 属性需要传入一个对象,通常会在这个对象中定义很多方法,可以被绑定到模板中,在该方法中,可以使用 this 直接访问 data 返回对象的属性。

methods 中定义的方法不能使用箭头函数。

疑问

为什么 methods 属性中定义的方法不能使用箭头函数?

https://v2.cn.vuejs.org/v2/api/#methods

https://cn.vuejs.org/api/options-state.html#methods

function 函数的两种写法

// function 函数的简写语法
decrement() {this.counter--;console.log('decrement=>', this)
},
// function 函数的完整语法
decrement:function() {this.counter--;
}

可知,简写是在完整的基础上少了 :function

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><!-- 用 <template> 标签编写模板内容,需要添加 id 属性 --><template id="why"><div><h2>{{message}}</h2><h2>{{counter}}</h2><button @click="increment">+1</button><button @click="decrement">-1</button></div></template><script src="./js/vue.js"></script><script>Vue.createApp({template: '#why', // 通过id选择器选中 <template id="why"></template> 模板data: function() {return {message: "methods中的this",counter: 100}},methods: {// 1.箭头函数increment:() => {this.counter++;console.log('increment=>', this)},// 2.function 函数的简写语法decrement() {this.counter--;console.log('decrement=>', this)},// 3.function 函数的完整语法// decrement:function() {//     this.counter--;// }}}).mount('#app');</script>
</body>
</html>

在浏览器中运行代码,f12 打开控制台,先点击 -1 按钮,再点击 +1 按钮,控制台输出如下

箭头函数中的 this 会指向 Window,这里涉及箭头函数使用 this 的查找规则,它会在自己上层作用域中查找 this。这里找到的刚好是 script 作用域中的 this,所以就是 Window。

就是 vue.js 在执行过程中创建了一个 Proxy 对象,通过代理对象来处理数据,不是js原生的 Window 对象。

methods 属性中 this 的指向

在 vue.js 3源码中,所在在 methods 中定义的方法都会被遍历,通过 bind 函数绑定 this,确保方法中的 this 指向 vue 实例的代理对象。

​​​​​​https://github.com/vuejs/core/blob/v3.2.23/packages/runtime-core/src/componentOptions.ts#L633

通过 bind() 为每个函数绑定了 publicThis,即 vue 实例的代理对象。

https://github.com/vuejs/core/blob/v3.2.23/packages/runtime-core/src/componentOptions.ts#L544

除了 methods 中的 this 指向 vue 实例的代理对象,data、computed、watch 等也都绑定了同一个 this。

Vue.createApp() 的对象除了可以编写 template、data、methods 属性,还可以定义其他属性,比如 props、computed、watch、emits、setup 和生命周期函数等。

总结

Vue.createApp的对象参数

属性名作用注意事项
template定义需要渲染的模板内容
data为 vue.js 组件定义响应式数据该属性需要传入一个函数,该函数返回一个对象
methods需要传入一个对象,通常会在这个对象中定义很多方法,可以被绑定到模板中,在该方法中,可以使用 this 直接访问 data 返回对象的属性。methods 中定义的方法不能使用箭头函数。

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

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

相关文章

LLM大语言模型私有化部署-OpenEuler22.03SP3上容器化部署Ollama与OpenWebUI

背景 你是不是也有私有化部署大模型的需求&#xff1f;如今有了 Ollama &#xff0c; HuggingFace &#xff0c; ModelScope 等开源平台&#xff0c;我们可以非常方便地搭建一个属于自己的大模型&#xff0c;如果网速给力&#xff0c;真是分分钟~~。简单起见&#xff0c;这篇文…

Linux——rootfs根文件系统构建

根文件系统也叫做rootfs FATFS这类的文件系统属于Linux内核的一部分&#xff0c;属于软件代码&#xff0c;所以ROOTFS不等于FATFS。 Linux的根文件系统实际上是一个文件夹或者叫目录&#xff0c;这个目录下会有许多子目录&#xff0c;这些目录中存放许多Linux运行所必须的文件…

go语言的成神之路-标准库篇-os标准库

一、权限 在操作系统&#xff08;OS&#xff09;中&#xff0c;标准库的权限管理是非常重要的&#xff0c;它确保了不同用户和进程能够安全地访问系统资源。以下是一些常见的权限概念和说明&#xff1a; 1.用户权限 用户ID&#xff08;UID&#xff09;&#xff1a;每个用户在…

【OpenCV】直方图

理论 可以将直方图视为图形或曲线图&#xff0c;从而使您对图像的强度分布有一个整体的了解。它是在X轴上具有像素值(不总是从0到255的范围)&#xff0c;在Y轴上具有图像中相应像素数的图。 这只是理解图像的另一种方式。通过查看图像的直方图&#xff0c;您可以直观地了解该…

【PlantUML系列】用例图(三)

目录 一、组成部分 二、典型案例 一、组成部分 参与者&#xff08;Actors&#xff09;&#xff1a;使用关键字 actor 后跟参与者的名称。用例&#xff08;Use Cases&#xff09;&#xff1a;使用关键字 usecase 后跟用例的名称和编号&#xff08;可选&#xff09;。系统边界…

Transformer部分知识点解释

传统Transformer 经典QKV算法 Transformer架构的优势与问题 万能模型&#xff0c;直接套用&#xff0c;代码实现简单&#xff0c;现成例子一大片并行的&#xff0c;比LSTM快&#xff0c;全局信息丰富&#xff0c;注意力机制效果好长序列中attention需要每一个点跟其他点计算(…

聚类及Python下实现 K-means 算法

聚类 聚类是无监督学习中的一种重要方法&#xff0c;旨在将数据集中相似的数据对象划分到同一个簇中&#xff0c;使得不同簇之间的数据对象差异尽可能大。在大数据环境下&#xff0c;聚类可以帮助挖掘数据中的隐藏结构和模式&#xff0c;应用场景十分广泛&#xff0c;比如在客…

LabVIEW调用Thorlabs的动态库进行开发

Thorlabs 产品在科研与生产领域中的应用广泛&#xff0c;当需要基于LabVIEW 进行二次开发时&#xff0c;可按照以下方法操作&#xff0c;以充分发挥设备性能并满足特定的项目需求。 创建 Kinesis LabVIEW 项目文件和文件夹 更详细的说明参见附件 在 LabVIEW 的启动界面中选择…

三、Zookeeper

Zookeeper 三、Zookeeper3.1什么是zookeeper?3.2为什么需要zookeeper3.3Zookeeper基本运行流程3.4Zookeeper数据模型3.5Zookeeper主要角色3.6Zookeeper工作原理3.7Zookeeper节点数据操作流程三、Zookeeper 3.1什么是zookeeper? ZooKeeper是一个分布式的,开放源码的分布式应…

实现盘盈单自动化处理:吉客云与金蝶云星空数据对接

盘盈单103v2对接其他入库&#xff1a;吉客云数据集成到金蝶云星空 在企业信息化管理中&#xff0c;数据的高效流转和准确性至关重要。本文将分享一个实际案例&#xff0c;展示如何通过轻易云数据集成平台&#xff0c;将吉客云的数据无缝对接到金蝶云星空&#xff0c;实现盘盈单…

vue:构造结构,塞入数据:结构不变,数据改变

1. 引入vue 2. 创建页面容器&#xff0c;让vue去管理这个容器 3. 双向绑定 4. 单向绑定 5. 操作容器&#xff08;数据模型&#xff09;里的数据 5. 单向绑定的简写 6. v-if和v-else 6. v-if和v-show的区别&#xff1a; v-if要重新渲染界面&#xff0c;v-show只需要改一下元素属…

CountDownLatch阻塞后countDown未执行会如何?

背景 某项目封装了 Kafka 消费者 API&#xff0c;根据传递的消费者线程数&#xff0c;创建 N 个消费者线程同时消费对应 topic 的数据&#xff0c;并在线程启动后收集到全局列表中&#xff0c;方便在程序调用 stop 流程时逐个停止。 主控类在创建 Kafka 消费线程时使用了 Cou…

NLP与LLM的工程化实践与学习思考 - 说说知识图谱

NLP与LLM的工程化实践与学习思考[24年半年工作总结] - 说说知识图谱 0 真的就是先说说1 为什么知识图谱什么是知识图谱&#xff1f;基于图的数据结构&#xff1f;基于数据结构的图&#xff1f;知识图谱的技术要点两个技术维度&#xff1a;知识、图七个技术要点&#xff1a;表示…

【CVE-2024-5660】ARM CPU漏洞:硬件页面聚合(HPA)安全通告

安全之安全(security)博客目录导读 目录 一、概述 二、修改历史 三、什么是硬件页面聚合&#xff1f; 四、修复解决 一、概述 在一些基于arm的cpu中发现了一个问题&#xff0c;该问题可能允许修改的、不受信任的客户机操作系统&#xff08;guest OS&#xff09;危及某些H…

项目中使用AntV L7地图(五)添加飞线

项目中使用AntV L7地图&#xff0c;添加 飞线 文档地址&#xff1a;https://l7.antv.antgroup.com/zh/examples/line/animate/#trip_animate 一、初始化地图 使用的地图文件为四川地图JSON&#xff0c;下载地址:https://datav.aliyun.com/portal/school/atlas/area_selector#&…

《九重紫》逐集分析鉴赏—序言、概览、框架分析

主标题&#xff1a;《九重紫》一起追剧吧副标题&#xff1a;《九重紫》逐集分析鉴赏—序言、概览、框架分析《永夜星河》后&#xff0c;以为要浅尝剧荒&#xff0c;一部《九重紫》突出重围。 看了宣传片感觉不是很差&#xff0c;看了部分剪辑感觉还可以&#xff0c;看了一两集感…

生成式AI概览与详解

1. 生成式AI概览&#xff1a;什么是大模型&#xff0c;大模型应用场景&#xff08;文生文&#xff0c;多模态&#xff09; 生成式AI&#xff08;Generative AI&#xff09;是指通过机器学习模型生成新的数据或内容的人工智能技术。生成式AI可以生成文本、图像、音频、视频等多种…

0001.简易酒店管理系统后台

一.系统架构 springmvcjsplayuimysql 二.功能特性 简单易学习&#xff0c;虽然版本比较老但是部署方便&#xff0c;tomcat环境即可启用&#xff1b;代码简洁&#xff0c;前后端代码提供可统一学习&#xff1b;祝愿您能成尽快为一位合格的程序员&#xff0c;愿世界没有BUG; …

STM32软件IIC驱动TCA9548A多路测量AHT10

STM32软件IIC驱动TCA9548多路测量AHT10 TCA9548AAHT10代码逻辑代码展示现象总结 TCA9548A TCA9548A 有八个可通过 I2C 总线控制的双向转换开关&#xff0c;SCL/SDA 上行对扩展到八个下行对&#xff0c;或者通道&#xff0c;适用于系统中存在I2C目标地址冲突的情况。8路双向转换…

信奥赛CSP-J复赛集训(dfs专题)(15):洛谷P8838:[传智杯 #3 决赛] 面试

信奥赛CSP-J复赛集训(dfs专题-刷题题单及题解)(15):洛谷P8838:[传智杯 #3 决赛] 面试 题目背景 disangan233 和 disangan333 去面试了,面试官给了一个问题,热心的你能帮帮他们吗? 题目描述 现在有 n n n 个服务器,服务器