vue.js+boostrap项目实践(案例详解)


Posted in Javascript onSeptember 21, 2016

一、为什么要写这篇文章

最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码。

二、学习这篇文章需要具备的知识

1、需要有vue.js的知识

2、需要有一定的HTML、CSS、JavaScript的基础知识

3、由于在项目中会加入一些juqery,所以还需要一定的基础,但是这个能看懂就行了

4、boostrap的知识也是要的,但是这个我建议大致的看一下就行了,因为到时候不懂就直接看手册

三、开始入门小项目

这个项目我们需要要达到的效果是,让读者明白vue.js在实际工作中是怎样应用的,同时,也算是第一个带你将vue.js和boostrap相结合的开端项目吧

废话不多说,下来看一下效果如何

PS:由于在博客园中的编辑器不允许嵌入JS文件所以没法直接在这里给大家展示了

vue.js+boostrap项目实践(案例详解)

这个是使用boostrap来作为样式,使用vue.js来与相关的按钮进行绑定的从而达到相应的效果

HTML代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue导航菜单</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div v-on:click.prevent id="btngroup" style="margin-left: 20px;margin-top: 20px" class="btn-group">
<div v-on:click=makeActive("按钮1") class="btn btn-primary">按钮1</div>
<div v-on:click=makeActive("按钮2") class="btn btn-success">按钮2</div>
<div v-on:click=makeActive("按钮3") class="btn btn-info">按钮3</div>
<br>
<p>当前选择的是:{{select}}</p>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="../vue.js"></script>
</body>
</html>

这里面我们需要注意这些,

1、使用vue.js引入的时候要注意一下,vue.js的版本问题,作者本人就是在这里被坑了好多天才发现和解决的

2、{{变量}}这样的格式是表示在前端也就是view层要显示的Model的地方

JavaScript代码

window.onload=function(){
var demo=new Vue({
el:'#btngroup',
data:{
select:'按钮1'
},
methods:{
makeActive:function(item){
this.select=item;
}
}
});
}

解析:

el: ---这个相当于是一个大的作用域,也就是指定了最后的那个绑定的对象在id为btngroup元素的下面才会生效的,所到底也就是一个大的容器

data:这个是制定要绑定到前端的内容,但是我们需要注意的是,只里面我们不止是可以存在一个键值对的,多个键值对也是可行的,也就是类似于

data:{
select:"按钮1",

test:1
}

这样的也是可以接受的,但是如果你是想对这个test进行更改了之后再进行返回的话我们可以在Vue的作用域内加上这样的一句

demo.test=2

CSS代码如下:

*{
margin:0px;
padding:0px;
font-family:'LiSu';
font-size:16px !important;
}

这里我们注意一下,我们使用的所有的例子都是公用一份CSS样式表的,所以在下面我们将不会再次提及样式的问题,如果改动样式我们会直接写在HTML中。

这里我们我们所以下为什么要使用这个!important属性,因为当你引入了boostrap的时候,会发现boostrap的属性我们在样式表中是无法对其进行替换的,除非你在行内样式中更改这个另当别论,所以这个时候我们有3种解决方法

1、在boostrap中进行勾选,因为boostrap是使用LESS的方法编译而成的,所以支持用户自定义boostrap的内容

2、像我这样在样式中的属性加上!important使其无法被boostrap中冲突的样式覆盖

3、直接在样式表中改写

我比较推崇的是第一种做法,但是第二种做法感觉上也没什么不好的,第三种做法不推荐这样会不够灵活和加大代码的复杂度

第一个项目好了,我们可以狠搓这里预览

四、进阶项目练习

上面的这个项目比较的简单,只能算是对vue.js的一个简单的应用,下面我们会有一个新的项目,这个项目中涉及到一些双想绑定的应用,以及有些其他的方法,想在老司机就来开车了,看客要记得在留言区打卡

GIF效果:

vue.js+boostrap项目实践(案例详解)

HTML代码:

<meta charset="UTF-8">
<title>vue+boostrap最佳实践2</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div id="main">
<div v-if="status" style="margin-top: 10px;margin-left: 10px;width:400px" class="input-group">
<div class="input-group-addon">输入框</div>
<input v-model="inp" type="text" class="form-control"
placeholder="请输入内容">
</div>
<div style="margin-top: 15px;margin-left: 150px"class="btn btn-default" type="button">
<div v-on:click="toggle()" class=" glyphicon glyphicon-search">{{inp}}</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="../vue.js"></script>
</body>
</html>

注意事项:

1、在v-model绑定的时候,placeholder是不起作用的

2、v-model是用来做双向绑定的,顾名思义就是在它可以改变model,同时也可以被model所改变

3、v-if后面的值如果返回的是false,那么整个v-if修饰Element也就存在,所以其下面的HTML代码也就不会显示

JavaScript代码

window.onload=function(){
var demo=new Vue({
el:'#main',
data:{
inp:"请输入",
status:false
},
methods:{
hide:function(){
this.status=false;
},
toggle:function(){
this.status=!this.status;
}
}
});
}

这个真心没有什么可以说的

看效果猛搓这里

五、实战小项目带你飞

1、模拟购于车统计

购物车这个相信大家都知道是什么东西而且怎么用吧,但是这个不知道大家有没有想过就是购物车在统计东西的总金额的时候,如果是使用传统的方法来实现的话(也就是JavaScript来原生态实现),这个时候我们就需要定义一个方法,用来获取当前的物品的数量以及每个数量的金额,但是如果物品多的话,这个对于整个逻辑上来实现是非常困难的,很容易出现错误。所以这个时候使用vue.js是极好,通过对model的改变从而到达model中的值也就是最终的总金额

效果展示:

vue.js+boostrap项目实践(案例详解)

这个例子如果你有认真学习的话,你基本上差不多也就掌握了vue.js 的基础应用,里面涉及到的vue.js中的语法比较综合,如果还不熟悉的话,请看官方文档

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue+boostrap最佳实践3</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="../style.css">
<style>
.color{
background:#E35885;
}
</style>
</head>
<body>
<div style="width:500px;margin-top: 20px;margin-left: 20px;" id="main">
<a href="#" v-on:click="change" class="list-group-item active">商品总金额: {{total}}
<div></div>
</a>
<template v-if="ok">
<div v-for="food in foods">
<a href="#" v-bind:class="{'color':food.isClick}" class="list-group-item" v-on:click="UpdateTotal(food)">{{food.name}}
<span style="float:right" class="label label-default">¥{{*food.price}}</span>
</a>
</div>
</template>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="../vue.js"></script>
</body>
</html>

JavaScript代码

window.onload=function(){
//alert(1);
var data={ok:1,total:0,foods:[
{
name:'苹果',
status:false,
price:15,
isClick:false
},
{
name:'梨子',
status:false,
price:10,
isClick:false
},
{
name:'殷桃',
status:false,
price:22,
isClick:false
},
{
name:'西瓜',
status:false,
price:13,
isClick:false
}
]};
var demo=new Vue({
el:'#main',
data:data,
methods:{
change:function(){
this.ok=!this.ok;
},
UpdateTotal:function(food){
if(food.status==true){
food.price=-Math.abs(food.price);
}else{
food.price=Math.abs(food.price);
}
data.total+=food.price;
food.status=!food.status;
food.isClick=!food.isClick;
}
}
});
}

其中还有一个bug没法解决,就是在点击之后才会对点击的元素添加上类,这个与我要实现的点击的同时会添加类这个有所冲突,知道的希望大家在后面踊跃留言

预览地址

2、搜索引擎模拟

搜索引擎模拟这里所得有点大了,事实上真正的搜索是不可能通过前端就实现的,这个大家都知道因为很多东西都要用后端去抓取,但是小编是在一个小城市工作的,所以也见过一些制作得比较差的,APP商业项目,举个例子来说,就像你使用百度外卖的手动获取地理位置的时候,你如果输入一部分相关的内容之后会自动筛选相应的内容列出来,这个的详细的用法可以在各大手机外卖APP上面看到这里我就不截图了,但是我发现我这边的APP是没有这个功能的,所以用户体验感觉很是不好。所以在这里我就想尝试一下应用vue.js+boostrap来实现这个效果,希望各位大神多多指教

展示一下效果:

vue.js+boostrap项目实践(案例详解)

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue+boostrap最佳实践4</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div style="margin-left: 100px;margin-top: 100px;width:600px" id="main">
<div class="input-group">
<input v-model="searchString" type="text" class="form-control" placeholder="请输入标题名称">
<div class="input-group-addon">搜索</div>
</div>
<ul class="list-group">
<template v-for="msg in msgs|searchFor searchString">
<li class="list-group-item">
<span>{{msg.title}}</span>
<span style="margin-left:10px">{{msg.author}}</span>
</li>
</template>
</ul>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="../vue.js"></script>
</body>
</html>

这一次为了读者能够更清楚的理解每个的意义,我将注释都写在代码中这样读者就能够更方便的理解

javascript代码

window.onload=function(){
var data={
searchString:"",
msgs:[
{
title:'the best technology is the most basic',
author:'谢灿勇'
},
{
title:'hijacking the javascript function',
author:'谢灿勇'
},
{
title:'use karma to test multiple broswer',
author:"司徒正美"
}
]};
//定义一个自定的过滤器叫做searchFor,传递一个过滤参数searchString
//第一个参数指的是要过滤的数据源data
Vue.filter("searchFor",function(value,searchString){
//判断传入的内容是否为空
if(!searchString){
//将要过滤的对象全部返回,也就是是相当于什么都没有操作一样
//程序也在这个地方终止不会继续向下走
return value;
}
//将输入的内容统一为小写或者大写
seearchString=searchString.trim().toLowerCase();
var result=[];
//item指代当前数据
result=value.filter(function(item){
//查询的内容不存在
if(item.title.toLowerCase().indexOf(searchString) !== -1){
return item;
}
});
return result;
});
var demo=new Vue({
el:'#main',
data:data,
})
}

以上所述是小编给大家介绍的vue.js+boostrap项目实践(案例详解),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
Vue渲染函数详解
Sep 15 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
js实现每日签到功能
Nov 29 Javascript
AngularJS  ng-table插件设置排序
Sep 21 #Javascript
BooStrap对导航条的改造实践小结
Sep 21 #Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 #Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 #Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 #Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 #Javascript
D3.js实现饼状图的方法详解
Sep 21 #Javascript
You might like
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php动态函数调用方法
2015/05/21 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
php跨域调用json的例子
2013/11/13 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
javascript计时器详解
2015/02/28 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python单元测试框架unittest简明使用实例
2015/04/13 Python
windows下ipython的安装与使用详解
2016/10/20 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python中函数参数匹配模型详解
2019/06/09 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
服装厂厂长岗位职责
2013/12/27 职场文书
食品安全检查制度
2014/02/03 职场文书
财务负责人任命书
2014/06/06 职场文书
学生会个人总结范文
2015/02/15 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python