当前位置：首页 > VUE

vue实现例子

2026-01-08 01:59:06VUE

以下是一些常见的 Vue 实现例子，涵盖基础功能到进阶应用场景：

基础数据绑定

使用 v-model 实现双向数据绑定：

<template>
  <div>
    <input v-model="message" placeholder="输入内容">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

条件渲染

通过 v-if 和 v-show 控制元素显示：

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <p v-if="isVisible">v-if 控制的元素</p>
    <p v-show="isVisible">v-show 控制的元素</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

列表渲染

使用 v-for 渲染数组：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品A', price: 100 },
        { name: '商品B', price: 200 }
      ]
    }
  }
}
</script>

组件通信

父子组件通过 props 和 $emit 通信：

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate"/>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: '来自父组件'
    }
  },
  methods: {
    handleUpdate(newMessage) {
      this.parentMessage = newMessage
    }
  }
}
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update', '子组件更新的消息')
    }
  }
}
</script>

Vuex 状态管理

使用 Vuex 管理全局状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

// 组件中使用
<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">增加</button>
    <button @click="incrementAsync">异步增加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment', 'incrementAsync'])
  }
}
</script>

路由管理

使用 Vue Router 实现页面导航：

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

// 组件中使用
<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

生命周期钩子

使用生命周期钩子执行不同阶段的操作：

<script>
export default {
  data() {
    return {
      timer: null
    }
  },
  created() {
    console.log('组件实例已创建')
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log('定时执行')
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    console.log('组件即将销毁')
  }
}
</script>

vue实现例子