PurpleEndurer的博客_Vue

Vue学习笔记18：纯JavaScript和Vue分实现统计输出用户输入信息及重复次数（下）

0 前言在 Vue学习笔记17：纯JavaScript和Vue分实现统计输出用户输入信息及重复次数（下）_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们尝试使用Vue来实现统计输出用户输入信息及重复次数，出现的问题是所显示的输入信息列表并不是按输入先后的顺序来排列的，效果不是很理想，现在我们来做进一步修改。1 思路出现所显示的输入信息列

数组

Vue

bc

JavaScript

v-for

原创精选 2024-10-25 18:37:13 232 阅读 yyds干货盘点

Vue学习笔记17：纯JavaScript和Vue分实现统计输出用户输入信息及重复次数（中）

0 前言在 Vue学习笔记16：纯JavaScript和Vue分实现统计输出用户输入信息及重复次数（上）_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们使用纯JavaScript实现了统计输出用户输入信息及重复次数。现在我们尝试用Vue 来实现，其过程要比纯JavaScript实现复杂。1 思路跟使用纯JavaScrip

数组

Vue

for循环

原创精选 2024-10-23 00:19:24 313 阅读 yyds干货盘点

Vue学习笔记16：纯JavaScript和Vue分实现统计输出用户输入信息及重复次数（上）

0 前言在 Vue学习笔记15：不用v-if指令解决数据更新后的页面刷新问题_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们提出了改进的一个方向：对用户输入的信息做进一步的统计和分析并输出。下面，我们就来尝试实现统计输出用户输入信息及重复次数。我们先使用纯JavaScript来试试。1 思路原先我们是使用一维数组aRec来存储用户输入的信息，每个

数组

for循环

二维数组

JavaScript

原创精选 2024-10-19 02:15:21 254 阅读 yyds干货盘点

Vue学习笔记15：不用v-if指令解决数据更新后的页面刷新问题

0 前言在 Vue学习笔记14：使用v-if指令解决数据更新后的页面刷新问题_PurpleEndurer@5lcto的技术博客_51CTO博客中，为了在数据更新后及时刷新页面显示，我们是增加了数据成员c，并利用了v-if指令。最后的小结中我们提到，数据成员c的值和保存用户输入信息的数组aRec的内容，或者元素数量（也就是数组长度），是同步更新的，那么我们是否可以不

数组

数据

数据更新

Vue

JavaScript

原创精选 2024-10-16 20:26:27 340 阅读 yyds干货盘点

Vue学习笔记14：使用v-if指令解决数据更新后的页面刷新问题

0 前言在 Vue学习笔记12：分别用纯JavaScript和Vue记录和显示用户输入的所有信息（上）_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们用Vue来记录和显示用户输入的所有信息的功能，遇到了一个问题，就是代码运行时却慢了一拍，当用户输入第n+1一次的信息后，才会显示之前的n次信息。换而言之，就是页面信息更新不够及时，如何解决这个问题呢？1&nbs

数组

Vue

数据

JavaScript

v-if指令

原创 2024-10-14 07:38:27 833 阅读 yyds干货盘点

Vue学习笔记12：分别用纯JavaScript和Vue记录和显示用户输入的所有信息（上）

0 前言在 Vue学习笔记11：分别用纯JavaScript和Vue实现显示系统默认值及用户输入数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们分别使用纯JavaScript和Vue实现了显示系统默认值及用户输入数据更新的实时视图显示的功能。其实我们只显示了用户最后一次输入的信息。如果我们想记录和显示用户输入的所有信息，分别用纯

Vue

数组

提示信息

JavaScript

学习笔记

原创精选 2024-10-12 08:12:20 332 阅读 yyds干货盘点

Vue学习笔记13：分别用纯JavaScript和Vue记录和显示用户输入的所有信息（下）

0 前言在 Vue学习笔记12：分别用纯JavaScript和Vue记录和显示用户输入的所有信息（上）_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们提出分别用纯JavaScript和Vue来实现记录和显示用户输入的所有信息的功能。并且先用Vue来进行实现。现在我们用纯JavaScript来实现，再就两种实现方法进行对比。1 实现思路和技术要点其实用

数组

Vue

初始化

JavaScript

原创精选 2024-10-11 22:07:53 199 阅读 yyds干货盘点

Vue学习笔记11：分别用纯JavaScript和Vue实现显示系统默认值及用户输入数据更新的实时视图显示

0 前言在 Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们分别用纯JavaScript和Vue实现了数据更新的实时视图显示。如果我们希望实现更多的功能，在文本输入框下面显示两段文字信息：第一段显示系统默认的信息。第二段显示用户第n次输入的信息。那么用纯Java

初始化

Vue

数据更新

JavaScript

网页内容更新

原创精选 2024-10-10 08:24:11 218 阅读

vue学习笔记10使用事件（event）改造代码

0 前言在 Vue学习笔记9：用HTML COM进一步优化Vue学习笔记7的代码_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们改造函数showFruit的代码时使用了两个传入参数。我们再换了一个思路，是否能不用显式的传入参数呢？我们以 Vue学习笔记9：用HTML COM进一步优化Vue学习笔记7的代码_

Vue

HTML

传参数

HTML COM

事件

原创精选 2024-09-30 10:03:39 229 阅读 yyds干货盘点

Vue学习笔记9：用HTML COM进一步优化Vue学习笔记7的代码

0 前言在 Vue学习笔记8：解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们通过使用Vue的v-for指令，让用户可选水果列表和显示用户选定水果列表这两个水果列表的网页元素描述代码都得到了大幅度的精简，在小结时提出可以进一步优化函数showFruit

数组

Vue

HTML

HTML COM

V-for指令

原创精选 2024-09-29 22:59:42 468 阅读 yyds干货盘点

Vue学习笔记8：解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题

0 前言在 Vue学习笔记7：使用v-for指令渲染列表_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们使用Vue的v-for指令来改造代码，两个水果列表的网页元素描述代码都得到了大幅度的精简，代码变得更清晰，更便于维护。与此同时，这次改造也引出了两个新的问题：1.用户选定水果列表中的水果名称没有保留之前设定的颜色，全部以黑色来显示，不够亮丽醒目。2.当用户选定喜欢的

Vue

数组

for循环

v-for指令

v-bind指令

原创精选 2024-09-29 02:42:20 309 阅读 yyds干货盘点

Vue学习笔记7：使用v-for指令渲染列表

0 前言在 Vue学习笔记6：分别使用纯JavaScript和Vue的v-if 指令来有条件地渲染网页元素_PurpleEndurer@5lcto的技术博客_51CTO博客中，我们直接使用了<>来显示用户选择的水果名称列表。当我们增加一种新的水果时，需要手动增加<P>代码来显示新的水果名称。如果要增加的水果很多时，这个工作就费时费力了。在在Vue中，提供了v-for指令，

Vue

数组

for循环

v-for指令

原创精选 2024-09-28 15:43:20 459 阅读 yyds干货盘点

Vue学习笔记6：分别使用纯JavaScript和Vue的v-if 指令来有条件地渲染网页元素

0 缘起有时我们的网页需要根据需要用户的选择展示不同的页面元素。例如：<p>你喜欢哪种水果？</p> <p> <label> <input type="radio" value="苹果" name="fruit" /> 苹果 </label> </p> <p> <label>

click事件

Vue

字符串

原创精选 2024-09-21 17:51:45 344 阅读 yyds干货盘点

Vue学习笔记5：用Vue的事件监听实现数据更新的实时视图显示

0 前言在Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客的开篇，我们分别使用 <input type="text" oninput="showMsg(this.value)" />和应用EventTarget.addEventListener() 方法将

Vue

数据更新

文本框

JavaScript

HTML

原创精选 2024-09-19 13:53:15 470 阅读 yyds干货盘点

Vue学习笔记4：用reactive() 实现数据更新的实时视图显示

0 前言Vue 的核心功能是声明式渲染，这让我们可以对 HTML 中的内容发生变化时进行响应式地自动更新。响应式状态可以使用 Vue 的API ref() 或 reactive() 来声明。在Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客中我们已经使用了API ref() 来

Vue

API

数据更新

JavaScript

原创精选 2024-09-18 01:23:23 569 阅读 yyds干货盘点

Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示

0 前言在页面中，要实现数据更新的视图实时显示，纯JavaScrip需要手动编写代码来处理数据和视图之间的更新。而Vue提供了数据绑定的能力，使得数据和视图保持同步。我们通过一个实例来体验两者的差别。我们设计一个页面，在页面里提供一个文本框，用户可以在文本框输入内容，然后我们在文本框下方通过<span>把用户输入的内容显示出来。<p style="font-size:18pt;

文本框

数据

数据更新

Vue

JavaScript

原创精选 2024-09-17 17:48:07 588 阅读 yyds干货盘点

Vue学习笔记2：安装Visual Studio Code

工欲善其事，必先利其器。要学习Vue，也要准备好学习环境。这里我使用的是Visual Studio Code。1 下载 Visual Studio CodeVisual Studio Code可以到 https://code.visualstudio.com/download 下载。对于Windows来说，有一个问题，就是这里提供的都是64位版本。而我使用的是32位的

Visual

Code

重启

Vue

HTML

原创 2024-09-13 12:34:13 307 阅读

Vue学习笔记1：Vue概况

0 前言HTML和JavaScript是Web开发中无处不在的两个技术，它们的使用范围非常广泛，几乎涵盖了整个互联网和移动应用的开发。我喜欢用HTML和JavaScript编写一些小程序，所以决定学习vue。1 Vue是什么？ Vue 是一个开源的前端 JavaScript 框架，它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，专注于

Vue

MVVM

HTML

JavaScript

原创 2024-09-10 12:04:28 120 阅读 yyds干货盘点

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯