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

 
  
Tab 1
  
Tab 2
 
 
  Pane 1

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

 
  Tab 1
  Tab 2
 
 
  
   Pane 1
  
   Pane 2
 

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

 
  
   Tab 1
  
  
   Tab 2
  
 
 
  
   Pane 1
  
   Pane 2
 

最后，js代码:

new Vue({
 el: '#tabs',
 data: { 
  // Tab 1 is selected by default
  tab: 1 
 }
});

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

将JavaScript代表包装成一个Vue组件，以便我们能在整个网站重用这个选项卡代码。

作为一个真正紧凑的模板。将选项卡和对应的面板内容放入一个数组属性中，然后用 v-for来打印出选项卡与面板的列表来。

模态框

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

 
  Open
 
 
  
   
    
     
Vue-powered modal!
    
   
    Close
   
  
 
 

对于一个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时渐变，来增强你的模态框。

让jQuery退休吧，考虑下在下一个Bootstrap 项目中使用Vue.js

不是说你可以在Bootstrap中用vue.js代替jquery，而是说你的确应该这么做。因为不管你是使用vue-strap或自己封装插件，你都可以感到Vue的如下诱人的优势：

与jQuery对比，vue的DOM操作系统允许较高的UI性能和响应性。

Vue是被设计用来建立小型，孤立的UI块的。所以vue编写的小部件将比jquery的更容易扩展，可维护性更好。

Bootstrap的小部件有着臭名昭著的混乱模板, 所以vue可以使用他灵活的模板选项来缓解这个问题，如jsx，单页应用组件，渲染功能，类与样式绑定，等等。

感谢你能够认真阅读完这篇文章，希望小编分享的“怎么彻底移除jQuery和Bootstrap的javascript插件”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!