###
Vue.js 示例项目与案例
分享
Vue.js 是一款功能强大且易于上手的前端框架，其灵活性和可扩展性使其成为许多开发者的选择。以下是几个常见的
Vue.js 示例项目以及它们的应用场景：
#### 1. **待办事项应用**
这是一个经典的入门级项目，展示了如何通过
Vue 的双向绑定特性管理状态并更新视图。
```html
<div id="todo
-app">
<input v
-model="newTodo" @keyup.enter="addTodo" placeholder="Add a todo..." />
<ul>
<li v
-for="(todo, index) in todos" :key="index">{{ todo }}<button @
click="removeTodo(index)">X</button></li>
</ul>
</div>
<script>
const app = new
Vue({
el: &#
39;#todo
-app&#
39;,
data: {
newTodo: &#
39;&#
39;,
todos: []
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.todos.push(this.newTodo);
this.newTodo = &#
39;&#
39;;
}
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
});
</script>
```
此示例利用了 `v
-model` 和事件监听器来实现交互逻辑[^1]。
---
#### 2. **计数器应用程序**
该示例演示了
Vue 如何处理简单的状态管理和 DOM 更新。
```html
<div id="counter
-example">
<p>Count is: {{ count }}</p>
<button @
click="increment">Increment</button>
</div>
<script>
new
Vue({
el: &#
39;#counter
-example&#
39;,
data: {
count: 0
},
methods: {
increment() {
this.count++;
}
}
});
</script>
```
这个例子简单明了地说明了
Vue 数据响应机制的工作方式。
---
####
3. **动态时间显示**
展示如何使用定时器（如 `setTime
out` 或 `setInterval`）结合
Vue 实现动态效果。
```html
<div id="time
-display">
Current Time: {{ currentTime }}
</div>
<script>
new
Vue({
el: &#
39;#time
-display&#
39;,
data: {
currentTime: &#
39;&#
39;
},
created() {
setInterval(() => {
this.currentTime = new Date().toLocaleTimeString();
}, 1000);
}
});
</script>
```
上述代码片段基于引用中的 `setTime
out` 使用方法进行了改进，改为更常用的 `setInterval` 来持续刷新时间[^2]。
---
#### 4. **图片轮播组件**
这是稍复杂的一个示例，适合中级
学习者练习组件化开发能力。
```html
<div id="carousel">
<transition
-group name="fade" tag="div">
<img v
-for="(image, i) in images" :key="i" v
-show="currentImage === i" :src="image"/>
</transition
-group>
</div>
<script>
export default {
data() {
return {
currentImage: 0,
images: [
&#
39;https://example.com/image1.jpg&#
39;,
&#
39;https://example.com/image2.jpg&#
39;
]
};
},
mounted() {
setInterval(() => {
this.currentImage = (this.currentImage + 1) % this.images.length;
},
3000);
}
};
</script>
<style>
.fade
-enter
-active, .fade
-leave
-active {
transition: opacity 0.5s ease
-in
-out;
}
.fade
-enter, .fade
-leave
-to /* .fade
-leave
-active below version 2.1.8 */ {
opacity: 0;
}
</style>
```
这段代码实现了基本的图片切换功能，并引入了 CSS 动画增强用户体验。
---
#### 5. **天气查询工具**
一个实际应用场景的例子，可以调用第三方 API 获取实时天气数据。
```javascript
new
Vue({
el: &#
39;#weather
-app&#
39;,
data: {
location: &#
39;&#
39;,
weatherData: null
},
methods: {
fetchWeather() {
const apiKey = &#
39;your_api_key&#
39;;
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${this.location}&appid=${apiKey}`)
.then(response => response.json())
.then(data => {
this.weatherData = data.main.temp;
});
}
}
});
```
这里涉及到了异步请求操作，对于初
学者来说是一个很好的实践机会。
---
### 总结
以上列举了几种不同难度级别的
Vue.js 应用实例，涵盖了从基础到高级的各种技术要点。这些案例不仅有助于理解核心概念，还能帮助积累实战
经验。
超级会员免费看
本文详细介绍了Vue.js的基础知识，包括MVVM模式、HelloWorld示例、生命周期、常用指令，以及如何使用Vue-CLI搭建项目。通过学习，读者能掌握Vue的使用并了解Vue-CLI的运行机制。
订阅专栏 解锁全文
扫一扫
761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
