vue实现的例子
以下是几个基于 Vue.js 实现的典型示例，涵盖不同场景和技术要点：
基础计数器组件
<template>
<div>
<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>
</div>
</template>
<script>
export default {
data() {
return { count: 0 }
},
methods: {
increment() { this.count++ },
decrement() { this.count-- }
}
}
</script>表单双向绑定
<template>
<div>
<input v-model="message" placeholder="输入内容">
<p>实时预览: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return { message: '' }
}
}
</script>动态列表渲染
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.text }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ text: '项目1' },
{ text: '项目2' }
]
}
}
}
</script>组件间通信（Props + Events）
父组件:
<template>
<child-component
: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>子组件:
<template>
<div>
<h2>{{ title }}</h2>
<button @click="changeTitle">修改标题</button>
</div>
</template>
<script>
export default {
props: ['title'],
methods: {
changeTitle() {
this.$emit('update-title', '新标题')
}
}
}
</script>状态管理（Vuex）
Store 定义:
import Vuex from 'vuex'
const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) { state.count++ }
}
})组件中使用:
<template>
<div>
{{ $store.state.count }}
<button @click="$store.commit('increment')">+1</button>
</div>
</template>这些示例覆盖了 Vue 的核心功能，包括数据绑定、组件化开发、状态管理等实际开发中的常见模式。
