如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
Bootstrap是网上最流行的前端开发框架. 除了用它,我不知道还有其他更快的方法去构建一个响应式的网站。
但是自从我向网页添加动态功能的工具变成vue.js后。适应bootstrap变得困难起来。因为这带来了一些技术包袱。没错。我说的就是jquery。
这并不是在抨击jquery,我只是意识到,当你已经在项目里使用一些像Vue的框架后,再引入jQuery就会出现一些显著的缺点:
增加开销。jQuery将会使你的网页增加30KB。
在使用诸如webpack一类的打包工具时,jquery也会很难与之进行配置。
当你使用Vue负责DOM操作时,你不会愿意Jquery再来将DOM搞的一团糟。
彻底移除jQuery和Bootstrap的javascript插件
这里有一个很棒的项目 vue-strap ,它使用Vue.js 内置的插件来替换Bootstrap中的Javascript插件。因此你可以使用你项目中原有的Bootstrap插件,比如 modals, carousel, tabs, etc. 他们都是基于 Vue 提供支持.
但是如果你只是用一小部分的Bootstrap插件的话, 我觉得自己定制Vue.js的插件也很容易,那样的话你也不需要将整个vue-strap都引用进来(译者注:我就是只用了Vue.js和几个其他需要的plugin :)
下面让我展示一下怎么使用vue,从零开始设置一些常用的Bootstrap 插件
自己动手做由vue.js驱动的Bootstrap小部件
选项卡
我们将从选项卡开始。每一个选项卡都附带着他的面板. 选项卡的显示/隐藏是通过添加/移除选项卡与面板的class属性中的active来实现的,而这就是Vue将要处理的工作。
1 2 3 4 5 6 7 8 9 10 | <div id= "tabs" > <ul class= "nav nav-tabs" > <li><a>Tab 1</a></li> <li><a>Tab 2</a></li> </ul> <div class= "tab-content" > <div class= "tab-pane" >Pane 1</div> <div class= "tab-pane" >Pane 2</div> </div> </div> |
我们用一个变量tab来跟踪当前被选中的选项卡,并用这个变量来添加/移除选项卡与其对应面板的Class属性中的active:
1 2 3 4 5 6 7 8 9 10 11 12 | <div id= "tabs" > <ul class= "nav nav-tabs" > <li v-bind:class= "{ active: tab === 1}" ><a>Tab 1</a></li> <li v-bind:class= "{ active: tab === 2}" ><a>Tab 2</a></li> </ul> <div class= "tab-content" > <div class= "tab-pane" v-bind:class= "{ active: tab === 1}" > Pane 1</div> <div class= "tab-pane" v-bind:class= "{ active: tab === 2}" > Pane 2</div> </div> </div> |
我们还需要在所有的选项卡上监听点击事件,用来更新我们的tab变量
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div id= "tabs" > <ul class= "nav nav-tabs" > <li v-bind:class= "{ active: tab === 1}" v-on:click= "tab = 1" > <a>Tab 1</a> </li> <li v-bind:class= "{ active: tab === 2}" v-on:click= "tab = 2" > <a>Tab 2</a> </li> </ul> <div class= "tab-content" > <div class= "tab-pane" v-bind:class= "{ active: tab === 1}" > Pane 1</div> <div class= "tab-pane" v-bind:class= "{ active: tab === 2}" > Pane 2</div> </div> </div> |
最后,js代码:
这里还有一些我们可以进行的改进与优化,但为了使本文简介的缘故就不展开了:
将JavaScript代表包装成一个Vue组件,以便我们能在整个网站重用这个选项卡代码。
作为一个真正紧凑的模板。将选项卡和对应的面板内容放入一个数组属性中,然后用 v-for来打印出选项卡与面板的列表来。
模态框
模态对话框是我最喜欢的Bootstrap 插件之一。与选项卡类似,我们通过添加/移除一个in的类来控制模态框的显示/隐藏。而这些通过一个打开和关闭按钮来触发,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div id= "app" v-bind:class= " { 'modal-open': show }" > <button class= "btn btn-primary" v-on:click= "toggle" > Open </button> <div class= "modal" tabindex= "-1" v-bind:class= "{ in: show }" v-bind:style= "modalStyle" > <div class= "modal-dialog" > <div class= "modal-content" > <div class= "modal-body" > <p>Vue-powered modal!</p> </div> <div class= "modal-footer" > <button class= "btn" v-on:click= "toggle" >Close</button> </div> </div> </div> </div> </div> |
对于一个Bootstrap 的模态框,我们需要在对话框上有一个动态的内联样式。 我们通过 v-bind:style 指令来实现,这个指令通过从一个计算属性中接收一个“对象样式”进行的。每次计算属性所依赖的变量变化时,他自己都会重新计算一遍:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | new Vue({ el: '#app' , data: { show: false }, methods: { toggle() { this .show = ! this .show; } }, computed: { modalStyle() { return this .show ? { 'padding-left' : '0px;' , display: 'block' } : {}; } } }); |
你也可以通过使用Vue的过渡动画在模态框进入和离开DOM时渐变,来增强你的模态框。
让jQuery退休吧,考虑下在下一个Bootstrap 项目中使用Vue.js
不是说你可以在Bootstrap中用vue.js代替jquery,而是说你的确应该这么做。因为不管你是使用vue-strap或自己封装插件,你都可以感到Vue的如下诱人的优势:
与jQuery对比,vue的DOM操作系统允许较高的UI性能和响应性。
Vue是被设计用来建立小型,孤立的UI块的。所以vue编写的小部件将比jquery的更容易扩展,可维护性更好。
Bootstrap的小部件有着臭名昭著的混乱模板, 所以vue可以使用他灵活的模板选项来缓解这个问题,如jsx,单页应用组件,渲染功能,类与样式绑定,等等。
请记住,Vue不支持IE8,但是你可能会考虑在下一个bootstrap项目中使用他。
以上所述是本文的全部内容,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对脚本之家网站的支持!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
下面小编就为大家带来一篇jquery无法为动态生成的元素添加点击事件的解决方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦2016-12-12
最新评论