[教程]掌握Vue.js：从入门到实战项目全解析

csdn大佬

发布于 2025-07-06 09:14:42

1. Vue.js 简介Vue.js 是一款轻量级的前端 JavaScript 框架，由尤雨溪开发。它以其简洁的语法、组件化思想和高效的数据绑定机制，成为了现代 Web 开发的热门选择。2. Vue....

1. Vue.js 简介

Vue.js 是一款轻量级的前端 JavaScript 框架，由尤雨溪开发。它以其简洁的语法、组件化思想和高效的数据绑定机制，成为了现代 Web 开发的热门选择。

2. Vue.js 入门

2.1 安装与配置

通过 CDN 链接直接引入：<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
使用 npm 安装：npm install vue

2.2 Hello World

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

2.3 数据绑定

Vue.js 提供了双向数据绑定机制，使得数据与视图保持同步。

<!DOCTYPE html>
<html>
<head> <title>Data Binding</title>
</head>
<body> <div id="app"> <input v-model="message"> <p>{{ message }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
</body>
</html>

2.4 指令

Vue.js 提供了一系列指令，如 v-if、v-for、v-model 等，用于简化 DOM 操作和数据处理。

<!DOCTYPE html>
<html>
<head> <title>Directives</title>
</head>
<body> <div id="app"> <p v-if="seen">现在你看到我了</p> <button @click="seen = !seen">切换</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { seen: true } }) </script>
</body>
</html>

3. Vue.js 组件

组件是 Vue.js 的核心概念之一，可以将可复用的代码块封装成组件，提高代码可维护性。

<!DOCTYPE html>
<html>
<head> <title>Components</title>
</head>
<body> <div id="app"> <my-component></my-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> Vue.component('my-component', { template: '<div>这是一个组件</div>' }) var app = new Vue({ el: '#app' }) </script>
</body>
</html>

4. Vue.js 实战项目

4.1 To-Do List

<!DOCTYPE html>
<html>
<head> <title>To-Do List</title>
</head>
<body> <div id="app"> <input v-model="newTodo" @keyup.enter="addTodo"> <ul> <li v-for="(todo, index) in todos"> {{ todo.text }} <button @click="removeTodo(index)">删除</button> </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { newTodo: '', todos: [] }, methods: { addTodo: function() { var todo = { text: this.newTodo } this.todos.push(todo) this.newTodo = '' }, removeTodo: function(index) { this.todos.splice(index, 1) } } }) </script>
</body>
</html>

4.2 Todo List - 使用 Vue Router

<!DOCTYPE html>
<html>
<head> <title>Todo List with Vue Router</title>
</head>
<body> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> <router-view></router-view> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.6/dist/vue-router.js"></script> <script> var Home = { template: '<div>首页</div>' } var About = { template: '<div>关于</div>' } var router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }) var app = new Vue({ router }).$mount('#app') </script>
</body>
</html>

5. 总结

Vue.js 是一款优秀的 JavaScript 框架，适合构建各种规模的应用。通过本文的学习，您可以快速掌握 Vue.js 的基本用法和实战项目开发。希望您能在实际项目中运用所学知识，不断提升自己的技能。

一个月内的热帖推荐