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！

这是一个有质量，有态度的博客