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

从0开始学vue：实现一个简单页面

article 2025/6/4 21:31:49

Vue.js 是一个渐进式JavaScript框架，用于构建用户界面。下面我将带你从零开始学习Vue.js并创建一个简单的可运行页面。

1. 准备工作

首先，你需要了解几种学习Vue.js的方式：

方式一：使用CDN引入（最简单的方式）

<!DOCTYPE html>
<html>
<head><title>我的第一个Vue应用</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body><div id="app">{{ message }}</div><script>new Vue({el: '#app',data: {message: 'Hello Vue!'}});</script>
</body>
</html>

方式二：使用Vue CLI创建项目（推荐方式）

  1. 首先安装Node.js（包含npm）
  2. 安装Vue CLI：
    npm install -g @vue/cli
  3. 创建项目：
    vue create my-first-vue-app
  4. 进入项目目录并运行：
    cd my-first-vue-app
npm run serve

2. 创建一个简单的待办事项应用

创建Todo组件

在src/components目录下创建TodoList.vue文件：

<template><div class="todo-app"><h1>我的待办事项</h1><div class="add-todo"><input type="text" v-model="newTodo" @keyup.enter="addTodo"placeholder="输入待办事项..."><button @click="addTodo">添加</button></div><ul class="todo-list"><li v-for="(todo, index) in todos" :key="index" class="todo-item":class="{ completed: todo.completed }"><input type="checkbox" v-model="todo.completed"><span>{{ todo.text }}</span><button @click="removeTodo(index)" class="delete-btn">删除</button></li></ul><p v-if="todos.length === 0">暂无待办事项，添加一个吧！</p><p v-else>已完成 {{ completedCount }} / {{ todos.length }} 项</p></div>
</template><script>
export default {name: 'TodoList',data() {return {newTodo: '',todos: [{ text: '学习Vue.js', completed: false },{ text: '完成项目', completed: false },{ text: '购物', completed: true }]}},computed: {completedCount() {return this.todos.filter(todo => todo.completed).length;}},methods: {addTodo() {if (this.newTodo.trim() === '') return;this.todos.push({text: this.newTodo.trim(),completed: false});this.newTodo = '';},removeTodo(index) {this.todos.splice(index, 1);}}
}
</script><style scoped>
.todo-app {font-family: Arial, sans-serif;max-width: 600px;margin: 0 auto;padding: 20px;
}.todo-list {list-style: none;padding: 0;
}.todo-item {display: flex;align-items: center;padding: 10px;border-bottom: 1px solid #eee;
}.todo-item.completed {color: #888;text-decoration: line-through;
}.todo-item input {margin-right: 10px;
}.add-todo {display: flex;margin-bottom: 20px;
}.add-todo input {flex-grow: 1;padding: 8px;margin-right: 10px;
}.add-todo button {padding: 8px 16px;background-color: #42b983;color: white;border: none;border-radius: 4px;cursor: pointer;
}.delete-btn {margin-left: auto;background-color: #ff5252;color: white;border: none;border-radius: 4px;padding: 4px 8px;cursor: pointer;
}
</style>

修改App.vue

更新src/App.vue文件以包含我们的Todo组件：

<template><div id="app"><TodoList /></div>
</template><script>
import TodoList from './components/TodoList.vue'export default {name: 'App',components: {TodoList}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

运行项目

npm run serve

4. 下一步学习建议

  1. 组件系统：学习如何创建可复用的Vue组件
  2. Vue Router：学习如何实现单页应用(SPA)的路由
  3. Vuex：学习状态管理
  4. 生命周期钩子：了解Vue实例的生命周期
  5. Vue 3：了解Vue的最新版本及其新特性

5. 完整项目结构（使用Vue CLI创建）

如果你使用Vue CLI创建项目，典型的项目结构如下：

my-project/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── package.json
└── README.md

希望这个简单的教程能帮助你开始Vue.js的学习之旅！

相关文章：

从0开始学vue：实现一个简单页面

Vue.js 是一个渐进式JavaScript框架&#xff0c;用于构建用户界面。下面我将带你从零开始学习Vue.js并创建一个简单的可运行页面。 1. 准备工作 首先&#xff0c;你需要了解几种学习Vue.js的方式&#xff1a; 方式一&#xff1a;使用CDN引入&#xff08;最简单的方式&#x…...

编程日记 2025/6/3 19:27:14

在机器视觉测量和机器视觉定位中，棋盘格标定如何影响精度

棋盘格标定是机器视觉（尤其是基于相机的系统）中进行相机内参（焦距、主点、畸变系数）和外参（相机相对于世界坐标系的位置和姿态）标定的经典且广泛应用的方法。它的质量直接、显著且多方面地影响最终的视觉测量和定位精度。 以下是棋盘格标定如何影响精度的详细分析： 标定…...

编程日记 2025/6/3 22:53:18

CppCon 2014 学习: C++ Test-driven Development

“Elephant in the Room”这个比喻常用来形容那些大家都知道但没人愿意讨论的重大问题。 这段内容讲的是软件质量管理的经典做法和潜在的问题&#xff1a; 经典做法&#xff1a;开发完成后才进行人工测试&#xff08;manual testing after creation&#xff09;。隐喻“Cape o…...

编程日记 2025/6/3 20:07:54

RAGflow详解及实战指南

目录 前言 一、RAGflow核心技术解析 1. 技术原理&#xff1a;检索与生成的协同进化 2. 架构设计&#xff1a;分层模块化与高扩展性 3. 核心优势&#xff1a;精准、高效、安全 二、RAGflow实战应用场景 1. 企业知识库搭建 2. 智能客服系统 3. 投资分析报告生成 4. 制造…...

编程日记 2025/6/3 21:57:32

JWT 不对外，Session ID 对外：构建安全可控的微服务认证架构

以下是一篇围绕“JWT不对外&#xff0c;Session ID对外”的专业架构设计文章&#xff0c;适用于技术团队评审、技术博客发布或系统设计文档引用&#xff1a; JWT 不对外&#xff0c;Session ID 对外&#xff1a;构建安全可控的微服务认证架构 在构建分布式微服务系统时&#x…...

编程日记 2025/6/4 2:46:39

[Godot] 如何导出安卓 APK 并在手机上调试

在之前的文章中&#xff0c;我们已经详细介绍了如何配置 Godot 的安卓应用开发环境&#xff0c;包括安装 Android SDK、配置 Java 环境、设置 Godot 的 Android 导出模板等。本篇文章将进一步讲解如何将 Godot 项目导出为安卓 APK 文件&#xff0c;并实现在手机上进行调试运行。…...

编程日记 2025/6/3 19:55:52

React 路由管理与动态路由配置实战

React 路由管理与动态路由配置实战 前言 在现代单页应用(SPA)开发中&#xff0c;路由管理已经成为前端架构的核心部分。随着React应用规模的扩大&#xff0c;静态路由配置往往难以满足复杂业务场景的需求&#xff0c;尤其是当应用需要处理权限控制、动态菜单和按需加载等高级…...

编程日记 2025/6/3 15:11:19

ZYNQ sdk lwip配置UDP组播收发数据

🚀 一、颠覆认知：组播 vs 单播 vs 广播 通信方式目标设备网络负载典型应用场景单播1对1O(n)SSH远程登录广播1对全网O(1)ARP地址解析组播1对N组O(1)视频会议/物联网群控创新价值：在智能工厂中，ZYNQ通过组播同时控制100台AGV小车，比传统单播方案降低92%网络流量！ 🔧 二、…...

编程日记 2025/6/3 12:10:43

11.21 LangGraph多轮对话系统实战：三步构建高效信息整理引擎，效率提升300%！

关键词：LangGraph 工作流设计, 信息整理助理, 多轮对话系统, 状态管理, 条件分支控制 信息整理助理工作流设计 信息整理助理需要完成 多源数据收集 → 信息分类 → 深度分析 → 结构化输出 的完整流程。通过 LangGraph 的图结构工作流，可实现复杂逻辑的模块化编排： #mermai…...

编程日记 2025/6/3 19:20:15

高光谱成像相机：基于高光谱成像技术的玉米种子纯度检测研究

种子纯度是衡量种子质量的核心指标之一&#xff0c;直接影响农作物产量与品质。传统检测方法&#xff08;如形态学观察、生化分析&#xff09;存在耗时长、破坏样本、依赖人工等缺陷。近年来&#xff0c;高光谱成像技术因其融合光谱与图像信息的优势&#xff0c;成为无损检测领…...

编程日记 2025/6/4 2:57:27

Linux《文件系统》

在之前的系统IO当中已经了解了“内存”级别的文件操作&#xff0c;了解了文件描述符、重定向、缓冲区等概念&#xff0c;在了解了这些的知识之后还封装出了我们自己的libc库。接下来在本篇当中将会将视角从内存转向磁盘&#xff0c;研究文件在内存当中是如何进行存储的&#xf…...

编程日记 2025/6/4 2:40:26

NLP学习路线图（十六）：N-gram模型

一、为何需要语言模型&#xff1f;概率视角下的语言本质 自然语言处理的核心挑战在于让机器“理解”人类语言。这种理解的一个关键方面是处理语言的歧义性、创造性和结构性。语言模型&#xff08;Language Model, LM&#xff09;为此提供了一种强大的数学框架&#xff1a;它赋…...

编程日记 2025/6/3 12:45:23

【Python办公】将Excel表格转json(字典)数据-可自定义key和value

目录 专栏导读背景介绍库的安装数据源准备代码1:key1列，value所有列代码1:key多列，value所有列代码3:key自选，value自选总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手 🏳️‍🌈 博客主页：请点击——> 一晌小贪欢的博客主页求关…...

编程日记 2025/6/3 12:06:54

Java内存区域与内存溢出异常分析与解决

在 Java 开发中&#xff0c;内存管理和内存溢出异常&#xff08; OutOfMemoryError&#xff09;是一个至关重要的主题。Java 虚拟机&#xff08;JVM&#xff09;的内存区域分为多个部分&#xff0c;每个区域都有其特定的用途和限制。当这些区域的内存耗尽时&#xff0c;就会触发…...

编程日记 2025/6/3 11:45:42

Python训练第四十天

DAY 40 训练和测试的规范写法 知识点回顾&#xff1a; 彩色和灰度图片测试和训练的规范写法&#xff1a;封装在函数中展平操作&#xff1a;除第一个维度batchsize外全部展平dropout操作&#xff1a;训练阶段随机丢弃神经元&#xff0c;测试阶段eval模式关闭dropout 昨天我们介绍…...

编程日记 2025/6/3 21:06:59

硬件实时时钟（RTC）

硬件实时时钟&#xff08;RTC&#xff09;详解 硬件实时时钟&#xff08;Real-Time Clock&#xff0c;RTC&#xff09;是计算机主板上的一个独立计时芯片&#xff0c;用于在系统关机后持续记录时间。它不依赖操作系统&#xff0c;由纽扣电池&#xff08;如CR2032&#xff09;供…...

编程日记 2025/6/3 20:56:38

InternVL2.5-多模态大模型评估专业图片

具备图像理解功能的大模型InternVL2.5&#xff0c;能有效解析大部分图片。 对于专业图片如医学细胞切片&#xff0c;从专业角度解析&#xff0c;能推动模型应用到更广泛的领域。 InternVL2.5解析示例 prompt(胸部癌变细胞图片,来自PanNuke) 请评估这个组织的风险 InternVL2.…...

编程日记 2025/6/3 21:40:38

医疗数理范式化：从范式迁移到认知革命的深度解析

引言 在当代医疗领域，数理思维已经从辅助工具逐渐发展成为核心决策支持系统的关键组成部分。随着数字技术的迅猛发展，医疗行业正经历着前所未有的变革，而数理思维作为这一变革的核心驱动力，正在深刻重塑医疗实践的方方面面。数理思维在医疗领域的应用，本质上是将抽象的数…...

编程日记 2025/6/4 2:54:39

图神经网络在信息检索重排序中的应用：原理、架构与Python代码解析

现代信息检索系统和搜索引擎普遍采用两阶段检索架构&#xff0c;在人工智能应用中也被称为检索增强生成&#xff08;Retrieval-Augmented Generation, RAG&#xff09;。在初始检索阶段&#xff0c;系统采用高效的检索方法&#xff0c;包括词汇检索算法&#xff08;如BM25&…...

编程日记 2025/6/3 19:23:16

leetcode hot100 二叉树（一）

1.二叉树的中序遍历 中序遍历&#xff08;中根遍历&#xff09;&#xff1a;左-根-右顺序&#xff0c;递归实现。注意设置递归终止条件。 class Solution { public:void search(TreeNode* root,vector<int>& ans){if(!root) return ;search(root->left,ans);ans.…...

编程日记 2025/6/3 15:03:14

【技术支持】安卓11开机启动设置

<!-- 开机自启动权限 --><uses-permission android:name"android.permission.RECEIVE_BOOT_COMPLETED" /><!-- 自启动权限 --><uses-permission android:name"android.permission.REQUEST_IGNORE_BATTERY_OPTIMIZATIONS" /><!-…...

编程日记 2025/6/3 12:46:44

现代数据湖架构全景解析：存储、表格式、计算引擎与元数据服务的协同生态

本文全面剖析现代数据湖架构的核心组件，深入探讨对象存储（OSS/S3）、表格式（Iceberg/Hudi/Delta Lake）、计算引擎（Spark/Flink/Presto）及元数据服务（HMS/Amoro）的协作关系，并提供企业级选型指南。 一、数据湖架构演进与核心价值 数据湖架构演进历程 现代数据湖核心价…...

编程日记 2025/6/3 16:03:21

全志F1c200开发笔记——移植Debian文件系统

1.搭建环境 sudo apt install qemu-user-static -y sudo apt install debootstrap -y mkdir rootfs 2.拉取文件系统 这边我参照墨云大神的文档&#xff0c;但是华为镜像已经没有armel了&#xff0c;我找到了官方仓库&#xff0c;还是有的&#xff0c;拉取速度比较慢 sudo d…...

编程日记 2025/6/3 23:09:43

dis css port brief 命令详细解释

华为交换机命令 display css port brief 详细解释 display css port brief 是华为交换机中用于 快速查看堆叠&#xff08;CSS&#xff0c;Cluster Switch System&#xff09;端口状态及关键参数 的命令&#xff0c;适用于日常运维、堆叠链路健康检查及故障定位。以下是该命令的…...

编程日记 2025/6/3 23:37:15

支持功能安全ASIL-B的矩阵管理芯片IS32LT3365，助力ADB大灯系统轻松实现功能安全等级

随着自动驾驶技术的快速发展&#xff0c;汽车前灯智能化也越来越高。自适应远光灯 (ADB) 作为一种智能照明系统&#xff0c;在提升驾驶安全性和舒适性方面发挥着重要作用。ADB 系统通过摄像头和传感器获取前方道路信息&#xff0c;例如来车的位置、距离和速度&#xff0c;并根据…...

编程日记 2025/6/3 19:01:14

BFS入门刷题

目录 P1746 离开中山路 P1443 马的遍历 P1747 好奇怪的游戏 P2385 [USACO07FEB] Bronze Lilypad Pond B P1746 离开中山路 #include <iostream> #include <queue> #include <cstring> using namespace std; int n; int startx, starty; int endx, endy; …...

编程日记 2025/6/4 0:17:15

UE5 编辑器工具蓝图

文章目录 简述使用方法样例自动生成Actor&#xff0c;并根据模型的包围盒设置Actor的大小批量修改场景中Actor的属性&#xff0c;设置Actor的名字&#xff0c;设置Actor到指定的文件夹 简述 使用编辑器工具好处是可以在非运行时可以对资源或场景做一些操作&#xff0c;例如自动…...

编程日记 2025/6/3 12:12:55

手写multi-head Self-Attention，各个算子详细注释版

文章目录 MultiHeadAttentionFormal的实现操作详解1. &#x1f50d; attention_mask2. &#x1f50d; matmul✅ 其他实现方式1. 使用 运算符&#xff08;推荐简洁写法&#xff09;2. 使用 torch.einsum()&#xff08;爱因斯坦求和约定&#xff09;3. 使用 torch.bmm()&#xf…...

编程日记 2025/6/3 13:36:28

基于 Three.js 的文本粒子解体效果技术原理剖析

文章目录 一、整体架构与核心库引入二、Three.js 场景初始化三、文本粒子数据创建五、动画与交互实现在前端开发领域，通过代码实现炫酷的视觉效果总能给用户带来独特的体验。本文将深入剖析一段基于 Three.js 的代码，解读其实现文本粒子解体效果的技术原理。 实现效果： 一、…...

编程日记 2025/6/3 20:06:25

Vue组件定义

下面，我们来系统的梳理关于 Vue 组件定义 的基本知识点 一、组件化核心思想 组件（Component） 是 Vue 的核心功能，允许将 UI 拆分为独立可复用的代码单元。每个组件包含： 模板：声明式渲染结构逻辑：处理数据与行为样式：作用域 CSS（通过 <style scoped>）二、组件…...

编程日记 2025/6/3 18:17:58