Vue分页效果与购物车功能


Posted in Javascript onDecember 13, 2019

分页组件

首先来创建项目:

分页组件,做项目不要写动手写代码,要想想业务逻辑,怎么写,如何写才是最好的呈现方式,做项目不急,要先想好整体的框架,从底层一开始最想要的是什么做起。

先动代码,边做边想是会出问题的,而且还会卡壳,让你半路出家的。

分页组件,你觉得要什么内容,是页面?如果不懂可以去看看别人的分页是怎么做的,考虑业务逻辑,整体出发去思考问题。要不然我去百度看看,别人的分页效果。

Vue分页效果与购物车功能

看了后做不出来也是没有关系的,我们呢?

可以从底部出发,从最小的逻辑开始,从做这个需要考虑到什么想起,一步一步来,做好局部的功能,这个功能做好了,才去做另一个功能或者页面哦~

分页组件我们需要的字段有哪些?

你想想,当前页,是不是有,curpage当前页,每页的大小,pagesize,总的页数,total,等等,考虑不到的,没关系看看别人的有什么,想好后才写代码,那才快。

不说无用,先创建项目:

Vue分页效果与购物车功能

写的分页组件

props: ['total'],
data: function() {
 return {
 page: 1, // 当前页码
 pagesize: 10 // 每一页的记录数
 });
},

是不是只能想到那么多呢?那就先写那么多,然后再想想需要什么:

总页码 = Math.ceil(总记录数/每一页记录数)

总页码数,7页,或6页,当前是向上取整,每一页记录数10页,总记录数,总的多少页。如80除10页,8页。

math.ceil(x)返回大于等于参数x的最小整数,即对浮点数向上取整.

单击事件,切换不同的页面的效果。

<div id="app">
<h1>分页组件</h1>
//父
<page-component :total="total"></page-component>
</div>

<template id="page-component">
 <ul class="pagination">
 <li :class="p == page ? 'page-item active' : 'page-item'"
 v-for="p in pagecount">
 <a href="#" rel="external nofollow" class="page-link" @click.prevent="page=p">
 {{p}}
 </a>
 </li>
 </ul>
 </template>

@click.stop 阻止事件冒泡

@click.prevent 阻止事件的默认行为,

<script src="vue.js"> </script>
<script>
// 定义组件
const PageComponent = {
 name: 'PageComponent',
 template: '#page-component',
 props: ['total'],
 
 data: function() {
 return {
 page: 1, // 当前页码
 pagesize: 10 // 每一页的记录数
 };
 },
 
 computed: {
 pagecount: function() {
 // 总页数
 return Math.ceil(this.total / this.pagesize);
 }
 }
 
};

// 创建Vue实例对象
const app = new Vue({
 el: '#app',
 data: {
 total: 35
 },
 
 components: {
 PageComponent
 }
 
});
</script>

分页效果大致如此。

购物车组件

购物车组件,是做项目不可少的,面试也是,动不动就叫我上机写个购物车的组件,写就写咯,购物车时做商城项目不可少的,写好购物车组件会很方便,简书代码的重复性。

那么想想购物车组件有什么内容呢?

购物车,是不是有:商品名称,单价,增加删减单品的数量呢?还有就是订单总金额数呢?这些是必不可少的哦!!!

Vue分页效果与购物车功能

购物车组件不知道有什么也是可以去看看别人的先,看看有什么,购物车组件一般包含显示商品的名称,单价,购买的数量以及订单总金额,通过增加或减少商品的购买的数据,并同步更改订单的总金额。

总金额同步,我们能想到的是用什么指令,是不是v-model

v-model指令的双向绑定

// v-model指令双向绑定
updateCount: function() {
 // 触发input事件
 this.$emit('input', this.count);
}

vue中监听input输入值变化的事件,原生事件;

this.$emit(),是触发器,用于父子组件的传值。

this.$emit(事件,值)

父组件:

<Group title="用户名" v-model="username"></Group>

子组件:

<template>
 <div>
  <div class="group">
   <label>{{title}}</label>
   <input type="text" placeholder="请输入" @input="changeData()" v-model="val">
  </div>
 </div>
</template>

<script>
export default {
 props:["title"],
 data () {
  return {
   val:""
  }
 },
 methods:{
  changeData:function(){
   this.$emit('input',this.val);
  }
 }
}
</script>

当商品的购买数量发生变化时,订单总金额也再变。

这个时候应该想到computed属性:

// computed属性定义下的:

amount: function() {
 var money = 0;
 this.goodslist.forEach(goods => {
 money += parseInt(goods.count) * parseInt(goods.price);
 });
 return money;
}

v-model双向绑定实际上是通过子组件中$emit方法派发的input事件,父组件监听input事件中传递的value值,并存储在父组件data中,然后父组件通过prop的形式传递给子组件value值,在子组件中绑定Input的value属性。

代码:

// 父组件
<myDa :value="value" @input="value=$event"></my-comp>

:value = "value"

<input type="text" @input="$emit('input', $event.target.value)" :value="value">

子组件使用监听事件使用

emit(eventName)触发事件

购物车最终代码:

<div id="app">
<div v-for="goods in goodslist">
<p>商品名称:{{goods.name}}</p>
<p>单价:{{goods.price}}</p>
<cart-component v-model="goods.count">
</cart-component>
<hr>
</div>

<div>

订单总金额:{{amount}}元

</div>
</div>

<template id="cart-component">
<div class="cart">
<button @click="count--; updateCount();">
-
</button>

<input type="text" v-model="count" 
@input=updateCount()">

<button @click="count++; updateCount();"> 
+ 
</button>
</div>
</template>

<script>
// 定义组件
const CartComponent = {
 name: 'Cart',
 template: '#cart-component',
 // 在组件中不可直接修改props数据
 props: ['value'],
 data: function() {
 return {
 count: this.value
 };
 },
 methods: {
 // v-model指令双向绑定,修改父组件内容
 updateCount: function() {
 // 触发input事件
 this.$emit('input',this.count);
 }
 }
};

// 创建vue实例对象
const app = new Vue({
 el: '#app',
 data: {
 goodslist; [{
 name: 'apple',
 price: 2,
 count: 2
 },{
 name: 'dada',
 price: 222222222222,
 count: 0
 }]
 },
 
 computed: {
 // 当前订单总金额
 amount: function(){
 var money=0
 this.goodslist.forEach(goods=>{
 money += pareseInt(goods.count) * parseInt(goods.price);
 });
 return money;
 }
 },
 components: {
 CartComponent
 }
});
</script>

vue:自定义组件中v-model以及父子组件的双向绑定

<div id="app">
 <p>{{message}}</p>
 <input type="text" v-model='message'>
</div>
<script>
 var vueApp = new Vue({
  el:'#app',
  data:{
   message:"我其实是一个语法糖"
  }
 })
</script>
<div id="app">
 <p>{{message}}</p>
 <input type="text" v-bind:value='message' @input='message = $event.target.value'>
</div>
<script>
 var vueApp = new Vue({
  el: '#app',
  data: {
   message: "我其实是一个语法糖"
  }
 })
</script>

以下两种约等于:

<custom v-model='something'></custom>
<custom :value="something" @input="value => { something = value }"></custom>
<div id="app">
 <h1>{{message}}</h1>
 <test-model v-model='message'></test-model>
</div>
<script>
 Vue.component('test-model', {
  template: ` <input v-bind:value='value'
     v-on:input="$emit('input', $event.target.value)">`,
 })
 var vueApp = new Vue({
  el: '#app',
  data: {
   message: '测试数据'
  },
 })
</script>

vue实际中的应用开发就到此结束了,后续敬请期待!!!

总结

以上所述是小编给大家介绍的Vue分页效果与购物车功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery简单体验
Jan 10 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
vue实现计算器功能
Feb 22 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
如何在微信小程序中存setStorage
Dec 13 #Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 #Javascript
微信小程序之左右布局的实现代码
Dec 13 #Javascript
vue实现输入一位数字转汉字功能
Dec 13 #Javascript
小程序登录之支付宝授权的实现示例
Dec 13 #Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 #Javascript
微信小程序点击保存图片到本机功能
Dec 13 #Javascript
You might like
Thinkphp中的volist标签用法简介
2014/06/18 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python 不以科学计数法输出的方法
2018/07/16 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
django使用多个数据库的方法实例
2021/03/04 Python
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
饭店工作计划书
2014/01/10 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
银行贷款收入证明
2014/10/17 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
名人传读书笔记
2015/06/26 职场文书
实验室安全管理制度
2015/08/05 职场文书
生日宴会祝酒词
2015/08/10 职场文书
《七月的天山》教学反思
2016/02/19 职场文书