Vue.js框架使用详解

Vue.js 是一款轻量、渐进式的 JavaScript 框架，因其简单易用、高效灵活而备受开发者青睐。引入了更高效的响应式系统和组合式 API。本文将从 Vue.js 的基础知识入手，结合实际开发场景，带你快速掌握 Vue.js。

1. Vue.js 简介

特点： **渐进式框架：**可以逐步引入 Vue 的功能，无需一次性学习全部。 **双向绑定：**基于响应式数据驱动视图更新。 **组件化开发：**模块化构建用户界面，代码复用性高。 **生态完善：**配套工具如 Vue Router 和 Vuex 满足大部分开发需求。
适用场景：单页面应用（SPA）嵌入现有项目的组件开发

2. 快速搭建 Vue 开发环境

安装 Node.js Vue.js 依赖于 Node.js 的 npm 包管理工具。下载地址：Node.js 官方网站
创建项目使用 Vue CLI 快速生成项目：

npm install -g @vue/cli  # 全局安装 Vue CLI
vue create my-vue-app    # 创建 Vue 项目
cd my-vue-app            # 进入项目目录
npm run serve            # 启动开发服务器

src/main.js：入口文件，创建 Vue 实例。
src/App.vue：根组件。
src/components/：存放子组件。

3. Vue 核心概念

创建 Vue 实例

Vue 的基本使用从一个 Vue 实例开始：

const app = Vue.createApp({
  data() {
    return { message: 'Hello Vue!' };
  }
});
app.mount('#app'); // 挂载到 DOM

模板语法数据绑定：

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

指令：

<p v-if="isVisible">显示文本</p> 
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li> 
</ul>

事件绑定：

<button @click="handleClick">点击我</button>

组件化开发创建一个组件：

// src/components/HelloWorld.vue
<template>
  <h1>{{ title }}</h1>
</template>
<script>
export default {
  props: ['title'], // 接收父组件传递的参数
};
</script>

使用组件：

<HelloWorld title="欢迎使用 Vue.js!" />

4.示例

<template>
  <div>
    <h1>待办事项</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="新增待办事项" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push(this.newTodo.trim());
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>