引言

Vue.js 是一套用于构建用户界面的渐进式JavaScript框架,它以简洁、高效、灵活著称。本教程旨在帮助初学者从零开始,逐步深入掌握Vue.js,并通过实战项目来巩固所学知识。

第一部分:Vue.js 入门

1.1 Vue.js 简介

Vue.js 是由尤雨溪(Evan You)创建的,于2014年发布。它遵循MVVM(Model-View-ViewModel)设计模式,将数据绑定、组件化和响应式编程融入其中,使得开发者可以更加专注于业务逻辑。

1.2 安装与配置

1.2.1 安装Node.js与npm

Vue.js 需要Node.js环境,因此首先需要安装Node.js。安装完成后,npm(Node Package Manager)将随之安装。

# 下载Node.js安装包
https://nodejs.org/en/download/

# 安装Node.js
# (根据操作系统选择合适的安装方式)

# 验证安装
node -v
npm -v

1.2.2 安装Vue.js CLI

Vue.js CLI(命令行界面)可以帮助我们快速搭建Vue.js项目。

# 安装Vue.js CLI
npm install -g @vue/cli

# 验证安装
vue --version

1.3 创建Vue.js项目

使用Vue.js CLI创建一个新项目。

# 创建项目
vue create my-project

# 进入项目目录
cd my-project

1.4 Vue.js 基本概念

1.4.1 数据绑定

Vue.js 允许我们将数据绑定到HTML元素上,当数据变化时,对应的HTML元素也会自动更新。

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 数据绑定</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
  </script>
</body>
</html>

1.4.2 计算属性与侦听器

计算属性和侦听器可以帮助我们实现更复杂的数据处理逻辑。

new Vue({
  el: '#app',
  data: {
    firstName: '',
    lastName: ''
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  watch: {
    fullName(newVal) {
      console.log('姓名已改变:', newVal)
    }
  }
})

第二部分:Vue.js 进阶

2.1 Vue.js 组件

组件是Vue.js的核心概念之一,它允许我们将复杂的页面拆分成更小的、可复用的部分。

2.1.1 创建组件

// components/HelloWorld.vue
<template>
  <div>你好,Vue.js!</div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

2.1.2 使用组件

<template>
  <div id="app">
    <hello-world></hello-world>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

2.2 Vue.js 路由

Vue Router 是Vue.js的官方路由管理器,它可以帮助我们实现单页面应用(SPA)的页面跳转。

2.2.1 安装Vue Router

npm install vue-router --save

2.2.2 配置路由

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HelloWorld
    }
  ]
})

第三部分:Vue.js 实战

3.1 项目实战:待办事项列表

在这个实战项目中,我们将创建一个待办事项列表,实现增删改查等功能。

3.1.1 项目结构

src/
|-- assets/
|-- components/
|   |-- TodoList.vue
|   |-- TodoItem.vue
|-- App.vue
|-- main.js

3.1.2 实现功能

  1. 创建 TodoList.vue 组件,用于展示待办事项列表。
  2. 创建 TodoItem.vue 组件,用于展示单个待办事项。
  3. App.vue 中使用 TodoListTodoItem 组件。
  4. 实现添加、删除、修改待办事项的功能。

结语

本教程从Vue.js入门到实战,帮助您逐步掌握Vue.js编程技能。通过实际项目练习,您可以更好地理解和应用Vue.js。祝您学习愉快!