- 💂 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】
- 🤟 一站式轻松构建小程序、Web网站、移动应用：👉注册地址
- 🤟 基于Web端打造的：👉轻量化工具创作平台
- 💅 想寻找共同学习交流，摸鱼划水的小伙伴，请点击【全栈技术交流群】
Vue.js 快速入门实战
Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。与其他框架不同，Vue 采用自底向上的增量开发设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。本文将带你快速入门 Vue.js，并通过一个简单的实战项目帮助你更好地理解和掌握 Vue 的基本用法。
1. 安装 Vue.js
在开始之前，确保你已经安装了 Node.js 和 npm（Node Package Manager）。你可以通过以下命令检查是否已经安装：
node -v
npm -v
如果没有安装，可以访问 Node.js 官方网站下载安装。
1.1 使用 Vue CLI 安装 Vue
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。你可以通过以下命令全局安装 Vue CLI：
npm install -g @vue/cli
安装完成后，你可以使用以下命令创建一个新的 Vue 项目：
vue create my-project
按照提示选择默认配置或自定义配置，稍等片刻，项目初始化完成。
1.2 使用 CDN 引入 Vue
如果你不想使用 Vue CLI，可以通过 CDN 引入 Vue.js。这对于快速测试或在简单项目中使用非常方便。你只需在 HTML 文件中加入以下代码：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
2. 创建一个简单的 Vue 项目
接下来，我们将通过一个简单的项目示例来学习 Vue 的基本用法。我们将创建一个简单的待办事项（To-Do List）应用。
2.1 创建项目结构
首先，创建一个新的文件夹，并在其中创建以下文件：
my-todo-app/
├── index.html
└── main.js
2.2 编写 HTML 文件
在 index.html 中编写以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue To-Do List</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>待办事项列表</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务">
<ul>
<li v-for="(todo, index) in todos" :key="index">
<span>{{ todo }}</span>
<button @click="removeTodo(index)">删除</button>
</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>
2.3 编写 JavaScript 文件
在 main.js 中编写以下内容：
new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addTodo() {
if (this.newTodo.trim() !== '') {
this.todos.push(this.newTodo.trim());
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
});
2.4 运行项目
打开 index.html 文件，你将看到一个简单的待办事项列表应用。你可以在输入框中输入任务并按回车键添加任务，也可以点击“删除”按钮删除任务。
3. 解析代码
3.1 HTML 文件
在 HTML 文件中，我们使用了一个 div 元素作为 Vue 实例的挂载点，并在其中添加了一个输入框和一个列表。输入框使用 v-model 指令绑定到 Vue 实例的数据属性 newTodo，并在 keyup.enter 事件上调用 addTodo 方法。列表使用 v-for 指令渲染每个任务，并为每个任务添加了一个“删除”按钮，点击按钮调用 removeTodo 方法。
3.2 JavaScript 文件
在 JavaScript 文件中，我们创建了一个新的 Vue 实例，并指定了挂载点 #app。在 data 选项中，我们定义了两个数据属性：newTodo 和 todos。在 methods 选项中，我们定义了两个方法：addTodo 和 removeTodo。addTodo 方法用于将新任务添加到任务列表中，removeTodo 方法用于从任务列表中删除任务。
4. 总结
通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。
接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！
⭐️ 好书推荐
《Vue.js 快速入门实战》
【内容简介】
Vue.js 快速入门实战以Vue.js的知识点为基础，结合TypeScript的使用，循序渐进地介绍了Vue.js 3.0（简称Vue3）的知识点和实战技巧，可以帮助零基础的读者掌握独立开发项目和部署项目上线的技术。全书共14章，包括Vue.js概述、搭建开发环境、Vue.js组合式API、Vue.js的模板语法、Vue.js的计算属性和侦听器、Vue.js中class和style的绑定、Vue.js的表单开发、Vue.js的组件开发、Vue.js的网络请求、Vue.js的状态管理、Vue.js的路由管理、Vue的项目部署、在线招聘网站开发实战以及招聘网站后台管理系统开发实战。
📚 京东购买链接：《Vue.js 快速入门实战》
