Vue之简单购物车

原创

于 2019-04-15 16:06:41 发布 · 303 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Web前端 #Vue

本文介绍了Vue作为渐进式框架在构建用户界面时的优势，特别是其响应式数据绑定和组件化特性。通过MVVM模式，Vue实现了视图与数据的分离，降低了前端开发的工作量。同时，Vue由尤雨溪开发，它融合了Angular的优点，避免了复杂的DOM操作，且拥有详尽的中文文档，学习曲线平缓。此外，文章还分享了在实际项目中如何组织文件结构和使用Bootstrap进行布局，并提供了部分CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue是一套用于构建用户界面的渐进式框架，只关注视图层。
其最为强大的特点就是响应的数据绑定和组件化，极大的减少了工作量。
使用MVVM开发模式，实现了视图与数据的分离。
轻量级的框架对计算机工作更加友好。
其作者尤雨溪在开发时保留了angular的优点，极大的解放了DOM操作。
提供中文文档，不存在语言障碍，十分易于学习。
相较于其他框架而言，优势更加明显。

（以下代码为个人练习时记录）

新建文件夹css+js+img以放置需要用到的文件
采用bootstrap布局
文末附css代码
（图片自行配制）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>

	<body>
		<div id="box">
			<nav class="navbar navbar-default" role="navigation">
			  <!-- Brand and tog