Vue入门学习笔记:TodoList(三):实例中的数据、事件和方法
目录:
Vue入门学习笔记:TodoList(一):HelloWorld
Vue入门学习笔记:TodoList(二):挂载点、模板、实例
Vue入门学习笔记:TodoList(三):实例中的数据、事件和方法
Vue入门学习笔记:TodoList(四):属性绑定和双向数据绑定
Vue入门学习笔记:TodoList(五):计算属性和侦听器
Vue入门学习笔记:TodoList(六):v-if, v-show, v-for指令
Vue入门学习笔记:TodoList(七):todolist功能开发
Vue入门学习笔记:TodoList(八):todolist组件拆分
Vue入门学习笔记:TodoList(九):组件与实例的关系
Vue入门学习笔记:TodoList(十):实现todolist的删除功能
Vue入门学习笔记:TodoList(十一):vue-cli的简介与使用
Vue入门学习笔记:TodoList(十二):使用vue-cli开发todolist
Vue入门学习笔记:TodoList(十三):全局样式与局部样式
知识点
1.数据:插值表达式、v-text、v-html
2.事件@等价于v-on
3.方法 methods
一、数据
<div id="root">{{msg}}</div>
两个花括号的语法,叫做插值表达式。
还可以写成v-text或v-html,v-text或v-html是vue的一个指令。
区别:v-html不会被转义,v-text会被转义。
使用v-text显示hello:
<body><div id="root"><div v-text="content"></div></div><script>new Vue({el: "#root", //挂载点就是上面id = root的标签data: {content: "<h1>hello</h1>"}})</script>
</body>
换成v-html之后效果如下:

二、事件和方法
v-on模板指令可以绑定事件
方法写在methods
this.content可以修改data中的content
语法糖 @ 相当于 v-on
<body><div id="root"><div @click="funcClick"><div v-text="content"></div></div></div><script>new Vue({el: "#root",data: {content: "hello"},methods:{funcClick: function(){this.content = "world"}}})</script>
</body>
示例效果:鼠标点击hello,自动替换成world
此为面向数据编程,数据变化则页面内容发生变化
参考资料:https://www.imooc.com/learn/980
相关文章:
Vue入门学习笔记:TodoList(三):实例中的数据、事件和方法
目录: Vue入门学习笔记:TodoList(一):HelloWorld Vue入门学习笔记:TodoList(二):挂载点、模板、实例 Vue入门学习笔记:TodoList(三)&a…...
怎么找到引发回流的JavaScript代码?
要找到引发回流的JavaScript代码,可以使用浏览器的开发者工具中的性能分析器。不同的浏览器有不同的名称和位置,例如Google Chrome的开发者工具中的性能分析器被称为Performance,Firefox的开发者工具中的性能分析器被称为Profiler。 以下是在…...
未来广告策划,转型还是淘汰?
在广告行业呆了十来年了,最近我越来越感觉到广告行业真的是一个需要与时俱进,并且应用场景非常广泛的一个专业。 而且由于这是一个需要创意能力的行业,所以对比于重复性容易被机器以及人工智能所代替的岗位行业来说,广告的可替代…...
【vscode远程开发】使用SSH远程连接服务器 「内网穿透」
文章目录 前言视频教程1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 转…...
七天从零实现Web框架Gee - 扩展
到这里前七天的任务已经完成,但我们可以对Gee框架进行一些扩展 补充HTTP请求方法 原作者只实现了 GET, POST 路由添加,其他的 PUT, DELETE 等标准 HTTP 方法未实现,实现方法也很简单,只需在gee.go中增加如下代码 // PUT define…...
什么是土壤水分传感器
土壤水分传感器又称土壤湿度传感器由不锈钢探针和防水探头构成,可长期埋设于土壤和堤坝内使用,对表层和深层土壤进行墒情的定点监测和在线测量。与数据采集器配合使用,可作为水分定点监测或移动测量的工具(即农田墒情检测仪&#…...
月薪17k需要什么水平?98年测试员的面试全过程…
我的情况 大概介绍一下个人情况,男,本科,三年多测试工作经验,懂python,会写脚本,会selenium,会性能,然而到今天都没有收到一份offer!从年后就开始准备简历,年…...
知了汇智:坚持发展产教融合,做好高校、人才与企业之间的桥梁
6月将正式迎来高校毕业季,大学生就业是聚焦全社会关注的头等大事。5月9日,成都知了汇智科技有限公司(以下简称“知了汇智”)组织开展“深化产教融合、聚焦人才培养”的主题座谈会议,联动高校与合作企业参加,…...
MyBatis缓存-一级缓存--二级缓存的非常详细的介绍
目录 MyBatis-缓存-提高检索效率的利器 缓存-官方文档 一级缓存 基本说明 一级缓存原理图 代码演示 修改MonsterMapperTest.java, 增加测试方法 结果 debug 一级缓存执行流程 一级缓存失效分析 关闭sqlSession会话后 , 一级缓存失效 如果执行sqlSession.clearCache(…...
macOS Ventura 13.4 RC2(22F63)发布
系统介绍 根据黑果魏叔官网提供:5 月 12 日消息,苹果今天面向开发人员,发布了 macOS Ventura 13.4 的第 2 个候选 RC 版本(内部版本号 22F63),距离上个候选版本相隔数天时间。 macOS Ventura 带来了台前调…...
【为什么可以相信一个HTTPS网站】
解决信用,仅仅有加密和解密是不够的。加密解密解决的只是传输链路的安全问题,相当于两个人说话不被窃听。可以类比成你现在生活 的世界——货币的信用,是由政府在背后支撑的;购房贷款的信用,是由银行在背后支撑的&…...
4.进阶篇
目录 一、按照测试对象划分 1.界面测试(UI测试) 界面测试的常见错误: 2.可靠性测试 3.容错性测试 4.文档测试 5.兼容性测试 6.易用性 7.安装卸载测试 8.安全性测试 9.性能测试 10.内存泄漏 二、按照是否查看代码 1.黑盒测试 2.…...
conda init
在输入conda activate 的时候出现报错: 解决: "需要使用 conda init 进行初始化" 的错误通常是由于你的系统环境缺少 conda 的初始化脚本所致。当你尝试在终端中执行 conda activate 命令时,会出现此错误提示。 要解决这个问题,可以通过以下步骤进行操作: 打…...
Elasticsearch(二)
Clasticsearch(二) DSL查询语法 文档 文档:https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl.html 常见查询类型包括: 查询所有:查询出所有数据,一般测试用。如:…...
工业视觉检测的8个技术优势
工业4.0时代,自动化生产线成为了这个时代的主旋律,而工业视觉检测技术也成为其中亮眼的表现,其机器视觉技术为设备提供了智慧的双眼,让自动化的脚步得以加速! 在实际的生产应用中,视觉技术方案往往先被着手…...
16 KVM虚拟机配置-其他常见配置项
文章目录 16 KVM虚拟机配置-其他常见配置项16.1 概述16.2 元素介绍16.3 配置示例 16 KVM虚拟机配置-其他常见配置项 16.1 概述 除系统资源和虚拟设备外,XML配置文件还需要配置一些其他元素,本节介绍这些元素的配置方法。 16.2 元素介绍 iothreads&…...
(转载)从0开始学matlab(第1天)—变量和数组
MATLAB 程序的基本数据单元是数组。一个数组是以行和列组织起来的数据集合,并且拥有一个数组名。数组中的单个数据是可以被访问的,访问的方法是数组名后带一个括号,括号内是这个数据所对应行标和列标。标量在 MATLAB 中也被当作数组来处理——…...
Linux命令·wget
Linux系统中的wget是一个下载文件的工具,它用在命令行下。对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器。wget支持HTTP,HTTPS和FTP协议,可以使用HTTP代理。所谓的自动下载是指&#…...
API网关简介|TaobaoAPI接入
API网关是什么 在日常工作中,不同的场合下,我们可能听说过很多次网关这个名称,这里说的网关特指API网关(API Gataway)。字面意思是指将所有API的调用统一接入API网关层,由网关层负责接入和输出。 那么在什…...
OJ练习第103题——最大矩形
最大矩形 力扣链接:85. 最大矩形 题目描述 给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵,找出只包含 1 的最大矩形,并返回其面积。 示例 输入:matrix [[“1”,“0”,“1”,“0”,“0”],[“1”,“0”,“1”…...
Java微服务集成TranslateGemma:企业级翻译中台构建
Java微服务集成TranslateGemma:企业级翻译中台构建 1. 为什么需要企业级翻译中台 最近在给一家跨境电商平台做技术咨询时,客户提到一个很实际的问题:他们的客服系统、商品管理系统、营销内容平台各自维护着不同的翻译逻辑。客服用的是第三方…...
开源小模型也能干大事:MinerU图文理解实战教程
开源小模型也能干大事:MinerU图文理解实战教程 1. 项目简介 OpenDataLab MinerU 是一个专门针对文档理解设计的智能多模态模型,基于 OpenDataLab/MinerU2.5-1.2B 模型构建。虽然只有 1.2B 参数,但这个模型在文档解析方面表现出色࿰…...
Qwen3-14B镜像轻量化设计:50GB系统盘+40GB数据盘高效空间管理
Qwen3-14B镜像轻量化设计:50GB系统盘40GB数据盘高效空间管理 1. 镜像概述与核心优势 Qwen3-14B私有部署镜像是一款专为RTX 4090D 24GB显存显卡优化的轻量化解决方案。通过精心设计的50GB系统盘40GB数据盘架构,实现了大模型部署的空间效率最大化。这个镜…...
别再死记硬背了!用Python可视化理解L-smooth函数与梯度Lipschitz连续
别再死记硬背了!用Python可视化理解L-smooth函数与梯度Lipschitz连续 第一次接触L-smooth这个概念时,我盯着数学公式看了整整一个下午——梯度Lipschitz连续、二次上界、等价性证明,每个词都认识,连起来却像天书。直到我用Python画…...
知识科普短片,AI如何“看懂”并剪出逻辑?揭秘分段剪辑的内在逻辑链
傍晚,你面对电脑屏幕,刚刚录完一段长达2小时的行业知识分享。你的目标是将其剪成一部15分钟、节奏明快的知识科普短片。手动操作意味着你要反复聆听,识别核心论点,标记关键转折,再小心翼翼地将碎片串联——这个过程动辄…...
Phi-3-Mini-128K多轮对话效果实测:复杂任务规划与分解
Phi-3-Mini-128K多轮对话效果实测:复杂任务规划与分解 最近,我花了不少时间深度体验了Phi-3-Mini-128K这款模型。它的名字里带着“128K”,这超长的上下文长度,让我特别好奇它在处理复杂、多轮对话时的真实表现。毕竟,…...
为什么JavaScript无法访问用户电脑的硬件信息
JavaScript和硬件信息访问:安全和信任的博弈许多人想知道:为什么JavaScript不能访问用户计算机的硬件信息?答案与安全和信任机制密切相关。虽然本地客户端软件可以访问硬件信息,但这是基于用户对软件的信任和授权。浏览器和客户端…...
《QGIS快速入门与应用基础》248:对齐工具(左对齐/居中对齐/右对齐)对齐工具(左对齐/居中对齐/右对齐)对齐工具(左对齐/居中对齐/右对齐)对齐工具(左对齐/居中对齐/右对齐)对齐工具(左对齐/
作者:翰墨之道,毕业于国际知名大学空间信息与计算机专业,获硕士学位,现任国内时空智能领域资深专家、CSDN知名技术博主。多年来深耕地理信息与时空智能核心技术研发,精通 QGIS、GrassGIS、OSG、OsgEarth、UE、Cesium、OpenLayers、Leaflet、MapBox 等主流工具与框架,兼具…...
Cursor API限制突破架构设计与系统实现方案
Cursor API限制突破架构设计与系统实现方案 【免费下载链接】cursor-free-vip [Support 0.45](Multi Language 多语言)自动注册 Cursor Ai ,自动重置机器ID , 免费升级使用Pro 功能: Youve reached your trial request limit. / T…...
保姆级教程:用YOLOv5和ReID搞定跨摄像头找人(附完整代码和预训练模型)
跨摄像头人物追踪实战:YOLOv5与ReID技术深度整合指南 在智能安防、零售分析等场景中,跨摄像头追踪特定人物一直是个技术难点。传统方案要么依赖单一摄像头的目标检测,要么需要复杂的人工特征标注。本文将手把手带您实现一套基于YOLOv5目标检测…...
