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

Vue.createApp的对象参数

news 2026/2/11 0:53:16

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() 创建的，该函数需要接收一个对象作为参数，该对象可添加 template、data、methods 等属性。 template …...

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

短信验证码burp姿势

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

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

需要进入国外官网下载 [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

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

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

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

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

文章目录一、如何使用二、具体操作1、创建 Maven 工程，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 是一个基于项目对象模型（POM）的项目管理和自动化构建工具。它主要服务于 Java 平台，但也支持其他编程语言…...

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

虚幻开发中的MYPROJECTFORPLUG_API

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

编程日记 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释放栈一、概念栈是限制在某一端进行插入、删除操作的线性表，俗称堆栈&…...

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

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

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

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

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

多进程并发服务器基于该视频完成 11-多进程并发服务器思路分析_哔哩哔哩_bilibili 通过的是非阻塞忙轮询的方式实现的和阻塞等待的区别就是，阻塞是真的阻塞了，而这个方式是一直在问有没有请求有没有请求文章目录多进程并发服务器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参数，Top_P与Top_K，Beamsearch，temperature 都是什么关系以及该如何选择Top_P参数。文章目录一、什么是Top_P参数？二、工作原理三、top_p和top_k是什么关系？四、Top_P和BeamSea…...

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

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

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

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

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

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

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

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

Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。二次封装 Axios 主要是为了统一管理 HTTP 请求，例如设置统一的请求前缀、头部、超时时间，统一处理请求和响应的格式，以及错误处理等。以下是一个使用 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) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或&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

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

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

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

学习CSS第七天

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

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

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/8 20:42:55

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程新知 2026/2/8 20:41:53

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现数据库设置 2个db_recovery参数创建guarantee闪回点，不需要开启数据库闪回。…...

编程新知 2026/1/14 22:12:47

java 实现excel文件转pdf | 无水印 | 无限制

文章目录目录文章目录前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件总结前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37