VueStrap简单使用方法 附Vuestrap Demo

VueStrap貌似是华人出的一个Vue相关作品,从Vue-strap的官网介绍就能看出它是做什么用的了,他实现的基本就是Bootstrap的效果,只是不需要额外地加载任何第三方JS库(Jquery及Bootstrap自带的Js文件),需要的仅仅是Bootstrap的样式css文件和Vue.js,Github上面到目前为止2513分算是相当不错的了。对于需要用Bootstrap来接合Vue作开发的项目来说,因为不需要原有的依赖,从而达到减少开发代码文件,提高开发效率的目的,不但,大大缩小了核心库文件,而且提高了用户体验,如果是Vue的铁杆又喜欢Bootstrap的同学又怎么会错过呢?不过这个库虽然不错,但初体验感很不理想,其上手难度完爆BootStrap+Vue,以至于很多朋友都纠结于如何实现“Hello World”,其实说白了是教程写得不明晰!


VueStrap简单使用方法 附Vuestrap Demo_第1张图片
vuestrap-2

好吧,因为时间有限下面我就以最简单的Alert框的实现来做一个Demo吧,具体过程就不详细展开了讲了,当然,前提是你的Vue基本功做为支撑,要不然各种云里雾里……
实现的效果如下,用鼠标点击按钮后在顶部弹出警告框:


VueStrap简单使用方法 附Vuestrap Demo_第2张图片
vuestrap-1

使用到的Js依赖如下:
Vue:1.x
BootStrap:3.x
VueStrap:1.1.29

最终Demo代码参看附件:
vue-strap-demo.rar

Tag:BootStrap, Vue, VueStrap
发布时间:2015年09月26日
博客被黑,挪窝安家……

你可能感兴趣的:(VueStrap简单使用方法 附Vuestrap Demo)