vue.js助推器项目实践(案例详情)

一、为什么要写这篇文章

最近抽空学了vue.js，复习了一下boostrap，发现这两个东西如果同时使用，可以起到非常强大的作用。boostrap优雅的风格和丰富的组件使页面开发更加美观和容易。同时，vue.js可以绑定模型和视图(相当于MVC中的M和V的关系)，使得数据转换的操作更加容易和简单。

二、学习本文所需的知识

1.需要了解vue.js

2.你需要对HTML、CSS和JavaScript有一定的基础知识

3.由于项目会增加一些细节，需要一定的基础，但这是可以理解的

4.boostrap的知识也很重要，但我建议大致看一下，因为如果你不懂，可以直接看手册

第三，启动入门小项目

我们在这个项目中需要达到的效果是让读者了解vue.js在实际工作中是如何应用的，同时也可以看作是第一个带你把vue.js和boostrap结合起来的初始项目

废话不多说，下来看看怎么用

因为博客公园的编辑器不允许嵌入JS文件，所以无法在这里直接显示PS:

这是用boostrap作为风格，用vue.js与相关按钮绑定，达到相应的效果

HTML代码如下：

！doctype html lang=' en ' head meta charset=' utf-8 ' title vue导航菜单/title linkrel='样式表' href=' http://cdn.bootcss.com/bootstrap/3.3.5/CSS/bootstrap . min . CSS ' link rel='样式表' href=' style . CSS '/head dydiv v-: click . prevent id=' btng roup ' style=' margin-left 3360 20px；margin-top : 20px ' Class=' BTN-集团' div v-: click=make active('按钮1 ')Class=' BTN BTN-primary ' button 1/div v v-: click=make active('按钮2 ')Class=' BTN BTN-info ' button 3/div BRP当前选择3360 {{select}}./vue.js'/script/body/html我们需要注意这些。

1.用vue.js介绍的时候，注意一下vue.js的版本问题，作者本人是在这里被坑了好多天才发现并解决的

2.{{variable}}的格式表示前端，即模型在视图图层中显示的位置

JavaScript代码

window . onload=function(){ vardemo=new vue({ El : ' # btng roup }，data : { select : ' button 1 ' }，methods: {使3360 function (item)处于活动状态} { this。select=item}}});}解析：

El: -这相当于一个大范围，也就是说，指定最后一个绑定的对象只会在id为btngroup的元素下生效，毕竟btngroup是一个大容器

Data:是要绑定到前端的内容，但需要注意的是，我们不能只有一个键值对，多个键值对也是可行的，类似于

Data:{select:' button 1 '，test:1}也是可以接受的，但是如果想在返回之前更改这个测试，我们可以在Vue的范围内添加这样一个句子。

Demo.test=2 CSS代码如下：

* { margin:0pxpadding:0pxfont-family : ' LiSu '；font-size:16px！重要；}在这里，我们注意到我们使用的所有示例都共享一个CSS样式表，因此我们在下面不再提及该样式。如果我们改变风格，我们会直接用HTML写。

我们-我们-为什么要用这个！重要属性，因为当您引入boostrap时，您会发现除非您在内联样式中更改它，否则我们无法在样式表中替换它，因此我们目前有三种解决方案

1.签入boostrap，因为boostrap是用LESS方法编译的，所以用户可以自定义boostrap的内容

2.像我一样在样式中添加属性！重要信息防止它被boostrap中冲突的样式覆盖

3.直接在样式表中重写

我更喜欢第一种方法，但第二种方法没有错。不建议使用第三种方法，这种方法不够灵活，会增加代码的复杂性

第一个项目已经准备好了，我们可以在这里预览

第四，高级项目练习

上面的项目比较简单，只能算是vue.js的一个简单应用下面我们会有一个新的项目，涉及到一些双绑定的应用和一些其他的方法。老司机会来开车，观众要记得在留言区打卡

GIF效果：

HTML代码：

metachartset=' utf-8 ' title vue bootstrap最佳实践2/title linkrel='样式表' href=' http://cdn.bootcss.com/bootstrap/3.3.5/CSS/bootstrap . min . CSS ' link rel='样式表' href='./style . CSS '/headsdydiv id=' main ' div v-if=' status ' style=' margin-top : 10px；左边距left: 10pxwidth :400 px ' class=' input-group ' div class=' input-group-addon '输入框/div input v-model=' InP ' type=' text ' class=' form-control ' placeholder='请输入内容'/div div style=' margin-top : 100 margin-left : 150 px ' class=' BTN BTN-default ' type=' button ' div-3360 click=' toggle()' class=' glyph './vue.js'/script/body/htmlnotes:

1.绑定v-model时，占位符无效

2.v-model用于双向绑定。顾名思义，它可以改变模型，也可以被模型改变

3.如果v-if之后的值返回false，则整个v-if修饰符元素将存在，因此它下面的HTML代码将不会显示

JavaScript代码

window . onload=function(){ vardemo=new vue({ El : ' # main '，data: {inp3360 '，请输入'，status: false}，methods : { hide 3360 function(){ this。status=false}，toggle : function(){ this . status=！这种地位；}}});}这真的没什么好说的

看效果，在这里搓

第五，实战小项目会带你飞

1.汽车购买统计模拟

相信大家都知道购物车是什么，怎么用的，但是不知道大家有没有想过，就是购物车统计东西总量的时候，如果是用传统的方法实现的(也就是用JavaScript来实现原有的生态)，那么我们需要定义一个方法来获取当前的物品数量和每个数量的数量，但是如果物品多的话，整个逻辑就很难实现，容易出错。因此，此时使用vue.js是极好的。通过更改模型，模型中的值就是最终的总额

效果显示：

在这个例子中，如果你努力学习，你基本上已经掌握了vue.js的基本应用，所涉及的vue.js中的语法是全面的。如果你不熟悉，请看官方文件。

HTML代码：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 ' title vue boos trap最佳实践3/titlelink rel='样式表href=' http://cdn。bootscs。com/bootstrap/3。3 .5/CSS/bootstrap。量滴CSS ' link rel='样式表href='./style。“CSS”样式。颜色{背景： # e 35885}/style/head dydiv style=' width :500 px；边距-top : 20px；左边距left : 20pxid=' main ' a href=' # ' v-: click=' change ' class=' list-group-item active '商品总金额： { { total } } div/div/atem plate v-if=' ok ' div v-for=' foods in foods ' a href=' # ' v-bind : class=' { ' color ' : food。is click } ' class=' list-group-item ' v-: click=' updateTotaL(foods)' { { foods。name } } span style=' float 3360 right ' class=' label label-default ' { * food ./vue。js '/脚本/正文/HTMl JAVAScript代码

窗户。onload=function(){//alert(1)；定义变量数据={ok:1，总计：0，food : [{ 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，is click : false }]}；var demo=new Vue({el:'#main '，data:data，methods : { change : function(){ this。ok=！这个，好的，updatetotals :函数(food){ if(food。status==true){ food。价格=-数学。腹肌(食物。价格)；} else { food。价格=数学。腹肌(食物。价格)；}数据。总计=食物。价格；food.status=！食物。地位；food.isClick=！食物。是点击；}}});}其中还有一个病菌没法解决，就是在点击之后才会对点击的元素添加上类，这个与我要实现的点击的同时会添加类这个有所冲突，知道的希望大家在后面踊跃留言

预览地址

2、搜索引擎模拟

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

展示一下效果：

超文本标记语言代码：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 ' title vue boos trap最佳实践4/titlelink rel='样式表href=' http://cdn。bootscs。com/bootstrap/3。3 .5/CSS/bootstrap。量滴CSS ' link rel='样式表href='./style。CSS '/headdydiv style=' margin-left : 100px；边距-top : 100 px；宽度：600 px ' id=' main ' div class=' input-group ' input v-model=' search string ' type=' text ' class=' form-control ' placeholder='请输入标题名称' div class='输入-组-插件'搜索/div/divul类=' list-group '模板v-for=' msg in msg |搜索搜索字符串' Li类=' list-group-item ' span { { msg。title } }/span span style=' margin-left :10 px ' { msg。作者} }/span/Li/template/ul/div脚本src=' http 3360http://cdn。bootcss。com/jquery/1。11 .3/jquery。量滴js '/脚本脚本脚本./vue.js'/script/body/html这一次为了读者能够更清楚的理解每个的意义，我将注释都写在代码中这样读者就能够更方便的理解

爪哇岛描述语言代码

window . onload=function(){ var data={ search string : ' '，msgs: [{title : '最好的技术是最基础的'，作者3360' Xie canyong'}，{title : '劫持了JavaScript函数'，作者：' Xie Canyong'}，{ title 3: '用karma测试多个broswer '，作者： ' Situ梅铮' } } }；//定义一个名为searchFor的自定义过滤器，并传递一个过滤器参数searchString//第一个参数引用数据源datavue.filter ('searchfor ')，函数(value，search string){//判断传入的内容是否为空if(！SearchString){//返回所有要过滤的对象，也就是说，它等同于无。//程序也在这个地方终止，不会继续下去返回值；}//将输入统一为小写或大写seearchstring=search string . trim()。to lower case()；var结果=[]；//item指当前数据结果=值。filter(function(item)){//如果(item)查询的内容不存在。title.to小写()。(searchstring)的索引！==-1){返回项目；}});返回结果；});Vardemo=newvue ({el:' # main '，data:data，})}以上是边肖介绍的vue.js boostrap的项目实践(详细案例讲解)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！