文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

Bootstrap是网上最流行的前端开发框架. 除了用它,我不知道还有其他更快的方法去构建一个响应式的网站。

但是自从我向网页添加动态功能的工具变成vue.js后。适应bootstrap变得困难起来。因为这带来了一些技术包袱。没错。我说的就是jquery。

这并不是在抨击jquery,我只是意识到,当你已经在项目里使用一些像Vue的框架后,再引入jQuery就会出现一些显著的缺点:

  • 增加开销。jQuery将会使你的网页增加30KB。
  • 在使用诸如webpack一类的打包工具时,jquery也会很难与之进行配置。
  • 当你使用Vue负责DOM操作时,你不会愿意Jquery再来将DOM搞的一团糟。
第 1 段(可获 1.69 积分)

如果你正在使用Vue,但是你又特别想基于Bootstrap CSS框架基础上做开发, 那么强烈建议思考一下这个问题:在Bootstrap CSS框架中使用jQuery值得吗?

不过在你做出决定之前,还有另外一个选择…

提示: 这篇文章最初发表在  Medium on 2016/11/01

彻底移除jQuery和Bootstrap的javascript插件

这里有一个很棒的项目 vue-strap ,它使用Vue.js 内置的插件来替换Bootstrap中的Javascript插件。因此你可以使用你项目中原有的Bootstrap插件,比如 modals, carousel, tabs, etc. 他们都是基于 Vue 提供支持.

但是如果你只是用一小部分的Bootstrap插件的话, 我觉得自己定制Vue.js的插件也很容易,那样的话你也不需要将整个vue-strap都引用进来(译者注:我就是只用了Vue.js和几个其他需要的plugin  :)

第 2 段(可获 1.6 积分)

下面让我展示一下怎么使用vue,从零开始设置一些常用的Bootstrap 插件

自己动手做由vue.js驱动的Bootstrap小部件 

选项卡

我们将从选项卡开始。每一个选项卡都附带着他的面板. 选项卡的显示/隐藏是通过添加/移除选项卡与面板的class属性中的active来实现的,而这就是Vue将要处理的工作。 

<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>
第 3 段(可获 0.86 积分)

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

<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变量

<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代码: 

new Vue({
 el: '#tabs',
 data: { 
   // Tab 1 is selected by default
   tab: 1 
 }
});
第 4 段(可获 0.55 积分)

这里还有一些我们可以进行的改进与优化,但为了使本文简介的缘故就不展开了:

  • 将JavaScript代表包装成一个Vue组件,以便我们能在整个网站重用这个选项卡代码。
  • 作为一个真正紧凑的模板。将选项卡和对应的面板内容放入一个数组属性中,然后用 v-for来打印出选项卡与面板的列表来。

模态框

 模态对话框是我最喜欢的Bootstrap 插件之一。与选项卡类似,我们通过添加/移除一个in的类来控制模态框的显示/隐藏。而这些通过一个打开和关闭按钮来触发,

<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>
第 5 段(可获 1.3 积分)

对于一个Bootstrap 的模态框,我们需要在对话框上有一个动态的内联样式。 我们通过 v-bind:style 指令来实现,这个指令通过从一个计算属性中接收一个“对象样式”进行的。每次计算属性所依赖的变量变化时,他自己都会重新计算一遍:

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时渐变,来增强你的模态框。

第 6 段(可获 0.8 积分)

让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项目中使用他。

获取最新vue.js的文章,教程和酷项目点击 Vue.js Developers Newsletter

第 7 段(可获 1.93 积分)

文章评论

南京访客
vue是mvvm框架,jquery是库,这两个有啥冲突的,你要是觉得用的不舒服,那是你自己的问题。
访客
哗众取宠!!!为啥要移除???
访客
脱裤子放屁
广州访客
一个命令式,一个声明式,当然有冲突了
访客
jquery太好用 跟vue不冲突
厦门访客
你为啥要用bootstrap呢 直接用iview 不就好了 省的麻烦
深圳访客
看到这样的SB文章,真忍不住上来骂一句!以为用了个vue就瞧不起jQuery了? :rage: