vue实现代码

Vue 实现代码

Vue.js 是一个用于构建用户界面的渐进式框架，以下是一个简单的 Vue 实现代码示例，涵盖基本功能如数据绑定、事件处理和组件化。

基本 Vue 实例

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

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

数据绑定与事件处理

<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse Message</button>
</div>

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

条件渲染与列表渲染

<div id="app">
  <p v-if="showMessage">{{ message }}</p>
  <button @click="toggleMessage">Toggle Message</button>

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

<script>
  new Vue({
    el: '#app',
    data: {
      showMessage: true,
      message: 'Hello Vue!',
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    },
    methods: {
      toggleMessage() {
        this.showMessage = !this.showMessage;
      }
    }
  });
</script>

组件化开发

<div id="app">
  <custom-component :message="parentMessage"></custom-component>
</div>

<script>
  Vue.component('custom-component', {
    props: ['message'],
    template: '<div>{{ message }}</div>'
  });

  new Vue({
    el: '#app',
    data: {
      parentMessage: 'Message from parent'
    }
  });
</script>

Vue 3 Composition API

Vue 3 引入了 Composition API，以下是一个简单的示例：

<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse Message</button>
</div>

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

  createApp({
    setup() {
      const message = ref('Hello Vue 3!');

      const reverseMessage = () => {
        message.value = message.value.split('').reverse().join('');
      };

      return {
        message,
        reverseMessage
      };
    }
  }).mount('#app');
</script>

使用单文件组件（SFC）

单文件组件是 Vue 开发中常见的模式，通常以 .vue 文件形式存在：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from SFC!'
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
};
</script>

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

Vue Router 基本使用

以下是一个简单的 Vue Router 实现：

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

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
<script>
  const Home = { template: '<div>Home</div>' };
  const About = { template: '<div>About</div>' };

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

  const router = new VueRouter({
    routes
  });

  new Vue({
    router
  }).$mount('#app');
</script>

Vuex 状态管理

以下是一个简单的 Vuex 示例：

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

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
<script>
  const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++;
      }
    }
  });

  new Vue({
    el: '#app',
    store,
    computed: {
      count() {
        return this.$store.state.count;
      }
    },
    methods: {
      increment() {
        this.$store.commit('increment');
      }
    }
  });
</script>

这些示例涵盖了 Vue.js 的基本功能，从简单实例到组件化开发、状态管理和路由等高级功能。实际开发中通常会结合构建工具如 Vite 或 Webpack 来组织更复杂的项目结构。