怎么彻底移除jQuery和Bootstrap的javascript插件-重庆大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

怎么彻底移除jQuery和Bootstrap的javascript插件

这篇文章主要介绍了怎么彻底移除jQuery和Bootstrap的javascript插件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

站在用户的角度思考问题，与客户深入沟通，找到天坛街道网站设计与天坛街道网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、主机域名、雅安服务器托管、企业邮箱。业务覆盖天坛街道地区。

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将要处理的工作。


 
  Tab 1
  Tab 2
 
 
  Pane 1

Pane 2

我们用一个变量tab来跟踪当前被选中的选项卡，并用这个变量来添加/移除选项卡与其对应面板的Class属性中的active：


 
  Tab 1
  Tab 2
 
 
  
   Pane 1

Pane 2

我们还需要在所有的选项卡上监听点击事件，用来更新我们的tab变量


 
  
   Tab 1
  
  
   Tab 2
  
 
 
  
   Pane 1

new Vue({ el: '#app', data: { show: false }, methods: { toggle() { this.show = !this.show; } }, computed: { modalStyle() { return this.show ? { 'padding-left': '0px;', display: 'block' } : {}; } } });

新闻中心

其他资讯