介绍
这篇文章主要介绍了怎么彻底移除jQuery javascript和引导的插件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
引导是网上最流行的前端开发框架。除了用它,我不知道还有其他更快的方法去构建一个响应式的网站。
但是自从我向网页添加动态功能的工具变成vue。js后。适应引导变得困难起来,因为这带来了一些技术包袱。没错。我说的就是jquery。
这并不是在抨击jquery,我只是意识到,当你已经在项目里使用一些像Vue的框架后,再引入jquery就会出现一些显著的缺点:
增加开销.jQuery将会使你的网页增加30 kb。
在使用诸如webpack一类的打包工具时,jquery也会很难与之进行配置。
当你使用Vue负责DOM操作时,你不会愿意jquery再来将DOM搞的一团糟。
<强>彻底移除jquery和javascript引导的插件
这里有一个很棒的项目vue-strap,它使用Vue。js内置的插件来替换引导中Javascript的插件。因此你可以使用你项目中原有的引导插件,比如情态动词,旋转木马,标签等等。他们都是基于Vue提供支持。
但是如果你只是用一小部分的引导插件的话,我觉得自己定制Vue.js的插件也很容易,那样的话你也不需要将整个vue-strap都引用进来(译者注:我就是只用了Vue.js和几个其他需要的plugin :)
<>强下面让我展示一下怎么使用vue,从零开始设置一些常用的引导插件
自己动手做由vue.js驱动的引导小部件
<强>选项卡
我们将从选项卡开始。每一个选项卡都附带着他的面板。选项卡的显示/隐藏是通过添加/移除选项卡与面板的类属性中的活动来实现的,而这就是Vue将要处理的工作。
& lt; div id=皌abs"比;
,& lt; ul 类=皀av nav-tabs"比;
& lt;才能li> & lt; a> Tab 1 & lt;/a> & lt;/li>
& lt;才能li> & lt; a> Tab 2 & lt;/a> & lt;/li>
,& lt;/ul>
,& lt; div 类=皌ab-content"比;
& lt;才能div 类=皌ab-pane"祝辞Pane 1 & lt;/div>
& lt;才能div 类=皌ab-pane"祝辞Pane 2 & lt;/div>
,& lt;/div>
& lt;/div> 我们用一个变量选项卡来跟踪当前被选中的选项卡,并用这个变量来添加/移除选项卡与其对应面板的类属性中的活跃:
& lt; div id=皌abs"比;
,& lt; ul 类=皀av nav-tabs"比;
& lt;才能li v-bind:类=皗,活跃:tab ===, 1}“祝辞& lt; a> tab 1 & lt;/a> & lt;/li>
& lt;才能li v-bind:类=皗,活跃:tab ===, 2}“祝辞& lt; a> tab 2 & lt;/a> & lt;/li>
,& lt;/ul>
,& lt; div 类=皌ab-content"比;
& lt;才能div 类=皌ab-pane", v-bind:类=皗,活跃:tab ===, 1}“比;
,,Pane 1 & lt;/div>
& lt;才能div 类=皌ab-pane", v-bind:类=皗,活跃:tab ===, 2}“比;
,,Pane 2 & lt;/div>
,& lt;/div>
& lt;/div> 我们还需要在所有的选项卡上监听点击事件,用来更新我们的标签变量
& lt; div id=皌abs"比;
,& lt; ul 类=皀av nav-tabs"比;
& lt;才能li v-bind:类=皗,活跃:tab ===, 1}“, v:点击=皌ab =, 1“比;
,,& lt; a> Tab 1 & lt;/a>
& lt;才能/li>
& lt;才能li v-bind:类=皗,活跃:tab ===, 2}“, v:点击=皌ab =, 2“比;
,,& lt; a> Tab 2 & lt;/a>
& lt;才能/li>
,& lt;/ul>
,& lt; div 类=皌ab-content"比;
& lt;才能div 类=皌ab-pane", v-bind:类=皗,活跃:tab ===, 1}“比;
,,Pane 1 & lt;/div>
& lt;才能div 类=皌ab-pane", v-bind:类=皗,活跃:tab ===, 2}“比;
,,Pane 2 & lt;/div>
,& lt;/div>
& lt;/div> 最后,js代码:
new Vue ({
,el: & # 39; #标签# 39;
数据:,{大敌;//才能,Tab 1, is selected by 违约
,,选项卡:1,
,}
}); 这里还有一些我们可以进行的改进与优化,但为了使本文简介的缘故就不展开了:
将JavaScript代表包装成一个Vue组件,以便我们能在整个网站重用这个选项卡代码。
作为一个真正紧凑的模板。将选项卡和对应的面板内容放入一个数组属性中,然后用v代表来打印出选项卡与面板的列表来。
<强>模态框
,模态对话框是我最喜欢的引导插件之一。与选项卡类似,我们通过添加/移除一个在的类来控制模态框的显示/隐藏。而这些通过一个打开和关闭按钮来触发,
