当前位置：首页 > VUE

简单实现vue

2026-03-07 01:43:23VUE

Vue 3 基础实现示例

以下是一个简单的 Vue 3 单文件组件实现，包含数据绑定、事件处理和条件渲染等核心功能。

项目结构

project/
├── index.html
└── src/
    ├── main.js
    └── App.vue

创建 Vue 应用

index.html 文件内容：

<!DOCTYPE html>
<html>
<head>
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="./src/main.js"></script>
</body>
</html>

主入口文件

src/main.js 内容：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

组件实现

src/App.vue 内容：

<template>
  <div>
    <h1>{{ title }}</h1>
    <input v-model="inputText" placeholder="Type something">
    <p>You typed: {{ inputText }}</p>

    <button @click="toggleShow">Toggle Message</button>
    <p v-if="showMessage">This is a conditional message</p>

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

<script>
export default {
  data() {
    return {
      title: 'Vue Demo',
      inputText: '',
      showMessage: true,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  },
  methods: {
    toggleShow() {
      this.showMessage = !this.showMessage
    }
  }
}
</script>

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

运行方式

直接浏览器打开 index.html 文件
或使用 Live Server 等开发服务器

核心功能说明

数据绑定：使用 {{ }} 语法和 v-model 指令
事件处理：通过 @click 等指令绑定方法
条件渲染：使用 v-if 控制元素显示
列表渲染：通过 v-for 渲染数组数据
样式作用域：scoped 属性使样式仅作用于当前组件

使用 CDN 的替代方案

若不想使用构建工具，可直接在 HTML 中使用 CDN 引入 Vue：

简单实现vue

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

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue

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