Vue基础入门：核心概念与开发环境搭建
(5) feilong.org 修订于2026-06-24 10:23:46 vue教程什么是Vue.js？
Vue.js是一款渐进式JavaScript框架，专注于构建用户界面。其核心特性包括响应式数据绑定、组件化开发和虚拟DOM技术，能够帮助开发者高效地创建动态网页。通过本教程，你将掌握Vue的基础概念并搭建完整的开发环境。
---
核心概念解析
1. 响应式数据绑定
Vue通过
|
1 |
{{}} |
语法实现双向数据绑定，当数据变化时视图自动更新。
|
1 2 |
<!-- 模板 --> <p>{{ message }}</p> |
|
1 2 3 4 5 6 7 |
// 脚本 new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); |
原理说明： Vue利用Object.defineProperty劫持数据属性，通过getter和setter实现依赖追踪与视图更新。
---
2. 组件化开发
组件是Vue应用的基石，通过封装可复用的UI逻辑提升开发效率。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- 子组件：Greeting.vue --> <template> <div>{{ greeting }}</div> </template> <script> export default { props: ['name'], computed: { greeting() { return <pre>Hello, ${this.name}! |
;
}
}
};
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- 父组件：App.vue --> <template> <Greeting name="Vue" /> </template> <script> import Greeting from './Greeting.vue'; export default { components: { Greeting } }; </script> |
---
3. 指令系统
Vue提供了丰富的指令（Directives）简化DOM操作：
-
|
1 |
v-if |
：条件渲染
-
|
1 |
v-for |
：列表循环
-
|
1 |
v-model |
：表单绑定
|
1 2 3 |
<!-- 表单示例 --> <input v-model="userInput" placeholder="输入内容"> <p>当前值：{{ userInput }}</p> |
---
开发环境搭建指南
步骤1：安装Node.js与npm
确保已安装[Node.js](https://nodejs.org)（包含npm包管理器）。验证版本：
|
1 2 |
node -v npm -v |
步骤2：创建Vue项目
使用Vue CLI快速生成项目骨架：
|
1 2 |
npm install -g @vue/cli vue create my-vue-app |
选择默认配置或自定义功能（如Babel、路由等）。
步骤3：启动开发服务器
进入项目目录并运行：
|
1 2 |
cd my-vue-app npm run serve |
访问
|
1 |
http://localhost:8080 |
查看本地开发服务器。
---
实战案例：Todo List应用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <div> <input v-model="newTask" @keyup.enter="addTask" placeholder="输入任务"> <ul> <li v-for="(task, index) in tasks" :key="index">{{ task }}</li> </ul> </div> </template> <script> export default { data() { return { newTask: '', tasks: [] }; }, methods: { addTask() { if (this.newTask.trim()) { this.tasks.push(this.newTask); this.newTask = ''; } } } }; </script> |
---
常见问题与解决方案
1. 开发服务器无法启动：检查端口占用或尝试
|
1 |
npm run dev |
替代serve。
2. 组件未渲染：确认组件注册是否正确，检查拼写错误（如
|
1 |
components: { Greeting } |
）。
3. 响应式失效：使用Vue.set()或
|
1 |
this.$set() |
修改数组/对象属性时触发更新。
---
通过本教程，你已掌握Vue的核心概念与开发环境搭建流程。下一步可深入学习路由管理（Vue Router）、状态管理（Vuex）及构建优化技巧，逐步构建复杂应用。
更新网址：https://feilong.org/vue-basics-core-concepts-setup
最初发布：20260624 10:23:46 feilong.org 于广州
加入收藏夹，查看更方便。