一、Vue.js简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue有非常强大的数据绑定功能，下面来简单介绍一个Vue的小例子，后面再菜单里也会用到。
安装Vue
直接下载并用
在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!
开发版本包含完整的警告和调试模式
生产版本删除了警告，33.30KB min+gzip
对于制作原型或学习，你可以这样使用最新版本：
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
import Vue from '/npm/vue@2.6.11/dist/vue.esm.browser.js'
Vue 也可以在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。
请确认了解不同构建版本并在你发布的站点中使用生产环境版本，把 vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。
在用 Vue 构建大型应用时推荐使用 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两部分编写如下内容：
{{ scene.name }}
第一个小例子
更有意思的是我们在控制台输入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的控件都将被控制。
样例代码:
按钮1
按钮2
这里是一段要被隐藏的话...
我被控制1我被控制2我不控制3我被控制4
折叠效果
四、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的可伸缩式菜单
直接上源码
选择场景
{{ scene.name }}
添加场景
删除场景—取消
<>
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: "摩托车"
}
]
}
})
效果
菜单效果
