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机器学习 文章目录 前言一、个人成长与盘点(一)机缘与开端(二)收获与分享 二、年度创…...
如何在5分钟内为Unity游戏实现实时翻译:XUnity.AutoTranslator完整实战指南
如何在5分钟内为Unity游戏实现实时翻译:XUnity.AutoTranslator完整实战指南 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator XUnity.AutoTranslator是一款功能强大的Unity游戏实时翻译插件&…...
算法7-中级提升班2(实战篇)
问题1:机器物品平均问题 这道题使用贪心算法。 计算出数组位置的平均值。对于每一个位置,可以分别计算出左部分和右部分缺少或多出的数量,不同情况需要移动的最大次数如上图所示。 例如对于数组[100,0,0,0],对于位置0的100,右部分的值为-75,需要往右侧移动75件物品;对于…...
Python编程核心知识点速览
一、基础知识 (一)语言特性1. Python是解释型、跨平台的高级通用脚本语言,语法简洁、生态丰富,支持面向过程和面向对象编程。2. 执行速度较编译型语言慢,但可调用C语言编写的底层代码提升性能,适用于数据分…...
Scrapy工作空间搭建与目录结构解析:从初始化到基础配置全流程
Scrapy工作空间搭建与目录结构解析:从初始化到基础配置全流程 在Scrapy爬虫开发中,规范的工作空间搭建是高效开发、便于维护的基础。无论是个人数据采集项目,还是企业级大规模爬虫开发,清晰的项目结构、标准的操作流程࿰…...
如何让 Claude Code 彻底变聪明:完整记忆 + 插件体系 + 本地零占用实战教程(2026最新)!!!
从“每次重启就失忆的实习生” → “拥有长期记忆、实时知识、安全检查、结构化工作流的资深架构师”大家好,我最近在用 Claude Code 开发项目时,深深感受到上下文丢失和知识过时的痛苦。经过一番折腾,我把目前社区最强、最实用的插件体系全部…...
2025最权威的十大AI辅助写作网站实测分析
Ai论文网站排名(开题报告、文献综述、降aigc率、降重综合对比) TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 专为学术论文、毕业论文以及期刊稿件量身打造的维普AIGC检测系统,是基于深度学习…...
本地化部署MT5:无需联网,保障敏感数据隐私的文本处理方案
本地化部署MT5:无需联网,保障敏感数据隐私的文本处理方案 1. 为什么选择本地化部署的文本处理方案 1.1 数据隐私保护的刚性需求 在当今数据驱动的商业环境中,企业面临着越来越严格的数据合规要求。许多行业如金融、医疗、法律等࿰…...
股票和估值到底是什么:估值的本质:是共识,是信心,是集体的幻觉; 股票的本质,是一张所有权凭证
股票和估值到底是什么?用一个苹果的故事讲透最核心的本质 股票到底是什么?估值又是什么?为什么一个不赚钱的公司能值1000亿?" 股市里90%的骗局,本质上都是在"估值"这两个字上做文章。 一、股票:不是筹码,是"苹果树的所有权" 先讲股票的原始…...
Phi-4-Reasoning-Vision详细步骤:Streamlit宽屏布局CSS定制与响应式优化
Phi-4-Reasoning-Vision详细步骤:Streamlit宽屏布局CSS定制与响应式优化 1. 项目概述 Phi-4-Reasoning-Vision是基于微软Phi-4-reasoning-vision-15B多模态大模型开发的高性能推理工具,专为双卡4090环境优化。该工具严格遵循官方SYSTEM PROMPT规范&…...
GTE-Base-ZH镜像体验:可视化界面+API,双模式交互更便捷
GTE-Base-ZH镜像体验:可视化界面API,双模式交互更便捷 1. 模型与镜像介绍 1.1 GTE模型背景 GTE(General Text Embedding)模型是由阿里巴巴达摩院研发的文本嵌入模型系列,基于BERT框架构建。该系列模型在大规模中文和…...
