分页组件
首先来创建项目：
分页组件，做项目不要写动手写代码，要想想业务逻辑，怎么写，如何写才是最好的呈现方式，做项目不急，要先想好整体的框架，从底层一开始最想要的是什么做起。
先动代码，边做边想是会出问题的，而且还会卡壳，让你半路出家的。
分页组件，你觉得要什么内容，是页面？如果不懂可以去看看别人的分页是怎么做的，考虑业务逻辑，整体出发去思考问题。要不然我去百度看看，别人的分页效果。
看了后做不出来也是没有关系的，我们呢？
可以从底部出发，从最小的逻辑开始，从做这个需要考虑到什么想起，一步一步来，做好局部的功能，这个功能做好了，才去做另一个功能或者页面哦~
分页组件我们需要的字段有哪些？
你想想，当前页，是不是有，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 "
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="/UploadFiles/2021-04-02/vue.js">分页效果大致如此。
购物车组件
购物车组件，是做项目不可少的，面试也是，动不动就叫我上机写个购物车的组件，写就写咯，购物车时做商城项目不可少的，写好购物车组件会很方便，简书代码的重复性。
那么想想购物车组件有什么内容呢？
购物车，是不是有：商品名称，单价，增加删减单品的数量呢？还有就是订单总金额数呢？这些是必不可少的哦！！！
购物车组件不知道有什么也是可以去看看别人的先，看看有什么，购物车组件一般包含显示商品的名称，单价，购买的数量以及订单总金额，通过增加或减少商品的购买的数据，并同步更改订单的总金额。
总金额同步，我们能想到的是用什么指令，是不是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分页效果与购物车功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
