vue是前端轻量级MVVM框架,入门门槛相对较低,今天用Vue做一个购物车实例,发表以便记录
原理分析和实现
首先,还是先把布局写好,和引入vue,准备vue实例,这个不多说,代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .fl{ float: left; } .fr{ float: right; } blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, img, input, li, ol, p, table, td, textarea, th, ul { margin: 0; padding: 0; } .clearfix{ zoom: 1; } .clearfix:after { clear: both; } .clearfix:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } a{ text-decoration: none; color: #333; } img{vertical-align: middle;} .page-shopping-cart { width: 1200px; margin: 50px auto; font-size: 14px; border: 1px solid #e3e3e3; border-top: 2px solid #317ee7; } .page-shopping-cart .cart-title { color: #317ee7; font-size: 16px; text-align: left; padding-left: 20px; line-height: 68px; } .page-shopping-cart .red-text { color: #e94826; } .page-shopping-cart .check-span { display: block; width: 24px; height: 20px; background: url("shopping_cart.png") no-repeat 0 0; } .page-shopping-cart .check-span.check-true { background: url("shopping_cart.png") no-repeat 0 -22px; } .page-shopping-cart .td-check { width: 70px; } .page-shopping-cart .td-product { width: 460px; } .page-shopping-cart .td-num, .page-shopping-cart .td-price, .page-shopping-cart .td-total { width: 160px; } .page-shopping-cart .td-do { width: 150px; } .page-shopping-cart .cart-product-title { text-align: center; height: 38px; line-height: 38px; padding: 0 20px; background: #f7f7f7; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; } .page-shopping-cart .cart-product-title .td-product { text-align: center; font-size: 14px; } .page-shopping-cart .cart-product-title .td-check { text-align: left; } .page-shopping-cart .cart-product-title .td-check .check-span { margin: 9px 6px 0 0; } .page-shopping-cart .cart-product { padding: 0 20px; text-align: center; } .page-shopping-cart .cart-product table { width: 100%; text-align: center; font-size: 14px; } .page-shopping-cart .cart-product table td { padding: 20px 0; } .page-shopping-cart .cart-product table tr { border-bottom: 1px dashed #e3e3e3; } .page-shopping-cart .cart-product table tr:last-child { border-bottom: none; } .page-shopping-cart .cart-product table .product-num { border: 1px solid #e3e3e3; display: inline-block; text-align: center; } .page-shopping-cart .cart-product table .product-num .num-do { width: 24px; height: 28px; display: block; background: #f7f7f7; } .page-shopping-cart .cart-product table .product-num .num-reduce span { background: url("shopping_cart.png") no-repeat -40px -22px; display: block; width: 6px; height: 2px; margin: 13px auto 0 auto; } .page-shopping-cart .cart-product table .product-num .num-add span { background: url("shopping_cart.png") no-repeat -60px -22px; display: block; width: 8px; height: 8px; margin: 10px auto 0 auto; } .page-shopping-cart .cart-product table .product-num .num-input { width: 42px; height: 28px; line-height: 28px; border: none; text-align: center; } .page-shopping-cart .cart-product table .td-product { text-align: left; font-size: 12px; line-height: 20px; } .page-shopping-cart .cart-product table .td-product img { border: 1px solid #e3e3e3; margin-right: 10px; } .page-shopping-cart .cart-product table .td-product .product-info { display: inline-block; vertical-align: middle; } .page-shopping-cart .cart-product table .td-do { font-size: 12px; } .page-shopping-cart .cart-product-info { height: 50px; line-height: 50px; background: #f7f7f7; padding-left: 20px; } .page-shopping-cart .cart-product-info .delect-product { color: #666; } .page-shopping-cart .cart-product-info .delect-product span { display: inline-block; vertical-align: top; margin: 18px 8px 0 0; width: 13px; height: 15px; background: url("shopping_cart.png") no-repeat -60px 0; } .page-shopping-cart .cart-product-info .product-total { font-size: 14px; color: #e94826; } .page-shopping-cart .cart-product-info .product-total span { font-size: 20px; } .page-shopping-cart .cart-product-info .check-num { color: #333; } .page-shopping-cart .cart-product-info .check-num span { color: #e94826; } .page-shopping-cart .cart-product-info .keep-shopping { color: #666; margin-left: 40px; } .page-shopping-cart .cart-product-info .keep-shopping span { display: inline-block; vertical-align: top; margin: 18px 8px 0 0; width: 15px; height: 15px; background: url("shopping_cart.png") no-repeat -40px 0; } .page-shopping-cart .cart-product-info .btn-buy { height: 50px; color: #fff; font-size: 20px; display: block; width: 110px; background: #ff7700; text-align: center; margin-left: 30px; } .page-shopping-cart .cart-worder { padding: 20px; } .page-shopping-cart .cart-worder .choose-worder { color: #fff; display: block; background: #39e; width: 140px; height: 40px; line-height: 40px; border-radius: 4px; text-align: center; margin-right: 20px; } .page-shopping-cart .cart-worder .choose-worder span { display: inline-block; vertical-align: top; margin: 9px 10px 0 0; width: 22px; height: 22px; background: url("shopping_cart.png") no-repeat -92px 0; } .page-shopping-cart .cart-worder .worker-info { color: #666; } .page-shopping-cart .cart-worder .worker-info img { border-radius: 100%; margin-right: 10px; } .page-shopping-cart .cart-worder .worker-info span { color: #000; } .choose-worker-box { width: 620px; background: #fff; } .choose-worker-box .box-title { height: 40px; line-height: 40px; background: #F7F7F7; text-align: center; position: relative; font-size: 14px; } .choose-worker-box .box-title a { display: block; position: absolute; top: 15px; right: 16px; width: 10px; height: 10px; background: url("shopping_cart.png") no-repeat -80px 0; } .choose-worker-box .box-title a:hover { background: url("shopping_cart.png") no-repeat -80px -22px; } .choose-worker-box .worker-list { padding-top: 30px; height: 134px; overflow-y: auto; } .choose-worker-box .worker-list li {