Vue分頁效果與購物車功能
分頁組件
首先來創(chuàng)建項目：
分頁組件，做項目不要寫動手寫代碼，要想想業(yè)務邏輯，怎么寫，如何寫才是最好的呈現(xiàn)方式，做項目不急，要先想好整體的框架，從底層一開始最想要的是什么做起。
先動代碼，邊做邊想是會出問題的，而且還會卡殼，讓你半路出家的。
分頁組件，你覺得要什么內容，是頁面？如果不懂可以去看看別人的分頁是怎么做的，考慮業(yè)務邏輯，整體出發(fā)去思考問題。要不然我去百度看看，別人的分頁效果。
看了后做不出來也是沒有關系的，我們呢？
可以從底部出發(fā)，從最小的邏輯開始，從做這個需要考慮到什么想起，一步一步來，做好局部的功能，這個功能做好了，才去做另一個功能或者頁面哦~
分頁組件我們需要的字段有哪些？
你想想，當前頁，是不是有，curpage當前頁，每頁的大小，pagesize，總的頁數，total，等等，考慮不到的，沒關系看看別人的有什么，想好后才寫代碼，那才快。
不說無用，先創(chuàng)建項目：
寫的分頁組件
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);
}
}
};
// 創(chuàng)建Vue實例對象
const app = new Vue({
el: '#app',
data: {
total: 35
},
components: {
PageComponent
}
});
</script>
分頁效果大致如此。
購物車組件
購物車組件，是做項目不可少的，面試也是，動不動就叫我上機寫個購物車的組件，寫就寫咯，購物車時做商城項目不可少的，寫好購物車組件會很方便，簡書代碼的重復性。
那么想想購物車組件有什么內容呢？
購物車，是不是有：商品名稱，單價，增加刪減單品的數量呢？還有就是訂單總金額數呢？這些是必不可少的哦！?。?/p>
購物車組件不知道有什么也是可以去看看別人的先，看看有什么，購物車組件一般包含顯示商品的名稱，單價，購買的數量以及訂單總金額，通過增加或減少商品的購買的數據，并同步更改訂單的總金額。
總金額同步，我們能想到的是用什么指令，是不是v-model
v-model指令的雙向綁定
// v-model指令雙向綁定
updateCount: function() {
// 觸發(fā)input事件
this.$emit('input', this.count);
}
vue中監(jiān)聽input輸入值變化的事件，原生事件；
this.$emit()，是觸發(fā)器，用于父子組件的傳值。
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>
當商品的購買數量發(fā)生變化時，訂單總金額也再變。
這個時候應該想到computed屬性：
// computed屬性定義下的：
amount: function() {
var money = 0;
this.goodslist.forEach(goods => {
money += parseInt(goods.count) * parseInt(goods.price);
});
return money;
}
v-model雙向綁定實際上是通過子組件中$emit方法派發(fā)的input事件，父組件監(jiān)聽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">
子組件使用監(jiān)聽事件使用
emit(eventName)觸發(fā)事件
購物車最終代碼：
<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() {
// 觸發(fā)input事件
this.$emit('input',this.count);
}
}
};
// 創(chuàng)建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實際中的應用開發(fā)就到此結束了，后續(xù)敬請期待?。?！
總結
以上所述是小編給大家介紹的Vue分頁效果與購物車功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)視頻全屏切換的功能,文中的示例代碼講解詳細, 具有一定的借鑒價值,有需要的小伙伴可以參考一下2023-11-11
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。今天我們來介紹VueJs 搭建Axios接口請求工具，需要的朋友參考下本文吧2017-11-11
這篇文章主要介紹了Vue的指令中實現(xiàn)傳遞更多參數，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue入門之數量加減運算操作,結合實例形式分析了vue.js基本數值運算相關操作技巧,需要的朋友可以參考下2018-12-12
通過簡單的三步讓大家對VUEX快速的入門，本文還介紹了VUEX的最基礎的函數以及相關知識點，有興趣的學習下。2018-05-05
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內容會替換子組件的<slot></slot>標簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關于Vue全局loading及錯誤提示的思路與實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
下面小編就為大家?guī)硪黄猇ue利用路由鉤子token過期后跳轉到登錄頁的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
文章總結：介紹了兩種實現(xiàn)父組件觸發(fā)子組件方法的常用方法：通過ref訪問子組件實例并調用方法,以及使用自定義事件觸發(fā)子組件方法2025-01-01
vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法
本篇文章主要介紹了vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04