Vue 2 用法详细讲解：从基础到进阶

CarlowZJ

已于 2025-05-27 23:25:46 修改

阅读量1k

点赞数 12

文章标签： vue.js 前端 javascript

于 2025-02-17 10:29:19 首次发布

本文链接：https://blog.youkuaiyun.com/csdn122345/article/details/145676623

版权

（二）父子组件的 Props 和 Events 通信

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。Vue 2 是其第二个主版本，广泛应用于前端开发。本文将详细介绍 Vue 2 的基本用法、核心概念、组件化开发、状态管理和路由基础，帮助你快速掌握 Vue 2 的开发技能。

一、Vue 2 环境搭建

（一）安装 Vue CLI

Vue CLI 是一个命令行工具，用于快速搭建 Vue 项目。

bash复制

npm install -g @vue/cli

安装完成后，可以通过以下命令创建一个新的 Vue 2 项目：

bash复制

vue create my-vue-app

在创建过程中，可以选择 Vue 2 版本，并根据提示选择项目特性，如是否使用 Vue Router、Vuex 等。

（二）项目目录结构

创建项目后，Vue CLI 会自动生成一个标准的项目结构：

public/：存放静态文件，如 favicon.ico、index.html 等。
src/：存放项目的主要代码。
- assets/：存放静态资源，如图片、字体等。
- components/：存放 Vue 组件。
- router/：存放路由配置。
- store/：存放 Vuex 状态管理。
- views/：存放视图组件。
- App.vue：项目的入口组件。
- main.js：项目的入口文件。
- vue.config.js：配置项目的 Webpack 等选项。

二、Vue 2 基础语法

（一）数据绑定

Vue 的数据绑定通过响应式系统实现，确保数据和视图实时同步。

HTML复制

<div id="app">
  <p>{
  { message }}</p>
  <input v-model="message" />
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

当用户在输入框中输入文字时，message 的值会实时更新。