Vue实际中的应用开发【分页效果与购物车】

mb60efb0123ab42 2021-07-25 18:21:37 阅读数:131

本文一共[544]字,预计阅读时长:1分钟~
Vue实际中的应用开发

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

作者 |  Jeskson

首先来创建项目:

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

 

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

 

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

 

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

 

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

 

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

 

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

 

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

 

不说无用,先创建项目:

 

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

 

写的分页组件

  •  
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>

 

分页效果大致如此。

 

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

 

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

 

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

 

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

 

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

 

总金额同步,我们能想到的是用什么指令,是不是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实际中的应用开发就到此结束了,后续敬请期待!!!

> 【作者】:Jeskson

> 【转载说明】:转载请说明出处,谢谢合作!~

大前端开发,定位前端开发技术栈博客,PHP后台知识点,web全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!

意见反馈

若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

版权声明:本文为[mb60efb0123ab42]所创,转载请带上原文链接,感谢。 https://blog.51cto.com/u_15303890/3183256