一个简单的购物车应用,用户可以添加商品到购物车,并查看购物车中的商品。
HTML 结构
首先,创建一个 HTML 文件,并设置基本的结构和 Vue 实例的挂载点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 入门案例 - 购物车应用</title>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>购物车</h1>
<ul>
<li v-for="item in products" :key="item.id">
{{ item.name }} - {{ item.price }}
<button @click="addToCart(item)">添加到购物车</button>
</li>
</ul>
<h2>购物车:</h2>
<ul>
<li v-for="item in cart" :key="item.id">
{{ item.name }} - {{ item.price }}
<button @click="removeFromCart(item)">移除</button>
</li>
</ul>
</div>
<script>
// 接下来,我们将在这里编写 Vue 实例的代码
</script>
</body>
</html>
Vue 实例和数据绑定
在 <script>
标签内,我们将创建 Vue 实例,并定义数据模型和方法:
new Vue({
el: '#app',
data: {
products: [
{ id: 1, name: '商品A', price: '$10' },
{ id: 2, name: '商品B', price: '$15' },
{ id: 3, name: '商品C', price: '$20' }
],
cart: []
},
methods: {
addToCart: function(product) {
this.cart.push(product);
},
removeFromCart: function(item) {
this.cart = this.cart.filter(cartItem => cartItem.id !== item.id);
}
}
});
在这个例子中,我们定义了两个主要的部分:
products:一个数组,包含商品的列表。
cart:一个数组,用于存储购物车中的商品。
methods:一个包含 addToCart 和 removeFromCart 方法的对象,这些方法将处理添加商品到购物车和从购物车中移除商品的逻辑。
列表渲染和事件处理
我们使用 v-for 指令来循环渲染商品列表和购物车中的商品。同时,我们使用 @click 事件监听器来处理用户的点击事件,触发添加商品到购物车和移除商品的操作。
这个案例展示了 Vue.js 的基本功能,包括数据绑定、事件处理和列表渲染