vue简单功能实现
Vue 简单功能实现示例
以下是一些常见的 Vue 简单功能实现方法，适合初学者快速上手。
双向数据绑定
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">这段文字会根据条件显示或隐藏</p>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
}
},
methods: {
toggle() {
this.isVisible = !this.isVisible
}
}
}
</script>列表渲染
通过 v-for 指令渲染列表数据：
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: '项目1' },
{ name: '项目2' },
{ name: '项目3' }
]
}
}
}
</script>事件处理
使用 v-on 或简写 @ 绑定事件：
<template>
<div>
<button @click="sayHello">点击我</button>
</div>
</template>
<script>
export default {
methods: {
sayHello() {
alert('Hello Vue!')
}
}
}
</script>计算属性
通过计算属性处理复杂逻辑：
<template>
<div>
<p>原始字符串: {{ message }}</p>
<p>反转后的字符串: {{ reversedMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>组件通信
父子组件通过 props 和 events 通信：
父组件：
<template>
<div>
<child-component :message="parentMessage" @update="handleUpdate"/>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '来自父组件的消息'
}
},
methods: {
handleUpdate(newMessage) {
this.parentMessage = newMessage
}
}
}
</script>子组件：
<template>
<div>
<p>{{ message }}</p>
<button @click="sendMessage">更新消息</button>
</div>
</template>
<script>
export default {
props: ['message'],
methods: {
sendMessage() {
this.$emit('update', '子组件更新后的消息')
}
}
}
</script>这些示例涵盖了 Vue 的基本功能，可以作为开发简单应用的起点。
