Vue.js框架使用详解

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

---

1. Vue.js 简介

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

---

2. 快速搭建 Vue 开发环境

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

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

3. 目录结构 常见目录：

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

---

3. Vue 核心概念

1. 创建 Vue 实例

   Vue 的基本使用从一个 Vue 实例开始：
   
   const app = Vue.createApp({
     data() {
    return { message: 'Hello Vue!' };
     }
   });
   app.mount('#app'); // 挂载到 DOM

2. 模板语法
   数据绑定：

   <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>

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

   // 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>