当前位置：首页 > VUE

vue实现例子

2026-01-13 06:45:35VUE

以下是 Vue.js 的几个常见实现例子，涵盖基础到进阶场景，采用清晰的模块化展示方式：

基础数据绑定与事件处理

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">反转文本</button>
  </div>
</template>

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

条件渲染与列表渲染

<template>
  <div>
    <ul v-if="items.length">
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
    <p v-else>暂无数据</p>
  </div>
</template>

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

表单双向绑定

<template>
  <div>
    <input v-model="inputText" placeholder="输入内容">
    <p>实时预览: {{ inputText }}</p>
    <select v-model="selectedOption">
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      selectedOption: 'option1'
    }
  }
}
</script>

组件通信示例

父组件 Parent.vue：

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

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

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

子组件 Child.vue：

<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="changeTitle">修改标题</button>
  </div>
</template>

<script>
export default {
  props: ['title'],
  methods: {
    changeTitle() {
      this.$emit('update-title', '新标题' + Date.now())
    }
  }
}
</script>

生命周期钩子使用

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

组合式API示例

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

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => {
  count.value++
}
</script>

路由导航示例

<template>
  <router-link to="/about">关于页面</router-link>
  <button @click="navigateToHome">首页</button>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const navigateToHome = () => {
      router.push('/')
    }
    return { navigateToHome }
  }
}
</script>

这些例子覆盖了 Vue 的核心功能，可根据实际需求进行组合或扩展。每个示例都遵循 Vue 3 的推荐写法，同时兼容选项式 API 和组合式 API 两种风格。

vue实现例子