阅读量:0
这里是一些完整的 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 组件文件中，然后在主应用中引用这些组件进行演示。
