一、Vue.js簡介

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

Vue有非常強大的數據綁定功能，下面來簡單介紹一個Vue的小例子，后面再菜單里也會用到。

安裝Vue

直接下載并用

在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告!

開發版本包含完整的警告和調試模式

生產版本刪除了警告，33.30KB min+gzip

對于制作原型或學習，你可以這樣使用最新版本：

對于生產環境，我們推薦鏈接到一個明確的版本號和構建文件，以避免新版本造成的不可預期的破壞：

如果你使用原生 ES Modules，這里也有一個兼容 ES Module 的構建文件：

import Vue from 'https://cdn.jsdelivr.net/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: "摩托車"

}

]

}

})

效果

菜單效果

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html折叠菜单列子,基于Vue.js+bootstrap4的左侧可伸缩式菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。