Vue.js 快速入门指南

Vue.js 是目前前端项目中使用最广泛的框架之一，它与 jQuery、React、Angular 齐名，但以轻量、易学、渐进式设计著称。本质上 Vue 就是一个 JavaScript 文件，可以通过直接引入、CDN 或官方脚手架工具来使用。本文将从零开始，带你完整掌握 Vue.js 的核心概念和实战

一、Vue.js 安装与项目搭建

1.1 三种引入方式

方式一：直接下载 vue.js 文件

从官网下载最新的 vue.js 文件，通过 <script> 标签引入：

<script src="./vue.min.js"></script>

方式二：CDN 方式引入

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

方式三：通过 vue-cli 脚手架（推荐）

npm i -g @vue/cli

1.2 创建项目

vue create my-project

执行后会在当前目录生成 my-project 目录，包含完整的 Vue 工程结构。如果需要离线初始化（网络受限场景），可以提前下载离线包，通过 --offline 参数进行离线创建。

1.3 关键 npm 命令

Vue 项目开发中，以下几个 npm 命令是最常用的：

# 安装依赖（会生成 node_modules 目录，此目录不上传 git）
npm install

# 运行开发服务器（支持热更新，修改代码实时生效）
npm run serve

# 打包构建
npm run build              # 生产环境
npm run build:dev          # 开发环境
npm run build:test         # 测试环境
npm run build:prod         # 生产环境

这些命令其实都是语法糖，真正的命令定义在 package.json 的 scripts 对象中：

{
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "serve": "vue-cli-service serve",
    "build:dev": "vue-cli-service build --mode develop",
    "build:test": "vue-cli-service build --mode test",
    "build:prod": "vue-cli-service build",
    "lint": "eslint --ext .js,.vue src"
  }
}

npm run 后面的后缀就是选择使用 scripts 中的哪个配置。dev 和 serve 都能运行工程，区别在于底层使用的构建工具不同。

[图片占位符：Vue 项目目录结构说明]

二、数据绑定

Vue 最核心的特性之一就是数据绑定。根据使用场景不同，有三种绑定方式。

2.1 插值表达式 {{ }}

当变量需要显示在 HTML 标签内容中时，使用双花括号：

<p>{{ message }}</p>

变量在 <script> 的 data 域中定义：

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

2.2 属性绑定 v-bind（缩写 :）

当变量需要绑定到 HTML 属性上时，使用 v-bind 指令，缩写为冒号 :：

<!-- 完整语法 -->
<img v-bind:src="imageUrl">

<!-- 缩写语法（推荐） -->
<img :src="imageUrl">

2.3 双向绑定 v-model

v-model 实现了表单输入与数据的双向绑定，是 Vue 中最常用的指令之一：

<input type="text" v-model="username" placeholder="请输入用户名">
<p>你输入的内容是：{{ username }}</p>

<script>
export default {
  data() {
    return {
      username: ''
    }
  }
}
</script>

记忆口诀：标签内容用 {{ }}，标签属性用 :，表单输入用 v-model。

三、条件渲染

3.1 v-if / v-else

v-if 根据条件决定是否渲染元素，条件为 false 时元素不会出现在 DOM 中：

<input placeholder="验证码" v-if="!sendCodeEnable" readonly="readonly">
<input placeholder="验证码" v-else>

3.2 v-show

v-show 也用于条件显示，但与 v-if 不同的是，v-show 只是切换 CSS 的 display 属性，元素始终存在于 DOM 中：

<p v-show="isVisible">这段文字可以显示/隐藏</p>

v-if 与 v-show 的区别：

特性	v-if	v-show
切换方式	DOM 的创建和销毁	CSS display 切换
初始渲染	条件为 false 时不渲染	始终渲染
切换开销	较高	较低
适用场景	运行时条件很少改变	需要频繁切换

四、列表渲染 v-for

v-for 用于动态渲染列表数据，是构建动态页面的核心指令：

<ul>
  <li v-for="item in tripList">
    <div class="trip-item">
      <span>{{ item.tradeTime }}</span>
      <span v-if="item.payStatus == 3">已完成</span>
      <span v-else>进行中</span>
      <p>进站：{{ item.inStationName }}</p>
      <p>出站：{{ item.outStationName }}</p>
      <p>金额：￥{{ item.payAmount }}</p>
    </div>
  </li>
</ul>

tripList 是一个对象数组，在 data 中定义：

data() {
  return {
    tripList: [
      { tradeTime: '2024-01-01', payStatus: 3, inStationName: 'A站', outStationName: 'B站', payAmount: 3.0 },
      { tradeTime: '2024-01-02', payStatus: 1, inStationName: 'C站', outStationName: 'D站', payAmount: 5.0 }
    ]
  }
}

最佳实践：建议为每个 v-for 项添加唯一的 :key 属性，帮助 Vue 高效地更新 DOM。

五、事件处理

5.1 v-on 与 @ 缩写

Vue 中使用 v-on 指令绑定事件，缩写为 @ 符号：

<!-- 完整语法 -->
<button v-on:click="handleClick">点击</button>

<!-- 缩写语法（推荐） -->
<button @click="handleClick">点击</button>

记忆口诀：属性后面跟变量用 : ，事件后面跟方法用 @。

5.2 方法定义

事件处理方法定义在 methods 域中：

<template>
  <div>
    <button @click="register()">注册</button>
  </div>
</template>

<script>
export default {
  methods: {
    register() {
      console.log('注册按钮被点击了');
    }
  }
}
</script>

六、获取表单输入值的两种方式

6.1 使用 ref 获取

<template>
  <div>
    <input type="text" placeholder="手机号码" ref="userphone">
    <input type="text" placeholder="密码" ref="userpass">
    <button @click="register()">注册</button>
  </div>
</template>

<script>
export default {
  methods: {
    register() {
      console.log(this.$refs.userphone.value);
      console.log(this.$refs.userpass.value);
    }
  }
}
</script>

6.2 使用 v-model 双向绑定（推荐）

<template>
  <div>
    <input type="text" placeholder="手机号码" v-model="userphone">
    <input type="text" placeholder="密码" v-model="userpass">
    <button @click="register()">注册</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userphone: "",
      userpass: ""
    }
  },
  methods: {
    register() {
      console.log(this.userphone, this.userpass);
    }
  }
}
</script>

七、组件基础

7.1 单文件组件结构

Vue 组件是一个独立的 .vue 文件，包含三个部分：

<template>
  <!-- HTML 模板 -->
</template>

<script>
// JavaScript 逻辑
export default {
  name: 'ComponentName',
  data() { return { } },
  methods: { }
}
</script>

<style>
/* CSS 样式 */
</style>

7.2 组件使用流程

1. 创建组件文件 MyComponent.vue
2. 在父组件中引入并注册

<script>
import MyComponent from './MyComponent.vue'

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

3. 在模板中使用

<template>
  <MyComponent />
</template>

八、页面路由（vue-router）

单页面应用（SPA）的核心就是路由。通过 vue-router 可以实现在不刷新页面的情况下切换视图。

8.1 定义路由

创建 router.js 文件：

import Vue from 'vue';
import VueRouter from 'vue-router';
import A from './components/A.vue';
import B from './components/B.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/a', component: A, name: 'A' },
  { path: '/b', component: B, name: 'B' },
  { path: '*', redirect: '/a' }  // 默认跳转到 A 页面
];

const router = new VueRouter({
  routes
});

export default router;

8.2 注册路由

在入口文件 main.js 中注册路由：

import Vue from 'vue'
import App from './App.vue'
import router from './router';

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,  // 注册路由
  render: h => h(App)
})

8.3 页面跳转

在组件中通过 this.$router.push() 实现跳转：

<!-- A 页面 -->
<template>
  <div>
    <h1>我是A页面</h1>
    <button @click="goToB">跳转到B</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToB() {
      this.$router.push({ name: 'B' });
    }
  }
}
</script>

8.4 router-view（关键）

这是一个新手常踩的坑。在 App.vue 中，必须使用 <router-view> 标签来指定路由组件的渲染位置：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

如果忘记加 <router-view>，点击跳转后 URL 会变化，但页面内容不会改变，因为路由组件没有地方渲染。

[图片占位符：Vue Router 工作原理示意图]

九、HTTP 请求（axios）

Vue 推荐使用 axios 作为 HTTP 请求工具。

9.1 全局配置

在 main.js 中引入并配置 axios：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

// 配置基础 URL
axios.defaults.baseURL = "http://10.255.60.138:8797/"
axios.defaults.headers.post['Content-Type'] = 'application/json'

9.2 在组件中使用

全局配置后，在任意组件中都可以通过 this.axios 直接调用，无需再次 import：

export default {
  methods: {
    async fetchData() {
      try {
        const response = await this.axios.post('/api/data', {
          param1: 'value1'
        });
        console.log(response.data);
      } catch (error) {
        console.error('请求失败:', error);
      }
    }
  }
}

十、计算属性与侦听器

10.1 计算属性 computed

计算属性基于依赖的数据自动缓存计算结果，只有在相关数据发生变化时才会重新计算：

export default {
  data() {
    return {
      price: 100,
      quantity: 3
    }
  },
  computed: {
    totalPrice() {
      return this.price * this.quantity;
    }
  }
}

10.2 侦听器 watch

侦听器用于在数据变化时执行异步或开销较大的操作：

export default {
  data() {
    return {
      keyword: ''
    }
  },
  watch: {
    keyword(newVal, oldVal) {
      // 搜索关键词变化时，发起搜索请求
      this.search(newVal);
    }
  },
  methods: {
    search(keyword) {
      // 发起搜索请求
    }
  }
}

十一、常用 JavaScript 工具技巧

11.1 定时函数

// 延时执行（1秒后执行一次）
setTimeout(function() {
  doSomething();
}, 1000);

// 周期执行（每1秒执行一次）
var timer = setInterval(function() {
  doSomething();
  if (shouldStop) {
    clearInterval(timer);  // 停止定时器
  }
}, 1000);

11.2 CSS 布局小贴士

• div 内元素默认垂直排列，如需水平排列，使用 display: flex;
• span 是行内元素，设置 padding-top 不生效，需添加 display: inline-block;
• 使用 margin-left 设置元素间距时，最好将左侧元素的 width 固定，预留好位置

十二、完整的 Vue 组件示例

下面是一个完整的 Vue 组件，综合运用了上述知识点：

<template>
  <div class="login-page">
    <div class="login-form">
      <input type="text" placeholder="手机号码" v-model="phone">
      <input type="password" placeholder="密码" v-model="password">
      <button @click="login">登录</button>
    </div>
    <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
    <div class="user-list" v-for="user in users" :key="user.id">
      <span>{{ user.name }}</span>
      <span>{{ user.phone }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      phone: '',
      password: '',
      errorMsg: '',
      users: []
    }
  },
  methods: {
    async login() {
      if (!this.phone || !this.password) {
        this.errorMsg = '请输入手机号和密码';
        return;
      }
      try {
        const res = await this.axios.post('/api/login', {
          phone: this.phone,
          password: this.password
        });
        if (res.data.success) {
          this.$router.replace('/home');
        } else {
          this.errorMsg = res.data.message;
        }
      } catch (err) {
        this.errorMsg = '网络错误，请重试';
      }
    }
  },
  mounted() {
    // 页面加载时获取用户列表
    this.axios.get('/api/users').then(res => {
      this.users = res.data;
    });
  }
}
</script>

<style scoped>
.login-form {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 0 auto;
  padding: 20px;
}
.login-form input {
  margin-bottom: 10px;
  padding: 10px;
}
.error {
  color: red;
  text-align: center;
}
</style>

十三、总结

Vue.js 的学习曲线相对平缓，核心概念可以归纳为以下几点：

概念	用途	语法
插值表达式	显示数据	{{ variable }}
v-bind	绑定属性	:attr="variable"
v-model	双向绑定	v-model="variable"
v-if / v-else	条件渲染	v-if="condition"
v-for	列表渲染	v-for="item in list"
v-on	事件绑定	@click="method"
vue-router	页面路由	this.$router.push()
axios	HTTP 请求	this.axios.post()

记住两个核心口诀：

• 属性绑定用冒号（:），事件绑定用 @
• router-view 不能忘，路由组件靠它渲染

从这些基础概念出发，结合官方文档和实战项目练习，你就能快速掌握 Vue.js 开发。

---

来源：整理自 zyh/LearnVue.MD 学习笔记