bootstrap项目更改为vue_取代Jquery，用Vue 构建Bootstrap 4 应用
盡管前端程序現(xiàn)在發(fā)展迅速，各種框架層出不窮，但是對(duì)廣大非前端碼農(nóng)來(lái)說(shuō)構(gòu)建Web界面的最好的選擇仍然還是Bootstrap 4。但是Bootstrap依賴于已經(jīng)嚴(yán)重過(guò)時(shí)，被拋棄的jQuery組件，那么如何解決這個(gè)問(wèn)題就迫在眉睫了。
Vue項(xiàng)目以其輕巧、高性能，易上手，雙向數(shù)據(jù)綁定，組件化的特點(diǎn)，快速流行并廣為使用，那么有沒(méi)有可能將Bootstrap的依賴改為Vue呢？答案是肯定的。
本文我們就介紹這樣一個(gè)解決方案，Bootstrap-Vue項(xiàng)目。
安裝和設(shè)置
Bootstrap-Vue項(xiàng)目提供了Bootstrap項(xiàng)目中jQuery組件依賴了Vue替換方案，可以實(shí)現(xiàn)絕大多數(shù)案例和組件的替代。我們建議以Vue Cli插件方式使用，這樣可以實(shí)現(xiàn)項(xiàng)目自動(dòng)創(chuàng)建和配置，依賴項(xiàng)添加。首先我們安裝Vue Cli
安裝Vue Cli
由于npm安裝較慢，甚至?xí)?#xff0c;需要，先安裝國(guó)內(nèi)鏡像，可以使用cnpm或者npm別稱：
然后用cnpm安裝vue.js
cnpm install -g @vue.js創(chuàng)建項(xiàng)目
vue create hello-chongchong這樣Vue CLI會(huì)自動(dòng)創(chuàng)建一個(gè)Vue項(xiàng)目，提示選擇項(xiàng)，選擇"default"即可。
進(jìn)入該項(xiàng)目目錄：
cd hello-chongchong使用下面的命令將Bootstrap-Vue插件添加到項(xiàng)目中。選項(xiàng)提示時(shí)，選擇 "Y"。
vue add bootstrap-vue這樣無(wú)需任何復(fù)雜設(shè)置就可以設(shè)置好一個(gè)以vue啟動(dòng)的Bootstrap項(xiàng)目。
清除示例
默認(rèn)情況下，Vue CLI為提供了一個(gè)示例HelloWorld應(yīng)用程序。這都沒(méi)啥用的，我們直接清除，包括App.vue和部件目錄下的 HelloWorld.vue：
>src/components/App.vuerm src/components/HelloWorld.vue示例使用
創(chuàng)建模版
Bootstrap所有功能基本都可以在bootstrap-vue中以全局注冊(cè)的組件來(lái)使用。這些組件通常和Bootstrap同名，為了以示區(qū)別，他們都以開(kāi)頭b-xxxx。
在此我們創(chuàng)建一個(gè)新的App.vue模板并添加一個(gè)Bootstrap容器：
Hello, Chongchong!
然后啟用該服務(wù)
npm run serve然后，瀏覽器訪問(wèn)，應(yīng)該看到以下內(nèi)容：
另外，如果查看頁(yè)面源碼，可以看到該b-container組件已使用常規(guī)的Bootstrap元素和類進(jìn)行渲染：
Hello, Chongchong!
組件配置
許多組件都可以使用Vue道具進(jìn)行配置。例如， b-btn組件，可以在頁(yè)面中添加一個(gè)將按鈕。b-btn有一個(gè)variant控制按鈕主題，此處設(shè)置為primary。
Hello, Chongchong!
ClickVue支持將動(dòng)態(tài)值綁定到Bootstrap組件。例如，對(duì)b-alert組件添加一個(gè)alert提示信息。我們將其設(shè)success并提供一些提示信息。
Hello, Chongchong!
ClickYou clicked the button!可以將showprop綁定到本地data屬性來(lái)有條件地顯示信息showAlert。然后將showAlert響應(yīng)組件click事件來(lái)切換的值b-btn。
Hello, Chongchong!
ClickYou clicked the button!比jQuery邏輯寫起來(lái)簡(jiǎn)單多了。
Bootstrap-Vue指令
一些Bootstrap功能是作為指令而非組件提供的，因此可以輕松地將其添加到給已有元素。
例如，要添加工具提示功能，可以使用v-b-tooltip指令。下面我們使用指令參數(shù)hover向按鈕添加一個(gè)，在按鈕懸停時(shí)觸發(fā)。
Click注：tooltip插件需要popper.js的依賴項(xiàng)，但是使用Vue CLI安裝Bootstrap-Vue，會(huì)自動(dòng)include。
總結(jié)：
利用Bootstrap-Vue 來(lái)替換Bootstrap 4中的jQuery非常容易，而且可以帶來(lái)vue cli的巨大的功能優(yōu)勢(shì)，大家可以嘗試將手頭的項(xiàng)目都替換一下。
總結(jié)
以上是生活随笔為你收集整理的bootstrap项目更改为vue_取代Jquery，用Vue 构建Bootstrap 4 应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： mysql解决丢失更新_mysql 数据
- 下一篇： idea 提示vue插件_Vue + S