Vue2.0實現(xiàn)購物車功能
簡介
vue.js是由華人尤雨溪開發(fā)的一套MVVM框架。vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM 的系統(tǒng)，它非常適用于具有復雜交互邏輯的前端應用，如一些單頁應用程序，有很多表單操作，頁面中的內(nèi)容需要根據(jù)用戶的操作動態(tài)變化。
主要特性：
1.響應式的數(shù)據(jù)綁定
2.組件化開發(fā)
3.Virtual DOM
開發(fā)準備
工具
我使用的編輯器是sublime text3，首先要先安裝個插件sublimeServer，用來搭建一個http服務器，使用詳情請查看這篇博客文章： 配置Chrome支持本地（file協(xié)議）的AJAX請求
下載相關(guān)vue文件
1.vue-resource.js
2.vue.min.js（也可以用vue.js，開發(fā)版有錯誤提示）
所有文件及說明
data文件夾存放著相關(guān)的數(shù)據(jù)，因為沒有連接數(shù)據(jù)庫，所以直接以json的形式展示數(shù)據(jù)，實際上數(shù)據(jù)庫中也是以json的形式存儲數(shù)據(jù)的，我們以此方式模擬與數(shù)據(jù)庫的通信。
lib文件夾下存放引入的相關(guān)vue文件。
在js文件里創(chuàng)建vue實例。
頁面展示
購物車界面：
該購物車實現(xiàn)了全選、自動計算總金額、刪除等功能，點擊刪除后的效果如下：
點擊結(jié)賬，就會跳轉(zhuǎn)到收貨地址選擇頁面，點擊more可以展開更多的地址選擇，并且可以設置某個地址為默認地址，還可以指定配送方式。
主要知識點詳解
vue是一個MVVM框架。
M（model，數(shù)據(jù)）：
V（view，DOM視圖）：
VM（view-model，通信）
源碼地址：https://github.com/Paranoidyang/vue2.0-shoppingCart
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要和大家一起深入探討Vue.js組件和組件通信的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家詳細介紹了Vue編寫一個挺靠譜的多地區(qū)選擇組件的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
Vue+ElementUI實現(xiàn)動態(tài)更換任意主題色(動態(tài)換膚)的全過程
眾所周知Element-UI有換膚功能,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUI實現(xiàn)動態(tài)更換任意主題色(動態(tài)換膚)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
學習過vue2的寶子們肯定知道,組件傳值是vue項目開發(fā)過程中必不可少的功能場景,下面這篇文章主要給大家介紹了關(guān)于vue3中組件傳值的多種方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue3 reactive響應式賦值頁面不渲染的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了從零開始在NPM上發(fā)布一個Vue組件的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
組件（Component）是Vue.js最強大的功能之一,組件可以擴展?HTML?元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于VUE3學習教程之全局組件和局部組件的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)web滾動條分頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue3為什么這么快,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
Vue+Express實現(xiàn)登錄注銷功能的實例代碼
這篇文章主要介紹了Vue+Express實現(xiàn)登錄,注銷功能，本文通過實例代碼講解的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05