基于Vue.js+bootstrap4的左侧可伸缩式菜单
一、Vue.js简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue有非常强大的数据绑定功能，下面来简单介绍一个Vue的小例子，后面再菜单里也会用到。
安装Vue
直接用 <script> 引入
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。这也是我最喜欢的一个方式，所使用的版本固定，由不依赖网络，不会因为网络状况不佳导致网站载入慢，也不会因为版本更新的不兼容而导致网站无法正常运行。
在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!
开发版本包含完整的警告和调试模式
生产版本删除了警告，33.30KB min+gzip
CDN
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>
你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。
Vue 也可以在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。
请确认了解不同构建版本并在你发布的站点中使用生产环境版本，把 vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。
NPM
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
二、一个Vue.js的小例子
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({
// 选项
})
当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性。
Vue的el属性，就是element的id，例如下面的vue对象就是针对id为example的element对象的数据绑定。
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
下面开始正式做一个小例子，在script中编写如下内容：
var scenes_app = new Vue({
el: '#example',
data: {
message: 'Hello Vue!',
names: [
{name: "糖葫芦"},
{name: "摩托车"}
]
}
})
在HTML两部分编写如下内容：
<ul class="list-group list-group-flush">
<li class="list-group-item" v-for="scene in scenes">
{{ scene.name }}
</li>
</ul>
第一个小例子
更有意思的是我们在控制台输入push一个新数据之后，页面也自动更新了：
push新数据
Vue的所有数据绑定的组件，在数据变更后，都会自动更新，这一点真是非常的强大。大大减少了开发人员的精力。
三、bootstrap4中的折叠
bootstrap4的使用依然非常清凉，下载框架后，直接script包括在网站中即可。
bootstrap4的折叠功能非常简单。
我们只需要把要隐藏的对象class中添加collapse即可，如果需要默认显示，那么就再添加个show。
我们可以写任意一个链接或者Button，为其设置属性data-toggle="collapse"这样该控件，就相当于一个开关，可以切换其他控件的collapse状态，你想绑定哪个控件，就在data-target属性中赋值被控对象的ID或者class即可。
例如：
1）如果被控控件的id="menu-text" 那么data-target="#menu-text"
2）如果被控几个对象的class都有menu-text，那么data-target=".menu-text"所有class中包含menu-text的控件都将被控制。
样例代码:
<script src="./js/jquery.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./bootstrap4.4.1/js/bootstrap.min.js"></script>
<Button data-toggle="collapse" data-target="#menu_text">按钮1</Button>
<Button data-toggle="collapse" data-target=".menu_text2">按钮2</Button>
<div id="menu_text" class="collapse show">
这里是一段要被隐藏的话...
</div>
<ul>
<li class="collapse show menu_text2">我被控制1</li>
<li class="collapse show menu_text2">我被控制2</li>
<li>我不控制3</li>
<li class="collapse show menu_text2">我被控制4</li>
</ul>
折叠效果
四、bootstrap4的图标问题
在bootstrap4中已经不再提供图标了，我们可以把bootstrap3中的copy过来
1）首先把fonts目录下的所以文件，靠背到bootstrap4目录下，新建fonts目录。
fonts
2）在bootstrap.js文件中，找到对fonts的描述，复制出来，新建fonts.js。
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\002a";
}
.glyphicon-plus:before {
content: "\002b";
}
.glyphicon-euro:before,
.glyphicon-eur:before {
content: "\20ac";
}
这里只列出了一部分，所有长这样的全部考出来。
3）在html中script引用fonts.js即可。
五、基于Vue.js+bootstrap4的可伸缩式菜单
直接上源码
<div class="list-group-item list-group-item-primary">
<span class="glyphicon glyphicon-home" aria-hidden="true">
<a type="button" class="collapse show menu-text" data-toggle="collapse" data-target="#scenes">
选择场景
</a>
</span>
</div>
<div id="scenes" class="collapse sub-menu">
<ul class="list-group list-group-flush">
<li class="list-group-item" v-for="scene in scenes">
<span style="width:30px"></span> {{ scene.name }}
<a type="button" class="collapse deleteButton" @click="scenes.splice(scenes.indexOf(scene),1);">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</a>
</li>
<li class="list-group-item list-group-item-success">
<span style="width:10px"></span>
<a class="collapse show deleteButton" type="button" @click="scenes.push({name:'模拟添加场景'})">
<span class="glyphicon glyphicon-plus" aria-hidden="true"> 添加场景</span>
</a>
</li>
<li class="list-group-item list-group-item-danger">
<span style="width:10px"></span>
<a type="button" data-toggle="collapse" data-target=".deleteButton">
<span class="glyphicon glyphicon-minus" aria-hidden="true">
删除场景<span class="collapse hide deleteButton">—取消</span>
</span>
</a>
</li>
</ul>
</div>
<a type="button" onclick="close_menu()" class="list-group-item list-group-item-primary">
<>
</a>
<script type="text/javascript">
function close_menu() {
//console.log("abc");
//data-toggle="collapse" data-target="#menu-text"
$('.menu-text').collapse('toggle');
$('.sub-menu').collapse('hide');
}
var scenes_app = new Vue({
el: '#scenes',
data: {
message: 'Hello Vue!',
scenes: [{
name: "糖葫芦"
},
{
name: "摩托车"
}
]
}
})
</script>
效果
菜单效果
