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机器学习 文章目录 前言一、个人成长与盘点(一)机缘与开端(二)收获与分享 二、年度创…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机(无人驾驶飞行器,UAV)技术的快速发展,其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统,无人机的“黑飞”&…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent
安全大模型训练计划:基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标:为安全大模型创建高质量、去偏、符合伦理的训练数据集,涵盖安全相关任务(如有害内容检测、隐私保护、道德推理等)。 1.1 数据收集 描…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构: 传统SMO中LPF会带来相位延迟和幅值衰减,并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF),可以去除高次谐波,并且不用相位补偿就可以获得一个误差较小的转子位…...
Modbus RTU与Modbus TCP详解指南
目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...
【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域,专业机构的核心价值不仅在于减轻债务数字,更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明,合法债务优化需同步实现三重平衡: 法律刚性(债…...
Visual Studio Code 扩展
Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后,命令 changeCase.commands 可预览转换效果 EmmyLua…...
