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

一、为什么要写这篇文章

最近忙里偷闲学了一下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文件所以没法直接在这里给大家展示了

这个是使用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效果:

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 的基础应用,里面涉及到的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来实现这个效果,希望各位大神多多指教

展示一下效果:

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项目实践(案例详解),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-09-20

Boostrap实现的登录界面实例代码

Bootstrap它是一个开源的web开发前端框架. 这几天我看了下Bootstrap的官方文档.看到其中的Basic-form,突然想实现下登录界面.然后想了下实现的思路,于是就打开了桌面的H5 builder码起来.代码实现起来其实不难,但是碰到个问题,就是Bootstrap的布局控制好像用.col类难以实现居中显示,虽然可以用modal(模态框)实现弹出居中,但是我暂时不想用modal框.发现问题后,第一想法是自己再定义个css进行一个控制.但是又不知道行业内的大牛是不是只用Bootstr

使用boost读取XML文件详细介绍

boost读取XML文件 boost中提供了对配置文件读取的支持,它就是:property_tree. basic_ptree 是property_tree的核心基础.其接口像std::list.可以执行很多基本的元素操作,比如使用begin().end()等.     此外还加入了操作属性树的get().get_child().get_value().data()等额外的操作. basic_ptree有两个重要的内部定义self_type和value_type.self_type是basic_

使用HTML5+Boostrap打造简单的音乐播放器

前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是jQuery的源码和Boostrap.js的源码,任务很艰巨呢,加油~在此就不整篇的贴代码了,如果感兴趣的小伙伴可以发消息给我,可以把代码传给你们~ 正文: 先上效果图 1.布局:Boostrap里的响应式和自适应布局是自然跑不掉的,container中嵌套row再分别嵌套aside和main(H5新

C++ boost 时间与日期处理详细介绍

boost 时间与日期处理 导视: 类 特点 缺点 说明 timer 计时基类 不适合大跨度时间 适用大部分的普通计时 progress_timer 继承自timer 可以自动写入流中 只精确到0.01s 如果需要更精确,可派生个类,调用stream的precision设置 progress_display 图形化显示进度 只能输出到cout 如果还有其他输出则会干扰进度显示. 折中的办法是重新显示 pd.restart(size); pd+= pNum; date 日期结构,时间点 -- da

C++之Boost::array用法简介

本文实例讲述了c++里支持静态数组的容器:boost.array.分享给大家供大家参考.具体分析如下: 很多C++程序员都认为boost.array很有可能出现在下一代标准库里.对于boost.array的用法有一个基本的了解是很有必要的. 1. 为什么我们需要固定大小的数组的容器 首先,固定大小的数组还是很常见的,虽然stl提供了vector,但是vector作为动态可增长的数组,比静态数组多了一点开销,这在一些人看来是无法忍受的.c++里也需要提供固定大小容量的数组容器,当然,性能可以和普通

C++之boost::array的用法

本文实例讲述了C++之boost::array的用法,分享给大家供大家参考.具体如下: 复制代码 代码如下: #include <string>  #include <iostream>  #include <boost/array.hpp>  #include <algorithm>  using namespace std;  int main()  {      boost::array<int, 5> array_temp = {{12,

浅析Boost智能指针:scoped_ptr shared_ptr weak_ptr

一. scoped_ptrboost::scoped_ptr和std::auto_ptr非常类似,是一个简单的智能指针,它能够保证在离开作用域后对象被自动释放.下列代码演示了该指针的基本应用: 复制代码 代码如下: #include <string>#include <iostream>#include <boost/scoped_ptr.hpp> class implementation{public:    ~implementation() { std::cout

Boostrap模态窗口的学习小结

Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.什么是模态窗口? 是这样一种效果哟: 二. 组成 头部(包括标题和关闭按钮) 中间(主要内容) 底部(主要是放置操作按钮) 对应在html代码中的布局是:使用div容器元素,分别使用modal,modal-dialog,modal-cotent样式,而

C++中Boost库裁剪与其应用详解

前言 Boost 库涵盖的范围极广,有字符串和文本处理相关子库比如 format 库和 regexp 库,有容器相关子库比如 variant 库(和 Qt 的 QVariant 有得一拼),有迭代器子库比如 tokenizer 库(可以把字符进行 tokenize),还有算法.函数对象和高阶编程相关子库如functional 库.lambda 库和 signal 库,还有泛型编程.模板编程子库如 call traits.mpl,还有并发编程相关的 thread 库,等等等等. Boost 是如此

C++之BOOST字符串查找示例

本文实例讲述了C++中BOOST字符串查找的方法,分享给大家供大家参考.具体方法如下: BOOST  字符串查找示例 复制代码 代码如下: #include <string>  #include <iostream>  #include <algorithm>  #include <functional>  #include <boost/algorithm/string/case_conv.hpp>  #include <boost/al

vue语法之拼接字符串的示例代码

本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d

C++ string 字符串查找匹配实例代码

在写C++程序中,总会遇到要从一个字符串中查找一小段子字符串的情况,对于在C中,我们经常用到strstr()或者strchr()这两种方法.而对于C++的string,我们往往会用到find(). C++:#inlcude<string> C: #include<string.h> find():在一个字符串中查找一个指定的单个字符或字符数组.如果找到,就返回首次匹配的开始位置:如果没有查找到匹配的内容,就返回string::npos. find_first_of():在一个目标串

asp之字符串函数示例

asp之字符串函数示例用字符串函数对字符串进行截头去尾.大小写替换等操作. 函数语法功能LenLen(string|varname)返回字符串内字符的数目,或是存储一变量所需的字节数.TrimTrim(string)将字符串前后的空格去掉LtrimLtrim(string)将字符串前面的空格去掉RtrimRtrim(string)将字符串后面的空格去掉MidMid(string,start,length)从string字符串的start字符开始取得length长度的字符串,如果省略第三个参数表示

C/C++字符串查找函数全面了解

C/C++ string库(string.h)提供了几个字符串查找函数,如下: memchr 在指定内存里定位给定字符 strchr 在指定字符串里定位给定字符 strcspn 返回在字符串str1里找到字符串str2里的任意一个字符之前已查找的字符数量 strrchr 在字符串里定位给定字符最后一次出现的位置 strpbrk 在字符串str1里定位字符串str2里任意一个首次出现的字符 strspn 返回字符串str1从开始字符到第一个不在str2中的字符个数 strstr 在字符串str1中

SQLserver中字符串查找功能patindex和charindex的区别

最近经常使用字符串查找功能. 包括 1.全匹配查找字符串 2.模糊查找字符串 CHARINDEX 和 PATINDEX 函数都返回指定模式的开始位置.PATINDEX 可使用通配符,而 CHARINDEX 不可以. 这两个函数都带有2个参数: 1 希望获取其位置的模式.使用 PATINDEX,模式是可以包含通配符的字面字符串.使用 CHARINDEX,模式是字面字符串(不能包含通配符). 2 字符串值表达式(通常为列名). 例如,查找模式"wonderful"在 titles 表中 n

JavaScript 正则表达式与字符串查找方法

首先提出一个问题: 如何取得一个给定的字符串substr在另一个字符串str中出现的次数? 字符串匹配,第一想到的就是正则表达式,但我们最常使用的字面量来创建的正则表达式方式却无法传入变量, 这时应该使用另一种创建正则表达式的方式:构造函数,如下 var reg = new RegExp(substr, "g"); 其中第一个参数表示要匹配的字符串模式,因此可以传入变量,不需要加/ /,第二个参数是可选的标志字符串. 可以传入变量了,再介绍个字符串基本包装类型的方法:match() 语

php常用字符串查找函数strstr()与strpos()实例分析

本文实例讲述了php常用字符串查找函数strstr()与strpos().分享给大家供大家参考,具体如下: string strstr ( string $haystack , mixed $needle [, bool $before_needle = false ] ) 1.$haystack被查找的字符串,$needle要查找的内容 2.如查找到则返回字符串的一部分,如没找到则返回FALSE 3.该函数区分大小写,如果想要不区分大小写,请使用 stristr() 4.如果你仅仅想确定nee

python字符串查找函数的用法详解

python字符串查找函数的使用 打开Python开发工具IDLE,新建'findstr.py'文件,并写代码如下: s ='/ab/bx,.s' print (s.find('/x')) 注意find是匹配子字符串,而不是匹配第一个字符 F5运行程序,打印出-1,代表没有找到'/x'子字符串 修改代码如下,查找'/b'子字符串 s ='/ab/bx,.s' print (s.find('/b')) F5运行程序,打印出3,代表'/b'子字符串起始索引是3 find是从左到右查找,默认从起始位置

python同时替换多个字符串方法示例

本文介绍了python同时替换多个字符串方法示例,分享给大家,具体如下: import re words = ''' 钟声响起归家的讯号 在他生命里 仿佛带点唏嘘 黑色肌肤给他的意义 是一生奉献 肤色斗争中 年月把拥有变做失去 疲倦的双眼带着期望 今天只有残留的躯壳 迎接光辉岁月 风雨中抱紧自由 一生经过彷徨的挣扎 自信可改变未来 问谁又能做到 可否不分肤色的界限 愿这土地里 不分你我高低 缤纷色彩闪出的美丽 是因它没有 分开每种色彩 年月把拥有变做失去 疲倦的双眼带着期望 今天只有残留的躯壳