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文件所以没法直接在这里给大家展示了

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

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

HTML代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue导航菜单</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link href="https://www.jb51.net/style.css"> </head> <body> <div v-on:click.prevent> <div v-on:click=makeActive("按钮1")>按钮1</div> <div v-on:click=makeActive("按钮2")>按钮2</div> <div v-on:click=makeActive("按钮3")>按钮3</div> <br> <p>当前选择的是:{{select}}</p> </div> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="https://www.jb51.net/script.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/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、直接在样式表中改写

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

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

四、进阶项目练习

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjjgj.html