当前位置：首页 > VUE

vue实现的例子

2026-01-17 07:48:03VUE

以下是 Vue.js 实现常见功能的几个示例，涵盖基础到进阶场景：

vue实现的例子

基础数据绑定与事件处理

<template>
  <div>
    <input v-model="message" placeholder="输入内容">
    <p>{{ message }}</p>
    <button @click="reverseMessage">反转文本</button>
  </div>
</template>

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

条件渲染与列表渲染

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.text }}
        <span v-if="item.completed">✓</span>
      </li>
    </ul>
    <button @click="show = !show">切换显示</button>
    <p v-show="show">动态显示的内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '学习 Vue', completed: true },
        { text: '项目实践', completed: false }
      ],
      show: true
    }
  }
}
</script>

组件通信示例

父组件：

<template>
  <div>
    <ChildComponent 
      :title="parentTitle"
      @update-title="handleUpdate"
    />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentTitle: '初始标题'
    }
  },
  methods: {
    handleUpdate(newTitle) {
      this.parentTitle = newTitle
    }
  }
}
</script>

子组件：

<template>
  <div>
    <h3>{{ title }}</h3>
    <input v-model="localTitle">
    <button @click="updateTitle">更新标题</button>
  </div>
</template>

<script>
export default {
  props: ['title'],
  data() {
    return {
      localTitle: this.title
    }
  },
  methods: {
    updateTitle() {
      this.$emit('update-title', this.localTitle)
    }
  }
}
</script>

Vue 3 Composition API 示例

<template>
  <div>
    <p>计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <p>计算属性: {{ doubled }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    const doubled = computed(() => count.value * 2)

    return {
      count,
      increment,
      doubled
    }
  }
}
</script>

使用 Vue Router

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

状态管理 (Vuex)

// store.js
import { createStore } from 'vuex'

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

vue实现的例子