[教程]掌握Vue.js与Vue Router，实战项目轻松上手

引言Vue.js 是一个流行的前端JavaScript框架，它通过组件化的方式构建用户界面，易于上手且灵活。Vue Router 是 Vue.js 的官方路由管理器，它允许你为单页面应用（SPA）添加...

引言

Vue.js 是一个流行的前端JavaScript框架，它通过组件化的方式构建用户界面，易于上手且灵活。Vue Router 是 Vue.js 的官方路由管理器，它允许你为单页面应用（SPA）添加路由功能。本文将详细介绍如何掌握 Vue.js 和 Vue Router，并通过实战项目来帮助你轻松上手。

Vue.js 简介

Vue.js 是一个渐进式JavaScript框架，易于上手，能够帮助开发者构建高性能的用户界面。以下是 Vue.js 的核心特性：

• 响应式数据绑定：Vue.js 可以自动追踪依赖并在数据变化时更新 DOM。
• 组件化：将应用分解为可复用的组件，便于管理和维护。
• 虚拟DOM：通过虚拟DOM来优化DOM操作，提高性能。

Vue Router 简介

Vue Router 是 Vue.js 的官方路由管理器，它允许你为单页面应用添加路由功能。以下是 Vue Router 的核心特性：

• 单页面应用（SPA）支持：通过动态路由，实现单页面应用中的页面跳转。
• 路由配置：通过配置文件定义路由规则，轻松管理路由。
• 路由守卫：在路由变化时执行一些逻辑，如权限验证、页面加载等。

实战项目：创建一个简单的待办事项应用

以下是一个简单的待办事项应用的实战项目，我们将使用 Vue.js 和 Vue Router 来实现。

项目结构

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

1. 安装 Vue.js 和 Vue Router

npm install vue vue-router

2. 创建组件

在 components 文件夹中创建 TodoList.vue 和 TodoItem.vue。

TodoList.vue

<template> <div> <h1>待办事项</h1> <TodoItem v-for="item in todos" :key="item.id" :todo="item" @remove="removeTodo" /> <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加待办事项" /> </div>
</template>
<script>
import TodoItem from './TodoItem.vue';
export default { components: { TodoItem, }, data() { return { todos: [], newTodo: '', }; }, methods: { addTodo() { if (this.newTodo.trim() === '') return; this.todos.push({ id: Date.now(), text: this.newTodo, completed: false, }); this.newTodo = ''; }, removeTodo(id) { this.todos = this.todos.filter((todo) => todo.id !== id); }, },
};
</script>

TodoItem.vue

<template> <div> <span :class="{ completed: todo.completed }">{{ todo.text }}</span> <button @click="remove">删除</button> </div>
</template>
<script>
export default { props: { todo: { type: Object, required: true, }, }, methods: { remove() { this.$emit('remove', this.todo.id); }, },
};
</script>
<style>
.completed { text-decoration: line-through;
}
</style>

3. 配置路由

在 router 文件夹中创建 index.js。

import Vue from 'vue';
import Router from 'vue-router';
import TodoList from '../components/TodoList.vue';
Vue.use(Router);
export default new Router({ routes: [ { path: '/', name: 'home', component: TodoList, }, ],
});

4. 创建 Vue 实例并挂载路由

在 main.js 中创建 Vue 实例并挂载路由。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({ router, render: (h) => h(App),
}).$mount('#app');

5. 创建 App.vue

<template> <div id="app"> <router-view/> </div>
</template>
<script>
export default { name: 'App',
};
</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>

总结

通过以上实战项目，你将学会如何使用 Vue.js 和 Vue Router 来创建一个简单的待办事项应用。这将帮助你更好地理解 Vue.js 和 Vue Router 的核心概念，为你在实际项目中应用这些技术打下坚实的基础。