当前位置： 首页 > news >正文

Vue入门学习笔记：TodoList（三）：实例中的数据、事件和方法

news 2026/3/30 12:31:53

目录：
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（三）：实例中的数据、事件和方法

目录&#xff1a; Vue入门学习笔记&#xff1a;TodoList&#xff08;一&#xff09;&#xff1a;HelloWorld Vue入门学习笔记&#xff1a;TodoList&#xff08;二&#xff09;&#xff1a;挂载点、模板、实例 Vue入门学习笔记&#xff1a;TodoList&#xff08;三&#xff09;&a…...

编程日记 2023/5/31 8:22:10

怎么找到引发回流的JavaScript代码？

要找到引发回流的JavaScript代码&#xff0c;可以使用浏览器的开发者工具中的性能分析器。不同的浏览器有不同的名称和位置&#xff0c;例如Google Chrome的开发者工具中的性能分析器被称为Performance&#xff0c;Firefox的开发者工具中的性能分析器被称为Profiler。 以下是在…...

编程日记 2023/5/15 14:00:53

未来广告策划，转型还是淘汰？

在广告行业呆了十来年了&#xff0c;最近我越来越感觉到广告行业真的是一个需要与时俱进&#xff0c;并且应用场景非常广泛的一个专业。 而且由于这是一个需要创意能力的行业&#xff0c;所以对比于重复性容易被机器以及人工智能所代替的岗位行业来说&#xff0c;广告的可替代…...

编程日记 2023/5/15 13:55:52

【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 测试固定公网地址远程 转…...

编程日记 2023/5/15 13:50:51

七天从零实现Web框架Gee - 扩展

到这里前七天的任务已经完成&#xff0c;但我们可以对Gee框架进行一些扩展 补充HTTP请求方法 原作者只实现了 GET, POST 路由添加&#xff0c;其他的 PUT, DELETE 等标准 HTTP 方法未实现&#xff0c;实现方法也很简单&#xff0c;只需在gee.go中增加如下代码 // PUT define…...

编程日记 2023/5/15 13:45:50

什么是土壤水分传感器

土壤水分传感器又称土壤湿度传感器由不锈钢探针和防水探头构成&#xff0c;可长期埋设于土壤和堤坝内使用&#xff0c;对表层和深层土壤进行墒情的定点监测和在线测量。与数据采集器配合使用&#xff0c;可作为水分定点监测或移动测量的工具&#xff08;即农田墒情检测仪&#…...

编程日记 2023/5/30 2:00:03

月薪17k需要什么水平？98年测试员的面试全过程…

我的情况 大概介绍一下个人情况&#xff0c;男&#xff0c;本科&#xff0c;三年多测试工作经验&#xff0c;懂python&#xff0c;会写脚本&#xff0c;会selenium&#xff0c;会性能&#xff0c;然而到今天都没有收到一份offer&#xff01;从年后就开始准备简历&#xff0c;年…...

编程日记 2023/5/15 13:35:48

知了汇智：坚持发展产教融合，做好高校、人才与企业之间的桥梁

6月将正式迎来高校毕业季&#xff0c;大学生就业是聚焦全社会关注的头等大事。5月9日&#xff0c;成都知了汇智科技有限公司&#xff08;以下简称“知了汇智”&#xff09;组织开展“深化产教融合、聚焦人才培养”的主题座谈会议&#xff0c;联动高校与合作企业参加&#xff0c…...

编程日记 2023/5/15 13:30:47

MyBatis缓存-一级缓存--二级缓存的非常详细的介绍

目录 MyBatis-缓存-提高检索效率的利器 缓存-官方文档 一级缓存 基本说明 一级缓存原理图 代码演示 修改MonsterMapperTest.java, 增加测试方法 结果 debug 一级缓存执行流程 一级缓存失效分析 关闭sqlSession会话后 , 一级缓存失效 如果执行sqlSession.clearCache(…...

编程日记 2023/5/15 13:25:46

macOS Ventura 13.4 RC2（22F63）发布

系统介绍 根据黑果魏叔官网提供&#xff1a;5 月 12 日消息&#xff0c;苹果今天面向开发人员&#xff0c;发布了 macOS Ventura 13.4 的第 2 个候选 RC 版本&#xff08;内部版本号 22F63&#xff09;&#xff0c;距离上个候选版本相隔数天时间。 macOS Ventura 带来了台前调…...

编程日记 2023/5/15 13:20:45

【为什么可以相信一个HTTPS网站】

解决信用&#xff0c;仅仅有加密和解密是不够的。加密解密解决的只是传输链路的安全问题&#xff0c;相当于两个人说话不被窃听。可以类比成你现在生活 的世界——货币的信用&#xff0c;是由政府在背后支撑的&#xff1b;购房贷款的信用&#xff0c;是由银行在背后支撑的&…...

编程日记 2023/5/15 13:15:44

4.进阶篇

目录 一、按照测试对象划分 1.界面测试&#xff08;UI测试&#xff09; 界面测试的常见错误&#xff1a; 2.可靠性测试 3.容错性测试 4.文档测试 5.兼容性测试 6.易用性 7.安装卸载测试 8.安全性测试 9.性能测试 10.内存泄漏 二、按照是否查看代码 1.黑盒测试 2.…...

编程日记 2023/5/15 13:10:43

conda init

在输入conda activate 的时候出现报错： 解决： "需要使用 conda init 进行初始化" 的错误通常是由于你的系统环境缺少 conda 的初始化脚本所致。当你尝试在终端中执行 conda activate 命令时，会出现此错误提示。 要解决这个问题，可以通过以下步骤进行操作： 打…...

编程日记 2023/5/15 13:05:42

Elasticsearch（二）

Clasticsearch&#xff08;二&#xff09; DSL查询语法 文档 文档&#xff1a;https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl.html 常见查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c;一般测试用。如&#xff1a…...

编程日记 2023/5/15 13:00:41

工业视觉检测的8个技术优势

工业4.0时代&#xff0c;自动化生产线成为了这个时代的主旋律&#xff0c;而工业视觉检测技术也成为其中亮眼的表现&#xff0c;其机器视觉技术为设备提供了智慧的双眼&#xff0c;让自动化的脚步得以加速&#xff01; 在实际的生产应用中&#xff0c;视觉技术方案往往先被着手…...

编程日记 2023/5/15 12:55:40

16 KVM虚拟机配置-其他常见配置项

文章目录 16 KVM虚拟机配置-其他常见配置项16.1 概述16.2 元素介绍16.3 配置示例 16 KVM虚拟机配置-其他常见配置项 16.1 概述 除系统资源和虚拟设备外&#xff0c;XML配置文件还需要配置一些其他元素&#xff0c;本节介绍这些元素的配置方法。 16.2 元素介绍 iothreads&…...

编程日记 2023/5/15 12:50:39

(转载)从0开始学matlab(第1天)—变量和数组

MATLAB 程序的基本数据单元是数组。一个数组是以行和列组织起来的数据集合&#xff0c;并且拥有一个数组名。数组中的单个数据是可以被访问的&#xff0c;访问的方法是数组名后带一个括号&#xff0c;括号内是这个数据所对应行标和列标。标量在 MATLAB 中也被当作数组来处理——…...

编程日记 2023/5/15 12:45:38

Linux命令·wget

Linux系统中的wget是一个下载文件的工具&#xff0c;它用在命令行下。对于Linux用户是必不可少的工具&#xff0c;我们经常要下载一些软件或从远程服务器恢复备份到本地服务器。wget支持HTTP&#xff0c;HTTPS和FTP协议&#xff0c;可以使用HTTP代理。所谓的自动下载是指&#…...

编程日记 2023/5/29 16:51:02

API网关简介|TaobaoAPI接入

API网关是什么 在日常工作中&#xff0c;不同的场合下&#xff0c;我们可能听说过很多次网关这个名称&#xff0c;这里说的网关特指API网关&#xff08;API Gataway&#xff09;。字面意思是指将所有API的调用统一接入API网关层&#xff0c;由网关层负责接入和输出。 那么在什…...

编程日记 2023/6/1 8:22:24

OJ练习第103题——最大矩形

最大矩形 力扣链接&#xff1a;85. 最大矩形 题目描述 给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵&#xff0c;找出只包含 1 的最大矩形&#xff0c;并返回其面积。 示例 输入&#xff1a;matrix [[“1”,“0”,“1”,“0”,“0”],[“1”,“0”,“1”…...

编程日记 2023/5/15 12:30:35

如何用Langchain来实现一个查询天气的AI智能体

上一篇&#xff0c;我们讲了如何用Langchain来搭建一个通义大语言模型应用。今天小编就来讲一讲如何用Langchain来实现一个查询天气的AI智能体。本文使用的大模型是智谱AI&#xff0c;采用Python代码来实现。我们需要先在官方网站申请一个开发的Key&#xff0c;在接下来的代码中…...

编程新知 2026/3/30 12:20:12

TCGA数据下载神器gdc-client实战：Win10系统闪退问题一网打尽

TCGA数据高效下载指南&#xff1a;gdc-client在Win10系统的深度优化与故障排除 1. 为什么选择gdc-client下载TCGA数据&#xff1f; 对于生物信息学研究者来说&#xff0c;获取TCGA&#xff08;癌症基因组图谱&#xff09;数据是开展肿瘤基因组学研究的第一步。然而&#xff0c;…...

编程新知 2026/3/30 10:47:23

吃透Redis核心数据结构：从原理到实战，避开90%的坑

Redis之所以能成为分布式系统的“性能神器”&#xff0c;核心在于其高效的内存数据结构设计。很多开发者对Redis的认知停留在“SET/GET缓存”&#xff0c;只会用最基础的字符串类型&#xff0c;却忽略了List、Hash、Set、ZSet等核心结构的强大能力&#xff0c;导致代码冗余、性…...

编程新知 2026/3/30 10:45:23

Vivado IP封装实战：从源码到GUI配置的完整避坑指南（含EDF/DCP对比）

Vivado IP封装实战&#xff1a;从源码到GUI配置的完整避坑指南&#xff08;含EDF/DCP对比&#xff09; 在FPGA开发中&#xff0c;团队协作和代码共享是常见需求&#xff0c;但如何平衡代码保护与功能灵活性一直是开发者面临的难题。Vivado提供了多种模块封装方案&#xff0c;每…...

编程新知 2026/3/30 9:57:58

FLUX.1-dev-fp8-dit文生图+SDXL_Prompt风格效果展示：多分辨率适配（1024x1024/768x1344）

FLUX.1-dev-fp8-dit文生图SDXL_Prompt风格效果展示&#xff1a;多分辨率适配&#xff08;1024x1024/768x1344&#xff09; 你见过能同时驾驭方形海报和竖屏手机壁纸的AI画图工具吗&#xff1f;今天要聊的FLUX.1-dev-fp8-dit模型&#xff0c;配合SDXL Prompt风格插件&#xff0…...

编程新知 2026/3/30 8:27:26

Hunyuan-MT-7B真实案例集：电商商品描述多语言生成效果

Hunyuan-MT-7B真实案例集&#xff1a;电商商品描述多语言生成效果 1. 引言&#xff1a;当电商遇上多语言翻译 想象一下这个场景&#xff1a;你是一家跨境电商公司的运营&#xff0c;手头有一款新品的英文描述&#xff0c;需要快速翻译成法语、西班牙语、德语、日语等十几种语…...

编程新知 2026/3/30 7:27:03

HUNYUAN-MT赋能Agent智能体：构建具备多语言交互能力的AI助手

HUNYUAN-MT赋能Agent智能体&#xff1a;构建具备多语言交互能力的AI助手 想象一下&#xff0c;你正在开发一个面向全球用户的智能客服助手。一位法国用户用法语咨询产品问题&#xff0c;一位日本用户用日语询问订单状态&#xff0c;而你的核心业务逻辑和知识库大部分是中文的。…...

编程新知 2026/3/30 7:12:57

解决Windows HEIC预览难题：让iPhone照片在资源管理器中一目了然

解决Windows HEIC预览难题&#xff1a;让iPhone照片在资源管理器中一目了然 【免费下载链接】windows-heic-thumbnails Enable Windows Explorer to display thumbnails for HEIC files 项目地址: https://gitcode.com/gh_mirrors/wi/windows-heic-thumbnails 当摄影爱好…...

编程新知 2026/3/30 5:26:21

nlp_structbert_sentence-similarity_chinese-large部署教程：模型量化INT8可行性分析

nlp_structbert_sentence-similarity_chinese-large部署教程&#xff1a;模型量化INT8可行性分析 1. 项目背景与模型介绍 StructBERT中文句子相似度分析工具是基于阿里达摩院开源的大规模预训练模型开发的本地化语义匹配解决方案。这个工具专门针对中文文本理解进行了优化&am…...

编程新知 2026/3/30 3:34:54

Qwen3-0.6B-FP8逻辑推理能力实测：解决经典谜题与数学问题

Qwen3-0.6B-FP8逻辑推理能力实测&#xff1a;解决经典谜题与数学问题 最近在尝试一些轻量级的AI模型&#xff0c;发现Qwen3-0.6B-FP8这个小家伙挺有意思。它体积不大&#xff0c;但官方宣称在逻辑推理方面有不错的表现。这让我很好奇&#xff0c;一个只有6亿参数的模型&#x…...

编程新知 2026/3/29 23:21:10