因为此前做过一段时间Django的后端开发，前端方面的知识一直非常欠缺，总觉得前端的知识太繁杂，无从下手。最近工作比较闲，就研究了一阵子，从最基础的html、js开始看，这个星期学习了一下vue.js，觉得真是棒极了。这篇是使用bootstrap+vue.js实现的一个简单的购物车功能。大部分跟着https://segmentfault.com/a/1190000010801357做的，html的部分采用了bootstrap来写。
准备工作
为什么选择vue.js？瞎选的，就像瞎选了Django学一样，不过我猜想用到最后框架无非是大同小异吧。
首先先来个简单的。实现胶囊式导航栏显示切换。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try VUE</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="container">
<ul class="nav nav-pills" id="test">
<li @click="curId=0" :class="{'active':curId===0}"><a href="#">html</a></li>
<li @click="curId=1" :class="{'active':curId===1}"><a href="#">css</a></li>
<li @click="curId=2" :class="{'active':curId===2}"><a href="#">javascript</a></li>
<li @click="curId=3" :class="{'active':curId===3}"><a href="#">vue</a></li>
</ul>
<div v-show="curId===0">
html<br/>
</div>
<div v-show="curId===1">
css
</div>
<div v-show="curId===2">
javascript
</div>
<div v-show="curId
最低0.47元/天 解锁文章
1000
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
