Vue框架学习笔记——Vue实例中el和data的两种写法
文章目录
- 前文提要
- 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第一种写法，对象式效果图片第二种写法，函数式效果图片小结 前文提要 本文仅做自己的学习记录，如有错误，请多谅解 Vue实例的el 第一种写法 <body><…...
libbz2 for Mac OS makefile
git地址：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…...
测试工具JMeter的使用
目录 JMeter的安装配置 测试的性能指标 TPS 响应时长 并发连接 和 并发用户 CPU/内存/磁盘/网络 负载 性能测试实战流程 JMeter JMeter快速上手 GUI模式 运行 HTTP请求默认值 录制网站流量 模拟间隔时间 Cookie管理器 消息数据关联 变量 后置处理器 CSV 数据文…...
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", &…...
opencv-直方图
直方图是一种对图像亮度分布的统计表示，它显示了图像中每个灰度级别的像素数量。在OpenCV中，你可以使用cv2.calcHist() 函数计算直方图。 以下是一个简单的示例，演示如何计算和绘制图像的直方图： import cv2 import numpy as np …...
el-table表格排序(需要后端判别)，el-table导出功能(向后端发送请求)
（1）表格排序 （2）简单的table导出功能（需要后台支撑）必须要有iframe （3）页面所有代码： <template><div class"mainContainer"><el-form:model&…...
【MATLAB】全网入门快、免费获取、持续更新的科研绘图教程系列2
14 【MATLAB】科研绘图第十四期表示散点分布的双柱状双Y轴统计图 %% 表示散点分布的双柱状双Y轴统计图%% Made by Lwcah （公众号：Lwcah） %% 公众号：Lwcah %% 知乎、B站、小红书、抖音同名账号:Lwcah，感谢关注~ %% 更多…...
git与ssh多账户共存
git与ssh多账户共存 前言git多账户ssh多公钥参考 前言 在使用git与ssh时，经常会遇到多个账户共存的情况 例如使用不同的公钥登陆到不同的服务；使用不同的git信息进行commit git多账户 在默认情况下 git的信息存在 ~/.gitconfig 可以使用命令查看 git…...
BLE协议栈入门学习
蓝牙LE栈 物理层 频带 蓝牙LE在2400MHz到2483.5MHz范围内的2.4GHz免授权频段工作，该频段分为40个信道，每个信道间隔为2MHz。 时分 蓝牙LE是半双工的，可以发送和接收，但不能同时发送和接收，然而，所有的设…...
【反射】简述反射的构造方法，成员变量成员方法
🎊专栏【JavaSE】 🍔喜欢的诗句：更喜岷山千里雪 三军过后尽开颜。 🎆音乐分享【如愿】 🥰欢迎并且感谢大家指出我的问题 文章目录 🎄什么是反射🎄获取class对象的三种方式⭐代码实现 dz…...
acwing算法基础之数学知识--求卡特兰数
目录 1 基础知识2 模板3 工程化 1 基础知识 题目：给定n个0和n个1，它们将按照某种顺序排成长度为2n的序列，求它们能排成的所有序列中，能够满足任意前缀序列中0的个数都不少于1的个数的序列有多少个？ 输出的答案对 1 0 …...
《洛谷深入浅出基础篇》P4017最大食物链————拓扑排序
上链接：P4017 最大食物链计数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P4017 上题干： 题目背景 你知道食物链吗？Delia 生物考试的时候，数食物链条数的题目全都错了，因为她总是…...
设置定时自动请求测试_自动定时循环发送http_post请求---postman工作笔记001
其实就是创建接口文件夹的时候,有个monitor collection 用来监听接口执行情况,这里就可以设置 可以看到多久执行一次对吧,这里可以设置每几分钟执行一次,一共执行多少次等等 但是这里要说明一下,如果需要使用monitor功能,必须需要登录, 所以如果这里点击monitor collection…...
Vue3封装全局插件
定义一个全局加载组件 一、首先定义dom元素 定义一个index.vue文件 <template><div class"loading">loading...</div> </template> <script setup lang"ts"></script> <style scoped> .loading {display: fl…...
【Python 训练营】N_6 求素数
题目 判断101-200之间有多少个素数，并输出所有素数。 分析 判断素数的方法：用一个数分别去除2到sqrt(这个数)，如果能被整除，则表明此数不是素数，反之是素数。 答案 h 0 leap 1 from math import sqrt from sys …...
【图论】关键路径求法c++
代码结构如下图： 其中topologicalSort(float**, int, int*, bool*, int, int)用来递归求解拓扑排序，topologicalSort(float**, int*&, int, int, int)传参图的邻接矩阵mat与结点个数n，与一个引用变量数组topo，返回一个布尔值…...
基于51单片机电子钟万年历LCD1602显示
51单片机的电子钟万年历LCD1602显示 🔴 🔵51单片机的电子钟万年历LCD1602显示🔴 🔵主要功能：🔴 🔵讲解视频🔴 🔵仿真图：🔴 🔵程序&…...
时间复杂度和运算
时间复杂度 在算法和数据结构中，有许多时间复杂度比 O(1) 更差的情况。以下是一些常见的时间复杂度，按照从最优到最差的顺序排列： O(1)： 常数时间复杂度，操作的运行时间与输入规模无关，是最理想的情况。 O…...
深入Tailwind CSS中的文本样式
深入Tailwind CSS中的文本样式 样式文本是网页设计的一个基本组成部分，而 Tailwind CSS 提供了范围广泛的实用类，使文本样式设计既高效又有效。 在本本中，我们将探索文本样式的常见最佳实践,讨论潜在的陷阱，并推荐设计方法。我们…...
系统优化软件Bitsum Process Lasso Pro v12.4，供大家学习研究参考
1、自动或手动调整进程优先级;将不需要抑制的进程添加到排除列表; 2、设置动态提升前台运行的进程/线程的优先级 3、设置进程黑名单，禁止无用进程（机制为启动即结束，而非拦截其启动）。 4、优化I/O优先级以及电源模式自动化。 5、ProBalance功能。翻译成中文是“进程平衡…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
SpringTask-03.入门案例
一.入门案例 启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
)
OpenLayers 分屏对比(地图联动)
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...
【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...
基于Java+VUE+MariaDB实现（Web）仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...
毫米波雷达基础理论（3D+4D）
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...