Shulou(Shulou.com)05/31 Report--

这篇文章主要介绍了Vue.js怎么搭建移动端购物车界面的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue.js怎么搭建移动端购物车界面文章都会有所收获，下面我们一起来看看吧。

HTML部分

首先给出HTML部分代码和注释，显示了整个界面的结构。

购物车 商品信息 商品金额 商品数量 总金额 编辑 {{ item.productName }} 赠送: {{ item.productPrice |formatMoney}} - + 有货 {{ item.productPrice*item.productQuantity| money('元')}} 全选 取消全选 Item total: {{totalMoney| money('元')}} 结账 关闭 你确认删除此订单信息吗?

Yes No

对应的关键注释在代码中给出，下面结合Vue.js的代码，对主要部分进行解释。

一、Vue组件基本格式

一个Vue组件的基本代码如下：

new Vue({ el:'#app', data: {}, filters: {}, mounted: function() {}, methods: {} });

在JS代码中，使用new Vue即可声明一个Vue组件。Vue组件主要包括以下几个字段。

1. el字段：el字段用来定义该组件在HTML中的哪个位置生效，需要传入HTML中某个元素的id值。这里传入了#app，表示HTML中id为app的元素内部都是这个Vue组件的作用范围。

2. data字段：data字段定义了Vue组件中的数据，可能在HTML中进行渲染。在本应用中，商品的价格、名称、图片链接等信息，都是使用Vue组件中data字段内的数据进行渲染的。

3. filter字段：filter字段是一个过滤器，在本应用中，针对价格等需要格式化的文本，就可以使用filter进行过滤。

4. mounted字段：mounted字段通常定义一个方法，这个方法将在页面加载完成时自动执行，在React等框架中都有类似的机制。

5. method字段：method字段用来定义Vue组件中需要用到的方法，这个字段的内容往往是需要投入时间最多的部分，例如页面中选择商品、增加数量等逻辑，都是在这个字段中进行编辑的。

以上就是一个vue组件的主要组成部分，下面对各个部分功能的代码编写进行简要介绍。

二、数据渲染

数据渲染部分，要渲染的数据都存放在data中。每一个商品的信息都被模拟存储在了cart.json的文件中。我们可以实现数据自动加载，基本思路是：在method字段中定义一个方法，用来加载cart.json中的数据，并将其存放到data字段中定义的对应变量中。在mouted字段中，自动调用这个方法。这样就实现了页面加载完成后自动加载数据。对应的JS代码和注释如下：

data: { //存放商品json数据信息 productList: [] } methods: { //cartView()方法用来加载数据，并将数据存储在这个Vue组件中的productList变量中 cartView: function() { var _this = this; //使用vue-resource模块加载数据，类似Jquery中的AJAX，返回数据存放在res.body中 this.$http.get("data/cartData.json", {"id":123}).then(function(res) { _this.productList =res.body.result.list; // _this.totalMoney = res.body.result.totalMoney; }); } } mounted: function() { //执行代码放在$nextTick中，保证页面结构加载完毕后再执行函数 this.$nextTick(function() { this.cartView(); //使用this调用methods中定义的cartView()方法 }) }

完成了这部分代码，所有商品的数据就存放在了组件中变量名为productList的字段中。

在前端HTML部分的进行调用，需要使用v-for指令。这个指令用来循环遍历Vue中的数据，代码如下：

{{ item.productName}} Gifts:

The v-for directive iterates through the data in the variable productList and calls it in the internal HTML. Profit item.productImage Get the URL address of the corresponding image; item.productName Get the product name, etc. In this way, a list of product information is automatically generated.

About "Vue.js how to build a mobile shopping cart interface" The content of this article is introduced here, thank you for reading! I believe everyone has a certain understanding of the knowledge of "Vue.js how to build mobile shopping cart interface." If you still want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.