简单的vue笔记入门

🤖 Assistant

# 🚀 Vue.js 零基础全面指南

## 🌟 什么是 Vue.js？
- **Vue.js** 是一个用于构建用户界面的渐进式 JavaScript 框架
- 特点：**轻量**、**易学**、**高效**、**灵活**
- 核心概念：**组件化**、**数据驱动**、**响应式**
- 适用于从小型项目到大型应用的开发

---

## 📦 Vue 基础

### 1. Vue 的引入方式
- CDN 引入（适用于快速学习）
  ```html
  <script src="https://unpkg.com/vue@3"></script>

项目化引入（推荐）
1
npm install vue@next

2. 创建第一个 Vue 应用

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello Vue!"
      };
    }
  });
  app.mount('#app');
</script>

🧩 Vue 核心概念

1. 模板语法

<div id="app">
  <!-- 插值表达式 -->
  <p>{{ message }}</p>

  <!-- 指令 v-bind -->
  <a v-bind:href="url">链接</a>

  <!-- 指令 v-on -->
  <button v-on:click="sayHi">点击我</button>

  <!-- 指令 v-model -->
  <input v-model="username" placeholder="请输入用户名">
</div>

2. 响应式数据

const app = Vue.createApp({
  data() {
    return {
      message: "Hello Vue!",
      url: "https://vuejs.org",
      username: ""
    };
  },
  methods: {
    sayHi() {
      alert("Hi, " + this.username);
    }
  }
});

🛠️ Vue 组件化

1. 组件定义

// 全局组件
app.component('my-component', {
  template: `<div>这是我的组件</div>`
});

2. 组件使用

1	<my-component></my-component>

3. 局部组件

const LocalComponent = {
  template: `<div>这是局部组件</div>`
};

const app = Vue.createApp({
  components: {
    'local-component': LocalComponent
  }
});

🎨 Vue 单文件组件（SFC）

1. 文件结构

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increaseCount">点击 {{ count }} 次</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "我的组件",
      count: 0
    };
  },
  methods: {
    increaseCount() {
      this.count++;
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

2. 使用单文件组件

import MyComponent from './MyComponent.vue';

const app = Vue.createApp({
  components: {
    MyComponent
  }
});

🔗 Vue 常用指令

1. 条件渲染

1 2	<div v-if="isShow">显示内容</div> <div v-else>隐藏内容</div>

2. 列表渲染

1
2
3

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

3. 双向绑定

1 2	<input v-model="inputText"> <p>输入内容：{{ inputText }}</p>

🛠️ Vue CLI 项目搭建

1. 安装 Vue CLI

1	npm install -g @vue/cli

2. 创建项目

1	vue create my-project

3. 项目结构

my-project/
├── public/             # 静态资源
├── src/
│   ├── assets/         # 图片、字体等
│   ├── components/     # 组件
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
└── package.json        # 项目配置

🌐 Vue Router（路由管理）

1. 安装 Vue Router

1	npm install vue-router

2. 配置路由

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

3. 使用路由

1	<router-view></router-view>

🔄 Vuex（状态管理）

1. 安装 Vuex

1	npm install vuex

2. 创建 Store

import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});