0
Vue.js使用教程
                           
天天向上
发布： 2025-01-01 18:23:25
原创
811 人浏览过

Vue.js 是一个渐进式的 JavaScript 框架，主要用于构建用户界面，尤其擅长单页应用（SPA）的开发。Vue.js 的核心库专注于视图层，它通过简单的 API 和灵活的组件化结构，使得开发者能够高效构建动态的 web 应用。

本文将为你详细介绍 Vue.js 最新版本（Vue 3）的一些主要特性与使用方法，包括 组合式 API、组件通信、指令、Vue Router、Vuex（状态管理）等内容，帮助你快速入门并掌握 Vue.js。

1. 安装与环境设置

Vue 3 是 Vue.js 的最新版本，它引入了很多新的特性，比如组合式 API、性能优化等。你可以使用 Vue CLI 或者直接引入 CDN 来开始你的 Vue 项目。

1.1 使用 Vue CLI 创建项目

首先，你需要安装 Node.js 和 npm。然后，通过 Vue CLI 创建 Vue 3 项目。

# 安装 Vue CLI（如果还没有安装）
npm install -g @vue/cli

# 创建一个新的 Vue 3 项目
vue create my-project

# 选择 Vue 3 配置（Vue 3 默认支持组合式 API）
cd my-project
npm run serve

Vue 项目会在 http://localhost:8080 上运行。你可以根据需要选择默认配置或者自定义配置。

1.2 直接使用 CDN 引入 Vue

如果不想安装 Node.js，可以通过 CDN 引入 Vue.js：

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45/dist/vue.global.js"></script>

2. Vue 3 基础

2.1 Vue 实例

在 Vue 3 中，你可以使用 createApp 来创建一个 Vue 实例。

<div id="app"></div>

<script>
  const { createApp } = Vue;

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

在上面的代码中，我们使用了 Vue 3 中的 createApp 函数来创建一个 Vue 实例，并将它挂载到 DOM 元素 #app 上。data 函数返回一个对象，Vue 会把它作为响应式数据进行绑定。

2.2 模板语法（Template Syntax）

Vue 3 依然使用类似于 Vue 2 的模板语法：

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="updateMessage">Update Message</button>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        message: 'Hello, Vue 3!'
      };
    },
    methods: {
      updateMessage() {
        this.message = 'Message Updated!';
      }
    }
  }).mount('#app');
</script>
  • {{ message }}：数据绑定，Vue 会自动将数据渲染到模板中。
  • @click="updateMessage"：事件绑定，@click 是 v-on:click 的简写，表示点击按钮时执行 updateMessage 方法。

3. Vue 3 组合式 API (Composition API)

Vue 3 引入了组合式 API（Composition API），它提供了更强大的灵活性和复用性，尤其适合大型应用或复杂的组件逻辑。

3.1 setup 函数

在 Vue 3 中，所有的逻辑都可以放在一个 setup 函数中，这个函数在组件创建之前执行。setup 函数中可以使用 reactive、ref、computed、watch 等 API。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    const updateMessage = () => {
      message.value = 'Message Updated!';
    };

    return {
      message,
      updateMessage
    };
  }
};
</script>
  • ref：用于定义响应式数据，message.value 是其值的访问方式。
  • setup：用于定义组件的状态和方法，并将它们返回，以便在模板中使用。

3.2 响应式数据：ref 和 reactive

  • ref：用于创建基本数据类型的响应式变量。
  • reactive：用于创建对象或数组的响应式数据。
import { reactive, ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 基本类型的响应式数据
    const state = reactive({ count: 0, message: 'Hello' }); // 对象的响应式数据

    return {
      count,
      state
    };
  }
};
  • ref 适用于简单数据类型（如数字、字符串、布尔值等）。
  • reactive 适用于对象和数组等复杂数据类型。

3.3 计算属性：computed

computed 用于创建依赖于响应式数据的计算属性。

import { computed, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount
    };
  }
};

3.4 监听：watch 和 watchEffect

  • watch 用于侦听某个响应式数据的变化。
  • watchEffect 是一个副作用函数，它会自动侦听函数体内使用的所有响应式数据。
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 使用 watch 监听 count 变化
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    return {
      count
    };
  }
};

4. 组件间的通信

Vue 提供了几种方式来进行组件间的通信。

4.1 父组件向子组件传递数据：props

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
};
</script>

4.2 子组件向父组件传递数据：$emit

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @message-changed="handleMessageChange" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleMessageChange(newMessage) {
      console.log(newMessage);
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="changeMessage">Change Message</button>
</template>

<script>
export default {
  methods: {
    changeMessage() {
      this.$emit('message-changed', 'Hello from Child!');
    }
  }
};
</script>

5. Vue Router：前端路由

Vue Router 是 Vue.js 官方的路由库，适用于构建单页应用（SPA）。

5.1 安装 Vue Router

npm install vue-router@4

5.2 配置路由

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

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

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

export default router;

5.3 在主组件中使用路由

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

5.4 路由链接和视图

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>

  <router-view></router-view>
</template>

6. Vuex：状态管理

Vuex 是 Vue.js 官方的状态管理库，用于管理应用中多个组件共享的状态。

6.1 安装 Vuex

npm install vuex@4

6.2 创建 Store

// store/index.js
import { createStore } from 'vuex';

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

export default store;

6.3 在应用中使用 Vuex

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app');

6.4 在组件中使用 Vuex

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
};
</script>

总结

Vue 3 提供了很多强大的特性，使得开发变得更加灵活与高效。通过组合式 API、响应式系统、Vue Router 和 Vuex 等工具，Vue 3 能够帮助你构建复杂、可维护的应用。希望这篇教程能帮助你快速上手 Vue 3，掌握常用的开发模式和技巧！

发表回复 0

Your email address will not be published. Required fields are marked *