当前位置：首页 > JavaScript

js 实现vue

2026-03-15 02:03:19JavaScript

Vue.js 的基本实现方法

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是几种常见的 Vue.js 实现方法。

使用 CDN 引入 Vue.js

最简单的方式是通过 CDN 引入 Vue.js，适用于快速原型开发或小型项目。在 HTML 文件中添加以下代码：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
  {{ message }}
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

使用 Vue CLI 创建项目

Vue CLI 是官方提供的脚手架工具，适合中大型项目。安装 Vue CLI 并创建项目：

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

单文件组件 (SFC)

单文件组件是 Vue.js 的核心特性，将模板、脚本和样式封装在一个文件中。例如：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue Component'
    };
  },
  methods: {
    increment() {
      this.title = 'Clicked!';
    }
  }
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Vue 3 的组合式 API

Vue 3 引入了组合式 API，提供更灵活的代码组织方式。以下是一个示例：

js 实现vue

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

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

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
};
</script>

状态管理 (Vuex)

对于复杂的状态管理，可以使用 Vuex。安装并配置 Vuex：

npm install vuex

创建 store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

export default store;

在组件中使用：

js 实现vue

<template>
  <div>
    <p>{{ $store.state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

Vue 路由 (Vue Router)

Vue Router 是官方提供的路由库。安装并配置：

npm install vue-router

创建路由配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;

在组件中使用：

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