一、Vue.js簡(jiǎn)介

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

Vue有非常強(qiáng)大的數(shù)據(jù)綁定功能，下面來簡(jiǎn)單介紹一個(gè)Vue的小例子，后面再菜單里也會(huì)用到。

安裝Vue

直接下載并用

在開發(fā)環(huán)境下不要使用壓縮版本，不然你就失去了所有常見錯(cuò)誤相關(guān)的警告!

開發(fā)版本包含完整的警告和調(diào)試模式

生產(chǎn)版本刪除了警告，33.30KB min+gzip

對(duì)于制作原型或?qū)W習(xí)，你可以這樣使用最新版本：

對(duì)于生產(chǎn)環(huán)境，我們推薦鏈接到一個(gè)明確的版本號(hào)和構(gòu)建文件，以避免新版本造成的不可預(yù)期的破壞：

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

import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'

Vue 也可以在 unpkg 和 cdnjs 上獲取 (cdnjs 的版本更新可能略滯后)。

請(qǐng)確認(rèn)了解不同構(gòu)建版本并在你發(fā)布的站點(diǎn)中使用生產(chǎn)環(huán)境版本，把 vue.js 換成 vue.min.js。這是一個(gè)更小的構(gòu)建，可以帶來比開發(fā)環(huán)境下更快的速度體驗(yàn)。

在用 Vue 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝webpack 或 Browserify 模塊打包器配合使用。同時(shí) Vue 也提供配套工具來開發(fā)單文件組件。

# 最新穩(wěn)定版

$ npm install vue

二、一個(gè)Vue.js的小例子

每個(gè) Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例開始的：

var vm = new Vue({

// 選項(xiàng)

})

當(dāng)一個(gè) Vue 實(shí)例被創(chuàng)建時(shí)，它將 data 對(duì)象中的所有的屬性加入到 Vue 的響應(yīng)式系統(tǒng)中。當(dāng)這些屬性的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”，即匹配更新為新的值。

// 我們的數(shù)據(jù)對(duì)象

var data = { a: 1 }

// 該對(duì)象被加入到一個(gè) Vue 實(shí)例中

var vm = new Vue({

data: data

})

當(dāng)這些數(shù)據(jù)改變時(shí)，視圖會(huì)進(jìn)行重渲染。值得注意的是只有當(dāng)實(shí)例被創(chuàng)建時(shí)就已經(jīng)存在于 data 中的屬性才是響應(yīng)式的。也就是說如果你添加一個(gè)新的屬性。

Vue的el屬性，就是element的id，例如下面的vue對(duì)象就是針對(duì)id為example的element對(duì)象的數(shù)據(jù)綁定。

var data = { a: 1 }

var vm = new Vue({

el: '#example',

data: data

})

下面開始正式做一個(gè)小例子，在script中編寫如下內(nèi)容：

var scenes_app = new Vue({

el: '#example',

data: {

message: 'Hello Vue!',

names: [

{name: "糖葫蘆"},

{name: "摩托車"}

]

}

})

在HTML兩部分編寫如下內(nèi)容：

• {{ scene.name }}

第一個(gè)小例子

更有意思的是我們?cè)诳刂婆_(tái)輸入push一個(gè)新數(shù)據(jù)之后，頁(yè)面也自動(dòng)更新了：

push新數(shù)據(jù)

Vue的所有數(shù)據(jù)綁定的組件，在數(shù)據(jù)變更后，都會(huì)自動(dòng)更新，這一點(diǎn)真是非常的強(qiáng)大。大大減少了開發(fā)人員的精力。

三、bootstrap4中的折疊

bootstrap4的使用依然非常清涼，下載框架后，直接script包括在網(wǎng)站中即可。

bootstrap4的折疊功能非常簡(jiǎn)單。

我們只需要把要隱藏的對(duì)象class中添加collapse即可，如果需要默認(rèn)顯示，那么就再添加個(gè)show。

我們可以寫任意一個(gè)鏈接或者Button，為其設(shè)置屬性data-toggle="collapse"這樣該控件，就相當(dāng)于一個(gè)開關(guān)，可以切換其他控件的collapse狀態(tài)，你想綁定哪個(gè)控件，就在data-target屬性中賦值被控對(duì)象的ID或者class即可。

例如：

1)如果被控控件的id="menu-text" 那么data-target="#menu-text"

2)如果被控幾個(gè)對(duì)象的class都有menu-text，那么data-target=".menu-text"所有class中包含menu-text的控件都將被控制。

樣例代碼:

按鈕1

按鈕2

這里是一段要被隱藏的話...

• 我被控制1
• 我被控制2
• 我不控制3
• 我被控制4

折疊效果

四、bootstrap4的圖標(biāo)問題

在bootstrap4中已經(jīng)不再提供圖標(biāo)了，我們可以把bootstrap3中的copy過來

1)首先把fonts目錄下的所以文件，靠背到bootstrap4目錄下，新建fonts目錄。

fonts

2)在bootstrap.js文件中，找到對(duì)fonts的描述，復(fù)制出來，新建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";

}

這里只列出了一部分，所有長(zhǎng)這樣的全部考出來。

3)在html中script引用fonts.js即可。

五、基于Vue.js+bootstrap4的可伸縮式菜單

直接上源碼

選擇場(chǎng)景

• {{ scene.name }}

• 添加場(chǎng)景

• 刪除場(chǎng)景—取消

<>

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: "摩托車"

}

]

}

})

效果

菜單效果

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。