这里是一些完整的 Vue.js 示例代码,你可以直接复制这些代码到你的 Vue 项目中并运行,来看到具体的效果。
1. 动态数据可视化
示例代码
<template>
<div>
<line-chart ref="lineChart" :data="chartData" />
<button @click="updateData">Update Data</button>
</div>
</template>
<script>
import { Line } from 'vue-chartjs';
import { Line as ChartLine } from 'chart.js';
export default {
components: {
LineChart: Line
},
data() {
return {
chartData: {
labels: ['January', 'February', 'March', 'April'],
datasets: [
{
label: 'Sales',
data: [40, 39, 10, 40],
borderColor: '#42A5F5',
fill: false
}
]
}
};
},
methods: {
updateData() {
this.chartData.datasets[0].data = [50, 49, 20, 60];
this.$refs.lineChart.update();
}
}
};
</script>
<style>
/* Add your styles here */
</style>
运行步骤
-
安装
vue-chartjs
和chart.js
:npm install vue-chartjs chart.js
-
将上述代码放到 Vue 组件中(例如
LineChart.vue
),并在主组件中引用它。
2. 动画按钮
示例代码
<template>
<div class="container">
<button @click="rotate" :class="{ 'rotated': isRotated }">Click me!</button>
</div>
</template>
<script>
export default {
data() {
return {
isRotated: false
};
},
methods: {
rotate() {
this.isRotated = !this.isRotated;
}
}
};
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
transition: transform 0.5s;
}
button.rotated {
transform: rotate(360deg);
}
</style>
运行步骤
- 将上述代码放到 Vue 组件中(例如
AnimatedButton.vue
),并在主组件中引用它。
3. 卡片翻转效果
示例代码
<template>
<div class="card" @click="flipCard">
<div class="card-inner" :class="{ 'flipped': isFlipped }">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isFlipped: false
};
},
methods: {
flipCard() {
this.isFlipped = !this.isFlipped;
}
}
};
</script>
<style>
.card {
perspective: 1000px;
}
.card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 200px;
height: 300px;
backface-visibility: hidden;
}
.card-front {
background: #fff;
}
.card-back {
background: #f0f0f0;
transform: rotateY(180deg);
}
</style>
运行步骤
- 将上述代码放到 Vue 组件中(例如
FlipCard.vue
),并在主组件中引用它。
4. 响应式导航菜单
示例代码
<template>
<nav class="navbar">
<button @click="toggleMenu" class="menu-button">Menu</button>
<ul :class="{ 'show': isMenuOpen }">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</template>
<script>
export default {
data() {
return {
isMenuOpen: false
};
},
methods: {
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen;
}
}
};
</script>
<style>
.navbar {
position: relative;
}
.menu-button {
display: none;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
li {
margin: 0 10px;
}
@media (max-width: 768px) {
.menu-button {
display: block;
}
ul {
display: none;
flex-direction: column;
}
ul.show {
display: flex;
}
}
</style>
运行步骤
- 将上述代码放到 Vue 组件中(例如
ResponsiveMenu.vue
),并在主组件中引用它。
5. 模态窗口
示例代码
<template>
<div>
<button @click="showModal = true">Open Modal</button>
<div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
<div class="modal">
<h2>Modal Title</h2>
<p>This is a modal window.</p>
<button @click="showModal = false">Close</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false
};
}
};
</script>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
</style>
运行步骤
- 将上述代码放到 Vue 组件中(例如
ModalWindow.vue
),并在主组件中引用它。
这些示例可以直接放到 Vue 项目中运行,展示相应的效果。如果你有现成的 Vue 项目,你可以将这些代码分别放到不同的 Vue 组件文件中,然后在主应用中引用这些组件进行演示。