2025/1/20 学习Vue的第三天
玩性太大了玩得也不开心,天天看电视刷视频。
内心实在空洞。= =最近天天看小红书上的外国人,结实外国友人(狗头)哈哈哈认识了不少人,有埃及的有美国的,还有天天看菲利普吃糖葫芦哈哈哈哈哈一个阳光的德国大男孩,给人感觉特别热爱生活。好喜欢。、也好想和他一样阳光开朗。
每天都要打八段锦打卡到梦空间。每天都要学习。要早睡早起才可以。
▶ 我看过
---------------------------------------------------------------------------------------------------------------------------------
08.数据绑定
数据有两种绑定方式:单向绑定和双向绑定
双向绑定指的是,能够通过对屏幕上的输入改变后台的值。
而单向绑定只能通过后台改变屏幕的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../JS/vue.js"></script>
</head>
<body><div id="root">单向数据绑定:<input type="text" v-bind:value="name"><br>双向数据绑定:<input type="text" v-model:value="name"><!-- 这样写是错误的适合双向绑定的标签有单选框多选框输入框 能够在页面进行标签--><h1 v-model:value:x="name">喜羊羊</h1></div>
</body>
<script type="text/javascript"> new Vue({el:'#root',data:{name:'尚硅谷'}})
</script>
</html>

09.el与data 的两种写法
由于我们之后会步入组件化的学习,所以先提前给我们交代写法。
第一种方式是我们之前学习的默认模板
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>el和data的两种写法</title><script src="../JS/vue.js"></script>
</head>
<body><div id="root"><h1>你好,{{name}}</h1></div><script>new Vue({el:'#root',data:{name:'尚硅谷'}})</script>
</body>
</html>
第二种写法:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>el和data的两种写法</title><script src="../JS/vue.js"></script> </head> <body><div id="root"><h1>你好,{{name}}</h1></div><script>const v= new Vue({// 第一种写法// el:'#root',// data:{// }// 第二种写法data(){return{name:'尚硅谷' }}})v.$mount('#root')</script> </body> </html>
10.理解MVVM
Vue虽然没有完全遵循MVVM模型,但是Vue的设计也受到了它的启发。
因此在文档中会使用vm去对应实例
M:model(模型) 对应data中的数据
V:view(视图) :模板
VM:视图模型(ViewModel):Vue实例对象
我感觉这里的话,面试可能会提问,因为感觉上是一个很经典的问题哈哈哈(狗头)。
比如会问你,MVVM是什么?
我们可以首先回答英文缩写分别是什么,之后再引入一个Vue实例进行阐述。

vm里有的,都可以通过出现在视图里。
data都可以出现在VM 里。
V通常就是HTML代码,也就是老师说到的模板代码
M就是Vue下面的data数据
VM就是Vue实例
相关文章:
2025/1/20 学习Vue的第三天
玩性太大了玩得也不开心,天天看电视刷视频。 内心实在空洞。 最近天天看小红书上的外国人,结实外国友人(狗头)哈哈哈认识了不少人,有埃及的有美国的,还有天天看菲利普吃糖葫芦哈哈哈哈哈一个阳光的德国大男…...
Kotlin Bytedeco OpenCV 图像图像49 仿射变换 图像裁剪
Kotlin Bytedeco OpenCV 图像图像49 仿射变换 图像裁剪 1 添加依赖2 测试代码3 测试结果 在OpenCV中,仿射变换(Affine Transformation)和透视变换(Perspective Transformation)是两种常用的图像几何变换方法。 变换方…...
金融项目实战 07|Python实现接口自动化——连接数据库和数据清洗、测试报告、持续集成
目录 一、投资模块(投资接口投资业务) 二、连接数据库封装 和 清洗数据 1、连接数据库 2、数据清洗 4、调用 三、批量执行测试用例 并 生成测试报告 四、持续集成 1、代码上传gitee 2、Jenkin持续集成 一、投资模块(投资接口投资业务…...
(快速入门)保姆级详细的 Midjourney 基础教程
一、前言篇 1. 1. AI 绘图是什么? AI 绘画,顾名思义就是利用人工智能进行绘画,是人工智能生成内容(AIGC)的一个应用场景。其主要原理简单来说就是收集大量已有作品数据,通过算法对它们进行解析,最后再生成新作品,而算法也便是 AI 绘画的核心,是它得以爆火的基础…...
leetcode——找到字符串中所有字母异位词(java)
给定两个字符串 s 和 p,找到 s 中所有 p 的 异位词 的子串,返回这些子串的起始索引。不考虑答案输出的顺序。 示例 1: 输入: s "cbaebabacd", p "abc" 输出: [0,6] 解释: 起始索引等于 0 的子串是 "cba", 它是 "…...
大文件上传服务-后端V1V2
文章目录 大文件上传概述:minio分布式文件存储使用的一些技术校验MD5的逻辑 uploadV1 版本 1uploadv2 版本 2 大文件上传概述: 之前项目做了一个文件上传的功能,最近看到有面试会具体的问这个上传功能的细节,把之前做的项目拿过来总结一下,自己写的一个…...
Single-Model and Any-Modality for Video Object Tracking——2024——cvpr-阅读笔记
Single-Model and Any-Modality for Video Object Tracking 摘要相关工作创新处MethodShared embeddingModal promptingRGB Tracker based on TransformerOverall ExperiimentDatasetRGB-D samples are sourced from DepthTrackRGB-T samples are extracted from LasHeRRGB-E s…...
阳振坤:AI 大模型的基础是数据,AI越发达,数据库价值越大
2024年1月12日,第四届OceanBase数据库大赛决赛在北京圆满落幕。在大赛的颁奖典礼上,OceanBase 首席科学家阳振坤老师为同学们献上了一场主题为“爱上数据库”的公开课,他不仅分享了个人的成长历程,还阐述了对数据库行业现状与未来…...
Linux磁盘空间不足,12个详细的排查方法
在Linux系统运维过程中,磁盘空间不足是一个常见且棘手的问题。当磁盘空间被占满时,系统的正常运行会受到影响,甚至可能导致服务中断。因此,迅速有效地排查和解决磁盘空间问题显得尤为重要。本文将详细介绍16个排查Linux磁盘空间问…...
Spring Web MVC综合案例
承接上篇文章——Spring Web MVC探秘,在了解Spring Web MVC背后的工作机制之后,我们接下来通过三个实战项目,来进一步巩固一下前面的知识。 一、计算器 效果展示:访问路径:http://127.0.0.1:8080/calc.html 前端代码&a…...
微软预测 AI 2025,AI Agents 重塑工作形式
1月初,微软在官网发布了2025年6大AI预测,分别是:AI模型将变得更加强大和有用、AI Agents将彻底改变工作方式、AI伴侣将支持日常生活、AI资源的利用将更高效、测试与定制是开发AI的关键以及AI将加速科学研究突破。 值得一提的是,微…...
lvgl性能调优
LV_USE_PERFORMANCE lvgl_performance 是 LVGL 提供的性能分析工具,可以帮助开发者评估和优化图形库的性能。在一些特定的版本中,lvgl_performance 是一个宏或者工具,用来分析性能瓶颈,特别是图形渲染的效率。 下面是如何使用 l…...
CSS实现实现票据效果 mask与切图方式
一、“切图”的局限性 传统的“切图”简单暴力,但往往缺少适应性。 适应性一般有两种,一是尺寸自适应,二是颜色可以自定义。 举个例子,有这样一个优惠券样式 关于这类样式实现技巧,之前在这篇文章中有详细介绍: CSS 实现优惠券的技巧 不过这里略微不一样的地方是,两个…...
STL--list(双向链表)
目录 一、list 对象创建 1、默认构造函数 2、初始化列表 3、迭代器 4、全0初始化 5、全值初始化 6、拷贝构造函数 二、list 赋值操作 1、赋值 2、assign(迭代器1,迭代器2) 3、assign(初始化列表) 4、assig…...
ZooKeeper 中的 ZAB 一致性协议与 Zookeeper 设计目的、使用场景、相关概念(数据模型、myid、事务 ID、版本、监听器、ACL、角色)
参考Zookeeper 介绍——设计目的、使用场景、相关概念(数据模型、myid、事务 ID、版本、监听器、ACL、角色) ZooKeeper 设计目的、特性、使用场景 ZooKeeper 的四个设计目标ZooKeeper 可以保证如下分布式一致性特性ZooKeeper 是一个典型的分布式数据一致…...
“深入浅出”系列之C++:(11)推荐一些C++的开源项目
1. SQLiteCpp - 简单易用的Sqlite C封装库 仓库地址:https://github.com/SRombauts/SQLiteCpp 简介:SQLiteCpp是一个对Sqlite数据库进行C封装的开源库,代码行数约2,500行。它提供了简洁易用的接口,使得在C项目中操作Sqlite数据库…...
《重生到现代之从零开始的C++生活》—— 类和对象2
类的默认成员函数 默认成员函数就是用户没有显示实现,编译器会自动生成的成员函数,一个类会默认生成6个成员函数 构造函数 构造函数时特殊的成员函数,构造函数的初始化对象 函数名与类名相同 没有返回值 对象实例化的时候胡自动调用构造…...
“UniApp的音频播放——点击视频进入空白+解决视频播放器切换视频时一直加载的问题”——video.js、video-js.css
今天,又解决了一个单子“UniApp的音频播放——点击视频进入空白解决视频播放器切换视频时一直加载的问题” 一、问题描述 在开发一个基于 video.js 的视频播放器时,用户通过上下滑动切换视频时,视频一直处于加载状态,无法正常播放…...
【Pandas】pandas Series transform
Pandas2.2 Series Function application, GroupBy & window 方法描述Series.apply()用于将一个函数应用到 Series 的每个元素或整个 SeriesSeries.agg()用于对 Series 数据进行聚合操作Series.aggregate()用于对 Series 数据进行聚合操作Series.transform()用于对 Series…...
【博客之星2024年度总评选】年度回望:我的博客之路与星光熠熠
【个人主页】Francek Chen 【人生格言】征途漫漫,惟有奋斗! 【热门专栏】大数据技术基础 | 数据仓库与数据挖掘 | Python机器学习 文章目录 前言一、个人成长与盘点(一)机缘与开端(二)收获与分享 二、年度创…...
ARMv8 HFGITR_EL2寄存器解析与虚拟化指令陷阱控制
1. AArch64 HFGITR_EL2寄存器架构解析HFGITR_EL2(Hypervisor Fine-Grained Instruction Trap Register)是ARMv8架构中专门用于指令级陷阱控制的系统寄存器,属于虚拟化扩展的重要组成部分。这个64位寄存器通过位映射机制实现对特定AArch64指令…...
基于ATmega2560与ISD1700的智能语音时钟:硬件选型、软件架构与避坑指南
1. 项目概述与核心价值去年折腾那个用ATMega328驱动三块显示屏的时钟时,我主要精力都花在了如何在320x240的TFT屏幕上把时间、日期和图标画得又准又好看上。项目在《Elektor》杂志上发表后,一位热心的读者给我提了个新想法:能不能做个会“说话…...
2026年一键生成论文工具对比实测:5款神器从选题到格式全流程护航
写论文的焦虑,是每个科研人和学生都心照不宣的“隐形压力”。选题无从下手,文献检索耗时费力,逻辑框架反复推翻,格式排版让人抓狂,查重降重更是像在和系统玩“猫鼠游戏”。2026年的AI工具早已不是过去那种“打字机”&a…...
别再手动编译了!Matlab一键调用CEC2017测试函数的完整配置指南(附30个函数调用示例)
别再手动编译了!Matlab一键调用CEC2017测试函数的完整配置指南(附30个函数调用示例) 算法研究者们常常需要借助标准测试函数来验证优化算法的性能,而CEC2017测试函数集因其复杂性和多维度的挑战性,成为评估算法鲁棒性的…...
3分钟掌握JetBrains IDE试用期重置:终极完整指南
3分钟掌握JetBrains IDE试用期重置:终极完整指南 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter JetBrains IDE试用期重置工具(ide-eval-resetter)是一个开源项目,专…...
【2026实测】怎么提高论文原创度?盘点8款主流降AI工具,附结构级优化指南
写文章最怕碰到什么,是辛辛苦苦自己码出来的字,却被标了极高的AI值。目前很多文本审核机制对内容的原创度要求极高,纯手写的初稿也可能因为句式太工整被判定为机器生成的。 为了帮几个快被这事折腾疯了的学弟学妹找条出路,我花了…...
从无线破解到PDF解密:盘点那些容易被忽略的‘非主流’密码审计场景与工具
密码安全审计的隐秘战场:从无线网络到加密文档的实战指南 当大多数人谈论密码安全时,脑海中浮现的往往是服务器登录、数据库访问这些企业级场景。然而在数字生活的每个角落,从家庭Wi-Fi到工作文档,密码保护的脆弱性同样可能成为安…...
Metabase:零代码 BI 数据可视化工具,自建数据看板
Metabase:零代码 BI 数据可视化工具,自建数据看板 在数据驱动决策的时代,能快速看到业务数据的变化趋势至关重要。然而,专业 BI 工具(如 Tableau、Power BI)价格昂贵,而让每个业务同学都学 SQL …...
【C++】零基础入门 · 第 6 节:数组
上一节我们学习了函数,知道了如何把代码封装起来方便复用。但在实际编程中,你很快就会遇到一个问题:如果要存储 100 个学生的成绩,难道要定义 100 个变量吗?这显然不现实。数组就是 C++ 给出的答案——它让我们能用一个变量名管理一组相同类型的数据。 1. 为什么需要数组…...
VideoDownloadHelper终极指南:解锁浏览器视频下载的完整解决方案
VideoDownloadHelper终极指南:解锁浏览器视频下载的完整解决方案 【免费下载链接】VideoDownloadHelper Chrome Extension to Help Download Video for Some Video Sites. 项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelper 还在为无法保存网…...
