当前位置：首页 > VUE

vue实现的例子

2026-03-30 00:44:34VUE

Vue 实现示例

以下是一个简单的 Vue.js 实现示例，展示如何创建一个基础的 Vue 应用。

安装 Vue.js 可以通过 CDN 引入 Vue.js：

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

或者使用 npm 安装：

npm install vue@next

创建 Vue 实例

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

<script>
  const { createApp } = Vue;

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

组件示例

Vue 的核心功能之一是组件化开发。以下是一个简单的组件示例：

定义组件

<div id="app">
  <my-component></my-component>
</div>

<script>
  const { createApp } = Vue;

  const MyComponent = {
    template: `<div>This is a custom component!</div>`
  };

  createApp({
    components: {
      MyComponent
    }
  }).mount('#app');
</script>

数据绑定与事件处理

Vue 提供了双向数据绑定和事件处理功能：

数据绑定与事件

<div id="app">
  <input v-model="message" />
  <button @click="reverseMessage">Reverse</button>
  <p>{{ message }}</p>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      };
    },
    methods: {
      reverseMessage() {
        this.message = this.message.split('').reverse().join('');
      }
    }
  }).mount('#app');
</script>

条件渲染与循环

Vue 提供了 v-if 和 v-for 指令用于条件渲染和循环：

条件与循环

<div id="app">
  <p v-if="showMessage">{{ message }}</p>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        showMessage: true,
        message: 'This is a conditional message',
        items: [
          { id: 1, text: 'Item 1' },
          { id: 2, text: 'Item 2' }
        ]
      };
    }
  }).mount('#app');
</script>

使用 Vue CLI 创建项目

对于更复杂的项目，可以使用 Vue CLI 快速搭建开发环境：

安装 Vue CLI

npm install -g @vue/cli

创建项目

vue create my-project

运行开发服务器

cd my-project
npm run serve

单文件组件 (SFC)

Vue 推荐使用单文件组件（.vue 文件）组织代码：

Example.vue

vue实现的例子

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

<script>
export default {
  data() {
    return {
      title: 'Vue SFC Example',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

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

这些示例涵盖了 Vue.js 的基础用法，包括数据绑定、组件化、条件渲染和循环等核心功能。