Vue实际中的应用开发【分页效果与购物车】
作者 | Jeskson
来源 | 达达前端小酒馆
分页组件
首先来创建项目:
分页组件,做项目不要写动手写代码,要想想业务逻辑,怎么写,如何写才是最好的呈现方式,做项目不急,要先想好整体的框架,从底层一开始最想要的是什么做起。
先动代码,边做边想是会出问题的,而且还会卡壳,让你半路出家的。
分页组件,你觉得要什么内容,是页面?如果不懂可以去看看别人的分页是怎么做的,考虑业务逻辑,整体出发去思考问题。要不然我去百度看看,别人的分页效果。
看了后做不出来也是没有关系的,我们呢?
可以从底部出发,从最小的逻辑开始,从做这个需要考虑到什么想起,一步一步来,做好局部的功能,这个功能做好了,才去做另一个功能或者页面哦~
分页组件我们需要的字段有哪些?
你想想,当前页,是不是有,curpage当前页,每页的大小,pagesize,总的页数,total,等等,考虑不到的,没关系看看别人的有什么,想好后才写代码,那才快。
不说无用,先创建项目:
写的分页组件
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="#" 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>
分页效果大致如此。
购物车组件
购物车组件,是做项目不可少的,面试也是,动不动就叫我上机写个购物车的组件,写就写咯,购物车时做商城项目不可少的,写好购物车组件会很方便,简书代码的重复性。
那么想想购物车组件有什么内容呢?
购物车,是不是有:商品名称,单价,增加删减单品的数量呢?还有就是订单总金额数呢?这些是必不可少的哦!!!
购物车组件不知道有什么也是可以去看看别人的先,看看有什么,购物车组件一般包含显示商品的名称,单价,购买的数量以及订单总金额,通过增加或减少商品的购买的数据,并同步更改订单的总金额。
总金额同步,我们能想到的是用什么指令,是不是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">
子组件
使用$on(eventName)监听事件
使用$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实际中的应用开发就到此结束了,后续敬请期待!!!
❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]
作者Info:
【作者】:Jeskson
【原创公众号】:达达前端小酒馆。
【福利】:公众号回复 “资料” 送自学资料大礼包(进群分享,想要啥就说哈,看我有没有)!
【转载说明】:转载请说明出处,谢谢合作!~
大前端开发,定位前端开发技术栈博客,PHP后台知识点,web全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!
若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。
请点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注达达的CSDN!
这是一个有质量,有态度的博客
Vue实际中的应用开发【分页效果与购物车】的更多相关文章
- 如何使用 Vue-TCB 快速在 Vue 应用中接入云开发
什么是 Vue TCB 我自己平时经常会用到 Vue 来开发前端应用.所以,基于 Vue 的插件系统,封装了一个 Vue 插件. 如何使用 1. 安装 vue-tcb 执行如下命令,安装 vue-tc ...
- Cabloy-CMS中区块的开发与效果
关于区块 Cabloy-CMS引入了区块的概念,通过区块可以快速向文章添加各种类型的内容,比如:插入一个地图子页面.插入一首音乐,等等 Cabloy-CMS中的区块可以类比于Wordpress古腾堡编 ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- 使用vue完成一个分页效果
基于 element-ui 分页组件实现分页效果 效果如下: 使用说明: 0.首先在头部引入需要的外部文件 1.从element官方网页中复制想要的组件代码直接放入body中 2.编写逻辑代码 3.完 ...
- Mac中如何搭建Vue项目并利用VSCode开发
(一)部署Node环境 (1)下载适合Mac环境的Node包,点击进入下载页面 (2)安装Node环境:找到下载好的Node包,这里是node-v12.14.1.pkg,我们双击它,会进入Node.j ...
- .NET中的repeater简介及分页效果
Repeater控件是一个数据绑定容器控件,它能够生成各个项的列表,并可以使用模板定义网页上各个项的布局.当该页运行时,该控件为数据源中的每个项重复此布局. 配合模板使用repeater控件 若要使 ...
- VUE依赖webpack分别给开发环境和生产环境配置不同的常量值并在项目中动态引用
当在开发和产品上线的时候,我们经常会遇到在同一个地方由于环境的不同而地址也不同的情况,这时候如果在代码中将该地址写死,那势必会造成上线时手动改动,多人开发及多处使用该地址难以维护等一系列问题,为避免这 ...
- 分页技巧__在项目中使用QueryHelper辅助对象实现分页效果
分页技巧__在项目中使用QueryHelper辅助对象实现分页效果 QueryHelper 用于辅助拼接HQL语句 addCondition("t.type=?", "精 ...
- VUE中实现iview的图标效果时遇到的一个问题
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available ...
随机推荐
- JVM的监控工具之jps
jps的功能和ps命令相似:可列出正在运行的虚拟机进程,并显示虚拟机执行主类(Main Class,main()函数所在的类)名称以及这些进程的本地虚拟机唯一ID(Local Virtual Mach ...
- Eclipse 常用快捷键-java
(转自https://www.runoob.com/w3cnote/eclipse-shortcut-keys.html) Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclips ...
- WebGIS之MapBox篇
前面在Arcgis的基础上玩了玩,这不最近又去摸索了一下Web上开源的GIS;这次选择了基于MapBox来实现一些效果: 1.加载自己发布的本地瓦片效果 2.加载热力图.Echarts.三位建筑.路况 ...
- Linux用户和权限——管理用户和用户组的命令
Linux用户和权限——管理用户和用户组的命令 摘要:本文主要学习了在Linux系统中管理用户和用户组的命令. useradd命令 useradd命令可以用来创建新用户. 基本语法 useradd [ ...
- DevExpress的TreeList的常用属性设置以及常用事件
场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...
- C# 常用类库(字符串处理,汉字首字母拼音,注入攻击,缓存操作,Cookies操作,AES加密等)
十年河东,十年河西,莫欺少年穷 学无止境,精益求精 记录下字符串类库,方便今后查阅 主要包含了字符串解决,去除HTML,SQL注入攻击检测,IP地址处理,Cookies操作,根据身份证获取性别.姓名. ...
- 斗鱼刷弹幕js代码
对于一个网络喷子(like me)来说,喷人必须高效. var script=document.createElement("script"); script.type=" ...
- SWPUCTF 2019 web
web1 知识点 ## information_schema绕过 ##无列名注入 注入点在广告申请广告名字处,申请广告名为 查看广告详细返回错误 接下来就是常规的union注入的套路,但是发现or被过 ...
- 【已采纳】新项目第一次怎么上传到github里面
言归正传,最近学习了怎么将新创建的本地代码上传到github上,这里简单的记录一下,我喜欢使用命令行,这里全用命令行来实现,不了解git命令的可以去了解下. 第一步:建立git仓库 cd到你的本地 ...
- 项目进程中input的onblur事件挂不上去,失效问题解决记录
一开始直接在js文件中写 var n=document.querySelector("input"); n.onblur=funcition(){ ///事件过程吧啦啦啦 }; 事 ...