一、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>

效果

菜单效果

基于Vue.js+bootstrap4的左侧可伸缩式菜单