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

Vue框架学习笔记——Vue实例中el和data的两种写法

news 2026/4/24 5:34:15

文章目录

  • 前文提要
  • Vue实例的el
    • 第一种写法
    • 第二种写法
    • 小结
  • Vue实例中data
    • 第一种写法，对象式
    • 效果图片
    • 第二种写法，函数式
    • 效果图片
    • 小结

前文提要

本文仅做自己的学习记录，如有错误，请多谅解

Vue实例的el

第一种写法

<body><div id="box"><h1>你好，{{name}}</h1></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#box',data: {name: "这里是name的值",}})// vm.$mount('#box')</script>
</body>

第二种写法

<body><div id="box"><h1>你好，{{name}}</h1></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({// el: '#box',data: {name: "这里是name的值",}})vm.$mount('#box')</script>
</body>

vm代表的是Vue实例，后面加上’$mount’，'mount’带有绑定的意思，再加上id选择器字符串

小结

对于el来说，两种写法都行，但是第二种更常用。使用不变量记录Vue实例后，第二种写法可以更加自由地添加属性，将其塞入其他的函数中实现动态添加属性也行。

Vue实例中data

第一种写法，对象式

<body><div id="box"><h1>你好，{{name}}</h1></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#box',data: {name: "对象式，这里是name的值",}})</script>
</body>

效果图片

在这里插入图片描述

data使用大括号就是对象式的写法

第二种写法，函数式

<body><div id="box"><h1>你好，{{name}}</h1></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#box',// data: {//   name: "对象式，这里是name的值",// }data:function(){return {name:"函数式，这里是name的值",}}})</script>
</body>

效果图片

在这里插入图片描述

data后面不接大括号，而是接入一个函数，函数内的返回值中的数据就相当于之前对象式中写的数据，能够通过返回的name获取到它的数值。

小结

由Vue管理的函数不能写成箭头函数，也就是写成函数式的data的函数，一旦写成了箭头函数，函数中this指定的就不是Vue实例，而是全局的window。

之后学习Vue，学习到组件时候，data就必须使用函数式的写法。

至此，结束。

如果你觉得这篇文章写的不错，多多点赞~收藏吧！

相关文章：

Vue框架学习笔记——Vue实例中el和data的两种写法

文章目录 前文提要Vue实例的el第一种写法第二种写法小结 Vue实例中data第一种写法&#xff0c;对象式效果图片第二种写法&#xff0c;函数式效果图片小结 前文提要 本文仅做自己的学习记录&#xff0c;如有错误&#xff0c;请多谅解 Vue实例的el 第一种写法 <body><…...

编程日记 2023/11/25 1:32:53

libbz2 for Mac OS makefile

git地址&#xff1a;git://sourceware.org/git/bzip2.git a文件Makefile # ------------------------------------------------------------------ # This file is part of bzip2/libbzip2, a program and library for # lossless, block-sorting data compression. # # bzip…...

编程日记 2023/11/25 1:31:52

测试工具JMeter的使用

目录 JMeter的安装配置 测试的性能指标 TPS 响应时长 并发连接 和 并发用户 CPU/内存/磁盘/网络 负载 性能测试实战流程 JMeter JMeter快速上手 GUI模式 运行 HTTP请求默认值 录制网站流量 模拟间隔时间 Cookie管理器 消息数据关联 变量 后置处理器 CSV 数据文…...

编程日记 2023/11/25 1:30:52

C++编程——输入

#include<bits/stdc.h> using namespace std; int main(){//beginint a 0, b 0, c 0, d 0, e 0;char f1, f2;char g[30];scanf("%d", &a); //输入整数并赋值给变量ascanf("%d", &b); //输入整数并赋值给变量bscanf("%d", &…...

编程日记 2023/11/25 1:29:51

opencv-直方图

直方图是一种对图像亮度分布的统计表示&#xff0c;它显示了图像中每个灰度级别的像素数量。在OpenCV中&#xff0c;你可以使用cv2.calcHist() 函数计算直方图。 以下是一个简单的示例&#xff0c;演示如何计算和绘制图像的直方图&#xff1a; import cv2 import numpy as np …...

编程日记 2023/11/25 1:28:50

el-table表格排序(需要后端判别)，el-table导出功能(向后端发送请求)

&#xff08;1&#xff09;表格排序 &#xff08;2&#xff09;简单的table导出功能&#xff08;需要后台支撑&#xff09;必须要有iframe &#xff08;3&#xff09;页面所有代码&#xff1a; <template><div class"mainContainer"><el-form:model&…...

编程日记 2023/11/25 1:27:49

【MATLAB】全网入门快、免费获取、持续更新的科研绘图教程系列2

14 【MATLAB】科研绘图第十四期表示散点分布的双柱状双Y轴统计图 %% 表示散点分布的双柱状双Y轴统计图%% Made by Lwcah &#xff08;公众号&#xff1a;Lwcah&#xff09; %% 公众号&#xff1a;Lwcah %% 知乎、B站、小红书、抖音同名账号:Lwcah&#xff0c;感谢关注~ %% 更多…...

编程日记 2023/11/25 1:26:48

git与ssh多账户共存

git与ssh多账户共存 前言git多账户ssh多公钥参考 前言 在使用git与ssh时&#xff0c;经常会遇到多个账户共存的情况 例如使用不同的公钥登陆到不同的服务&#xff1b;使用不同的git信息进行commit git多账户 在默认情况下 git的信息存在 ~/.gitconfig 可以使用命令查看 git…...

编程日记 2023/11/25 1:25:47

BLE协议栈入门学习

蓝牙LE栈 物理层 频带 蓝牙LE在2400MHz到2483.5MHz范围内的2.4GHz免授权频段工作&#xff0c;该频段分为40个信道&#xff0c;每个信道间隔为2MHz。 时分 蓝牙LE是半双工的&#xff0c;可以发送和接收&#xff0c;但不能同时发送和接收&#xff0c;然而&#xff0c;所有的设…...

编程日记 2023/11/25 1:24:45

【反射】简述反射的构造方法，成员变量成员方法

&#x1f38a;专栏【JavaSE】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 &#x1f970;欢迎并且感谢大家指出我的问题 文章目录 &#x1f384;什么是反射&#x1f384;获取class对象的三种方式⭐代码实现 &#x1f3…...

编程日记 2023/11/25 1:21:41

acwing算法基础之数学知识--求卡特兰数

目录 1 基础知识2 模板3 工程化 1 基础知识 题目&#xff1a;给定n个0和n个1&#xff0c;它们将按照某种顺序排成长度为2n的序列&#xff0c;求它们能排成的所有序列中&#xff0c;能够满足任意前缀序列中0的个数都不少于1的个数的序列有多少个&#xff1f; 输出的答案对 1 0 …...

编程日记 2023/11/25 1:20:39

《洛谷深入浅出基础篇》P4017最大食物链————拓扑排序

上链接&#xff1a;P4017 最大食物链计数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P4017 上题干&#xff1a; 题目背景 你知道食物链吗&#xff1f;Delia 生物考试的时候&#xff0c;数食物链条数的题目全都错了&#xff0c;因为她总是…...

编程日记 2023/11/25 1:19:39

设置定时自动请求测试_自动定时循环发送http_post请求---postman工作笔记001

其实就是创建接口文件夹的时候,有个monitor collection 用来监听接口执行情况,这里就可以设置 可以看到多久执行一次对吧,这里可以设置每几分钟执行一次,一共执行多少次等等 但是这里要说明一下,如果需要使用monitor功能,必须需要登录, 所以如果这里点击monitor collection…...

编程日记 2023/11/25 1:18:35

Vue3封装全局插件

定义一个全局加载组件 一、首先定义dom元素 定义一个index.vue文件 <template><div class"loading">loading...</div> </template> <script setup lang"ts"></script> <style scoped> .loading {display: fl…...

编程日记 2023/11/25 1:16:33

【Python 训练营】N_6 求素数

题目 判断101-200之间有多少个素数&#xff0c;并输出所有素数。 分析 判断素数的方法&#xff1a;用一个数分别去除2到sqrt(这个数)&#xff0c;如果能被整除&#xff0c;则表明此数不是素数&#xff0c;反之是素数。 答案 h 0 leap 1 from math import sqrt from sys …...

编程日记 2023/11/25 1:15:32

【图论】关键路径求法c++

代码结构如下图&#xff1a; 其中topologicalSort(float**, int, int*, bool*, int, int)用来递归求解拓扑排序&#xff0c;topologicalSort(float**, int*&, int, int, int)传参图的邻接矩阵mat与结点个数n&#xff0c;与一个引用变量数组topo&#xff0c;返回一个布尔值…...

编程日记 2023/11/25 1:14:31

基于51单片机电子钟万年历LCD1602显示

51单片机的电子钟万年历LCD1602显示 &#x1f534; &#x1f535;51单片机的电子钟万年历LCD1602显示&#x1f534; &#x1f535;主要功能&#xff1a;&#x1f534; &#x1f535;讲解视频&#x1f534; &#x1f535;仿真图&#xff1a;&#x1f534; &#x1f535;程序&…...

编程日记 2023/11/25 1:13:29

时间复杂度和运算

时间复杂度 在算法和数据结构中&#xff0c;有许多时间复杂度比 O(1) 更差的情况。以下是一些常见的时间复杂度&#xff0c;按照从最优到最差的顺序排列&#xff1a; O(1)&#xff1a; 常数时间复杂度&#xff0c;操作的运行时间与输入规模无关&#xff0c;是最理想的情况。 O…...

编程日记 2023/11/25 1:12:28

深入Tailwind CSS中的文本样式

深入Tailwind CSS中的文本样式 样式文本是网页设计的一个基本组成部分&#xff0c;而 Tailwind CSS 提供了范围广泛的实用类&#xff0c;使文本样式设计既高效又有效。 在本本中&#xff0c;我们将探索文本样式的常见最佳实践,讨论潜在的陷阱&#xff0c;并推荐设计方法。我们…...

编程日记 2023/11/25 1:11:26

系统优化软件Bitsum Process Lasso Pro v12.4，供大家学习研究参考

1、自动或手动调整进程优先级;将不需要抑制的进程添加到排除列表; 2、设置动态提升前台运行的进程/线程的优先级 3、设置进程黑名单，禁止无用进程（机制为启动即结束，而非拦截其启动）。 4、优化I/O优先级以及电源模式自动化。 5、ProBalance功能。翻译成中文是“进程平衡…...

编程日记 2023/11/25 1:10:25

AI加速器架构解析：从GPU到存内计算的技术演进

1. AI加速器的技术演进背景人工智能计算正面临前所未有的算力需求挑战。现代大型语言模型&#xff08;LLM&#xff09;的参数规模已经突破万亿级别&#xff0c;训练这样的模型需要数千块GPU连续工作数月&#xff0c;消耗数百万美元的计算资源。这种指数级增长的计算需求直接推动…...

编程新知 2026/4/24 4:33:09

告别数据丢失风险：Dokploy数据库备份管理优化全指南

告别数据丢失风险&#xff1a;Dokploy数据库备份管理优化全指南 【免费下载链接】dokploy Open Source Alternative to Vercel, Netlify and Heroku. 项目地址: https://gitcode.com/GitHub_Trending/do/dokploy Dokploy作为开源的Vercel、Netlify和Heroku替代方案&…...

编程新知 2026/4/24 3:49:54

免费AI图像放大终极指南：Upscayl如何让低分辨率图片秒变高清

免费AI图像放大终极指南&#xff1a;Upscayl如何让低分辨率图片秒变高清 【免费下载链接】upscayl &#x1f199; Upscayl - #1 Free and Open Source AI Image Upscaler for Linux, MacOS and Windows. 项目地址: https://gitcode.com/GitHub_Trending/up/upscayl Upsc…...

编程新知 2026/4/24 3:35:08

聚宽落幕，QMT接棒：一个量化交易者的平台迁移实战

1. 聚宽落幕背后的技术迁移挑战 去年年底聚宽与一创终止合作的消息&#xff0c;在量化圈里炸开了锅。作为一个从2017年就开始用聚宽的老用户&#xff0c;我清楚地记得那天晚上在调试策略时突然弹出的公告弹窗。当时第一反应是&#xff1a;我的几十个实盘策略怎么办&#xff1f;…...

编程新知 2026/4/24 3:14:49

【实战】工程造价从业者如何快速搭建AI辅助系统（附DMXAPI接入指南）

一、前言 本文面向有一定技术基础、想快速在内部系统接入AI能力的开发者。通过一个真实项目案例&#xff0c;讲解如何借助DMXAPI实现多模型统一调用&#xff0c;同时控制开发成本。二、需求背景 维度 具体需求 业务场景 工程造价智能辅助系统 核心功能 历史清单智能分…...

编程新知 2026/4/24 2:02:42

医学图像三维重建避坑指南：为什么你的VTK模型总是扭曲或对不齐？

医学图像三维重建避坑指南&#xff1a;为什么你的VTK模型总是扭曲或对不齐&#xff1f; 当你在深夜盯着屏幕上那个扭曲变形的三维模型&#xff0c;反复检查代码却找不到原因时&#xff0c;这种挫败感我深有体会。医学图像三维重建本应是展示研究成果的利器&#xff0c;但参数设…...

编程新知 2026/4/24 1:06:08

拯救C盘爆红！Windows Cleaner：彻底告别系统卡顿的开源神器

拯救C盘爆红&#xff01;Windows Cleaner&#xff1a;彻底告别系统卡顿的开源神器 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否正在为电脑C盘爆红而烦恼…...

编程新知 2026/4/24 0:48:02

日志丢失、格式混乱、排查耗时＞2小时？27天重构Docker日志架构，实现100%可追溯、零盲区监控

第一章&#xff1a;Docker日志架构重构的痛点与目标在大规模容器化生产环境中&#xff0c;Docker默认的日志驱动&#xff08;json-file&#xff09;暴露出显著瓶颈&#xff1a;日志文件无自动轮转、磁盘空间不可控、多容器日志检索低效、缺乏结构化字段支持&#xff0c;且无法与…...

编程新知 2026/4/24 0:27:33

大语言模型提示词优化：避免膨胀提升输出质量

1. 大语言模型提示词膨胀对输出质量的影响剖析在构建基于大语言模型(LLM)的应用系统时&#xff0c;我们常常陷入一个误区&#xff1a;认为给模型的提示词(prompt)越长、包含的信息越多&#xff0c;输出结果就会越精准。但实际工程实践中&#xff0c;我发现情况恰恰相反——过度…...

编程新知 2026/4/23 23:37:26

用YOLOv5s训练自己的FPS游戏数据集：从截图标注到模型部署的完整避坑指南

YOLOv5实战&#xff1a;从零构建FPS游戏目标检测模型的完整技术手册 在游戏开发与计算机视觉的交叉领域&#xff0c;目标检测技术正掀起一场革命。想象一下&#xff0c;当你沉浸在FPS游戏的激烈对抗中&#xff0c;是否曾好奇AI如何识别屏幕上的敌人、武器和道具&#xff1f;本文…...

编程新知 2026/4/23 23:24:37