Vue框架入门：成为前端忍者的速成课

本文链接：https://blog.csdn.net/rantengfei1986/article/details/135743282

欢迎加入 Vue 的世界，这里不是忍者村，但今天我们将快速学习如何成为一个 Vue 前端忍者。Vue 不仅轻量级、易学，而且强大灵活，正如忍者的飞镖一样精准有效！

1. 搭建你的忍者训练场（环境搭建）

首先，确保你的电脑上安装了 Node.js。这就像是忍者的基础体能训练。

Windows 系统

下载安装程序：访问 Node.js 官方网站 nodejs.org，并下载适用于 Windows 的安装程序（.msi）。你可以选择 LTS（长期支持）版本或最新版本。
运行安装程序：双击下载的文件，并按照安装向导的指示进行安装。
验证安装：安装完成后，打开命令提示符（cmd）并输入 node -v 和 npm -v 来检查 Node.js 和 npm（Node.js 的包管理器）是否已正确安装。

node -v 
npm -v

macOS 系统

使用 Homebrew：在 macOS 上，推荐使用 Homebrew（一个包管理器）来安装 Node.js。首先在终端中安装 Homebrew，然后运行 brew install node。

 brew install node

下载安装程序：作为替代方案，你也可以从 Node.js 官网下载 macOS 版本的安装程序，并遵循安装过程。
验证安装：在终端运行 node -v 和 npm -v 来检查安装。

node -v 
npm -v

Linux 系统

在 Linux 上，有多种方式安装 Node.js，具体取决于你使用的 Linux 发行版。以下是在 Ubuntu/Debian 系统上的安装步骤：

使用包管理器：打开终端，运行以下命令：

sudo apt update
sudo apt install nodejs
sudo apt install npm

通过 NodeSource PPA：你也可以使用 NodeSource PPA 安装特定版本的 Node.js。首先，运行用于添加 PPA 的命令，然后安装 Node.js。
验证安装：运行 node -v 和 npm -v 来确认安装。

node -v 
npm -v

2. 召唤你的 Vue 飞镖（安装 Vue CLI）

使用 Vue CLI（命令行界面）是快速搭建 Vue 项目的秘诀。
在终端中运行以下命令，安装 Vue CLI：

npm install -g @vue/cli

这就像是学习如何快速拔出飞镖。

3. 创建你的第一个 Vue 项目

现在，使用 Vue CLI 来创建你的第一个项目。在终端中运行：

vue create my-first-vue-project

这就像是你的第一次实战演练。

4. 进入项目，开始你的任务

cd my-first-vue-project
npm run serve

打开浏览器，访问 http://localhost:8080，你会看到你的 Vue 应用已经运行起来了。

5. 探索 Vue 的秘密（基础知识学习）

开始探索 Vue 的核心概念，如组件、模板语法、响应式数据等。
尝试修改 src/App.vue 文件，改变一些文本或样式，看看页面是如何实时更新的。

6. 实战练习（小项目实践）

练习是成为 Vue 忍者的关键。尝试构建一些小项目，比如待办事项列表或天气应用。
这些实战练习会帮助你巩固所学，并提升你的 Vue 技能。
提供一个简单的 Vue.js 示例，我们来创建一个基础的待办事项列表。这个例子将展示 Vue 的基本概念，如数据绑定、事件处理和列表渲染。假设你已经在你的项目中引入了 Vue.js。

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js 待办事项列表</title>
</head>
<body>
    <div id="app">
        <h1>待办事项列表</h1>
        <input type="text" v-model="newTodo" @keyup.enter="addTodo">
        <button @click="addTodo">添加</button>
        
        <ul>
            <li v-for="todo in todos" :key="todo.id">
                {{ todo.text }}
                <button @click="removeTodo(todo.id)">删除</button>
            </li>
        </ul>
    </div>

    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

JavaScript 部分
然后，我们需要写 Vue.js 代码来实现逻辑：

// app.js
new Vue({
    el: '#app',
    data: {
        newTodo: '',
        todos: []
    },
    methods: {
        addTodo() {
            if (this.newTodo.trim() === '') {
                return;
            }
            this.todos.push({ 
                id: Date.now(),
                text: this.newTodo 
            });
            this.newTodo = ''; // 清空输入框
        },
        removeTodo(id) {
            this.todos = this.todos.filter(todo => todo.id !== id);
        }
    }
});