当前位置： 首页 > news >正文

Vue.createApp的对象参数

news 2026/2/8 16:01:12

目录

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 中定义的方法不能使用箭头函数。

相关文章：

Vue.createApp的对象参数

目录 template 属性 data 属性 methods 属性 疑问 function 函数的两种写法 methods 属性中 this 的指向 总结 Vue 实例是通过 Vue.createApp() 创建的&#xff0c;该函数需要接收一个对象作为参数&#xff0c;该对象可添加 template、data、methods 等属性。 template …...

编程日记 2024/12/13 8:00:18

短信验证码burp姿势

首先声明&#xff0c;本文仅仅作为学习使用&#xff0c;因个人原因导致的后果&#xff0c;皆有个人承担&#xff0c;本人没有任何责任。 在之前的burp学习中&#xff0c;我们学习了图片验证码的突破&#xff0c;但是现实中还有很多短信验证码&#xff0c;在此我介绍几种短信验…...

编程日记 2024/12/13 7:54:12

ubuntu WPS安装

需要进入国外官网下载 [OFFICIAL] WPS Office-Free Office Download for PC & Mobile, AI-Powered Office Suite 安装 sudo dpkg -i wps-office_11.1.0.11723.XA_amd64.deb 提示缺失字体操作 下载字体包 链接: https://pan.baidu.com/s/1EVzb3F8Ry_dJ_hj0A4MksQ 提取…...

编程日记 2024/12/13 7:52:10

中粮凤凰里共有产权看房记

中粮凤凰里看房是希望而来&#xff0c;失望而归。主要是对如下失望&#xff0c;下述仅个人看房感受&#xff1a; 1. 户型不喜欢&#xff1a;三房的厨房和餐厅位置很奇葩 2. 样板间在25楼&#xff1a;湖景一言难尽和有工厂噪声 3. 精装修的交房质量:阳台的推拉门用料很草率 …...

编程日记 2024/12/13 7:49:07

学习笔记068——Hibernate框架介绍以及使用方法

文章目录 一、如何使用二、具体操作1、创建 Maven 工程&#xff0c;pom.xml2、hibernate.cfg.xml3、创建实体类4、创建实体关系映射文件5、实体关系映射文件注册到 Hibernate 的配置文件中。6、使用 Hibernate API 完成数据操作。7、pom.xml 中需要配置 resource 三、Hibernate…...

编程日记 2024/12/13 7:48:06

Maven 安装配置（详细教程）

文章目录 一、Maven 简介二、下载 Maven三、配置 Maven3.1 配置环境变量3.2 Maven 配置3.3 IDEA 配置 四、结语 一、Maven 简介 Maven 是一个基于项目对象模型&#xff08;POM&#xff09;的项目管理和自动化构建工具。它主要服务于 Java 平台&#xff0c;但也支持其他编程语言…...

编程日记 2024/12/13 7:45:58

虚幻开发中的MYPROJECTFORPLUG_API

百度网盘-免费云盘丨文件共享软件丨超大容量丨存储安全 在虚幻引擎5&#xff08;Unreal Engine 5&#xff09;中&#xff0c;以及许多其他使用C的项目中&#xff0c;__declspec(dllexport) 和 __declspec(dllimport) 是用来处理动态链接库&#xff08;DLL&#xff09;的宏定义…...

编程日记 2024/12/13 7:44:56

顺序栈及其实现过程

目录 一、概念 二、顺序栈 2.1顺序栈的结构模型 2.2顺序栈的实现 2.2.1创建 2.2.2判断栈是否为空 2.2.3判断栈是否为空 2.2.4入栈 2.2.5出栈 2.2.6查看栈顶 2.2.7清空栈 2.2.8释放栈 一、概念 栈是限制在某一端进行插入、删除操作的线性表&#xff0c;俗称堆栈&…...

编程日记 2024/12/13 7:42:53

内圆弧转子泵绘制工具开发

接着上期的Gerotor 泵的话题继续。最近有小伙伴找我开发一个内圆弧摆线泵的计算绘制工具&#xff0c;也就是把上次计算绘制的过程做成一个桌面应用工具&#xff0c;这样用起来会更方便、效率更高。那究竟是什么样的工具呢&#xff1f;一起来看看&#xff1a; 前面不是已经有了上…...

编程日记 2024/12/13 7:41:52

linux网络编程 | c | 多进程并发服务器实现

多进程并发服务器 基于该视频完成 11-多进程并发服务器思路分析_哔哩哔哩_bilibili 通过的是非阻塞忙轮询的方式实现的 和阻塞等待的区别就是&#xff0c;阻塞是真的阻塞了&#xff0c;而这个方式是一直在问有没有请求有没有请求 文章目录 多进程并发服务器1.核心思路&…...

编程日记 2024/12/13 7:39:50

Vins_Fusion_gpu中source setup.bash

文章目录 source setup.bashsetup.bashsetup.sh脚本的主要功能脚本的详细解释1. **初始化和检查**2. **检测操作系统**3. **设置环境变量**4. **记住 shell 类型**5. **调用 Python 脚本生成环境变量**6. **加载环境钩子**7. **清理** 总结 _setup_util.py_setup_util.py 的完整…...

编程日记 2024/12/13 7:38:49

怎么理解大模型推理时的Top_P参数？

本篇博客介绍一下大模型推理时的Top_P参数&#xff0c;Top_P与Top_K&#xff0c;Beamsearch&#xff0c;temperature 都是什么关系以及该如何选择Top_P参数。 文章目录 一、什么是Top_P参数&#xff1f;二、工作原理三、top_p和top_k是什么关系&#xff1f;四、Top_P和BeamSea…...

编程日记 2024/12/13 7:35:47

hive+hadoop架构数仓使用问题记录

使用问题记录 问题1&#xff1a;5条数据的表执行count(*)函数&#xff0c;很慢&#xff0c;43s才出结果&#xff1f; 该数仓的分析计算是基于hadoop的mapreduce分布式计算框架运行的&#xff0c;适用于大量/海量数据&#xff0c;少量数据&#xff0c;还是使用单体数据库快。也…...

编程日记 2024/12/13 7:28:38

前端的 Python 入门指南（三）：数据类型对比 - 彻底的一切皆对象实现和包装对象异同

《前端的 Python 入门指南》系列文章&#xff1a; &#xff08;一&#xff09;&#xff1a;常用语法和关键字对比&#xff08;二&#xff09;&#xff1a;函数的定义、参数、作用域对比&#xff08;三&#xff09;&#xff1a;数据类型对比 - 彻底的一切皆对象实现和包装对象异…...

编程日记 2024/12/13 7:27:36

Axios结合Typescript 二次封装完整详细场景使用案例

Axios 是一个基于 promise 的 HTTP 客户端&#xff0c;用于浏览器和 node.js。二次封装 Axios 主要是为了统一管理 HTTP 请求&#xff0c;例如设置统一的请求前缀、头部、超时时间&#xff0c;统一处理请求和响应的格式&#xff0c;以及错误处理等。 以下是一个使用 TypeScrip…...

编程日记 2024/12/13 7:26:33

基于Kubesphere实现微服务的CI/CD——部署微服务项目(三)

目录 一、kubesphere安装 1、安装本地持久存储 1.1、default-storage-class.yaml 1.2、 openebs-operator.yaml 1.3、安装 Default StorageClass 2、安装kubesphere 2.1、安装Helm 2.2、安装kubesphere 二、配置kubesphere 1、安装插件 2、创建devops项目 3、配置…...

编程日记 2024/12/13 7:23:30

【使用webrtc-streamer解析rtsp视频流】

webrtc-streamer WebRTC (Web Real-Time Communications) 是一项实时通讯技术&#xff0c;它允许网络应用或者站点&#xff0c;在不借助中间媒介的情况下&#xff0c;建立浏览器之间点对点&#xff08;Peer-to-Peer&#xff09;的连接&#xff0c;实现视频流和&#xff08;或&a…...

编程日记 2024/12/13 7:19:26

element左侧导航栏

由element组件搭建的左侧导航栏 预览: html代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>首页</title><style> /*<!-- 调整页面背景颜色-->*/body{background-colo…...

编程日记 2024/12/13 7:18:23

【金融贷后】贷后运营精细化管理

文章目录 一、贷后专业术语讲解① 什么是贷后&#xff0c;贷后部是干什么的&#xff1f;② 贷后部门常见组织架构&#xff1f;③ 贷后专业术语有哪些&#xff1f; 二、贷后常用作业手段介绍① 贷后产品形态介绍&#xff1f;② 催收常用的方法&#xff1f; 三、贷后策略岗位介绍…...

编程日记 2024/12/13 7:15:20

学习CSS第七天

学习文章目录 一.交集选择器 一.交集选择器 使用多个条件符合的元素&#xff0c;可提高区分的精准度 元素配合类名是使用场景最多的 &#xff08;元素必须是第一位&#xff0c;ID一般不写&#xff09; <!DOCTYPE html> <html lang"zh-CN"> <head>…...

编程日记 2024/12/13 7:13:15

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2026/2/8 4:37:10

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/1/24 14:23:08

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2026/1/28 15:17:32

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/28 9:04:29

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2026/2/5 3:09:56

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/12/12 6:01:17

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21