Skip to main content

Vue 简介

什么是 Vue.js？​

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，专注于构建单页应用（SPA）和组件化 UI 开发。

info

Vue.js 具有轻量、高效、响应式的数据绑定特点，是前端开发者常用的框架之一。

Vue.js 主要应用场景​

领域说明主要库/框架
单页应用（SPA）构建前端动态页面，优化用户体验Vue Router, Vuex, Pinia
组件化开发复用 UI 组件，提高开发效率Element Plus, Vuetify, Ant Design Vue
服务器端渲染（SSR）提升 SEO 和首屏加载速度Nuxt.js
移动端开发构建跨平台移动应用Vue Native, Quasar

Vue.js 代码示例​

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue.js!",
    };
  },
};
</script>

Vue 组件开发示例​

<template>
  <button @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
  props: {
    label: String,
  },
  methods: {
    handleClick() {
      alert("Button clicked!");
    },
  },
};
</script>

Vue 路由示例​

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,
});

export default router;

Vue 状态管理示例（Pinia）​

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

服务器端渲染（SSR）示例（Nuxt.js）​

使用 Nuxt.js 进行 SSR
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup>
const message = "Hello from Nuxt.js SSR!";
</script>

结论​

Vue.js 是一个灵活、渐进式的前端框架，适用于单页应用、移动端开发和服务器端渲染等多个场景。其组件化设计和丰富的生态系统使其成为开发者的首选。

更多 Vue.js 资源