Replace jQuery and build bootstrap 4 application with Vue
Heimin 2020-11-25 05:06:52

 replace Jquery, use Vue structure Bootstrap 4 application


Although front end programs are developing rapidly now , Various frameworks emerge in endlessly , But for the majority of non front end coders, building Web The best interface is still Bootstrap 4. however Bootstrap Dependency has become seriously outdated , abandoned jQuery Components , So how to solve this problem is imminent .

Vue The project is light 、 High performance , Easy to use , Two way data binding , The characteristics of componentization , Quickly popular and widely used , So is it possible to Bootstrap The dependence on is changed to Vue Well ? The answer is yes .

In this article, we will introduce such a solution ,Bootstrap-Vue project .

Installation and setup


Bootstrap-Vue The project provides Bootstrap In the project jQuery Components depend on Vue Alternative , It can replace most cases and components . We suggest that Vue Cli Plug in mode , In this way, the project can be created and configured automatically , Dependency addition . First we install Vue Cli

install Vue Cli


because npm Slow installation , Even fail , need , First install the domestic image , have access to cnpm perhaps npm Nickname :

 replace Jquery, use Vue structure Bootstrap 4 application


And then use cnpm install vue.js
cnpm install -g @vue.js


Create project

vue create hello-chongchong



 replace Jquery, use Vue structure Bootstrap 4 application


such Vue CLI It will automatically create one Vue project , Prompt selection , choice "default" that will do .

 replace Jquery, use Vue structure Bootstrap 4 application


Enter the project directory :
cd hello-chongchong

Use the following command to Bootstrap-Vue Add plug-ins to the project . When the options prompt , choice "Y".
vue add bootstrap-vue

 replace Jquery, use Vue structure Bootstrap 4 application


In this way, you can set up one to vue Starting up Bootstrap project .

Clear example


By default ,Vue CLI An example is provided for HelloWorld Applications . It's no use , We're going to get rid of , Include App.vue And parts catalog HelloWorld.vue:
>src/components/App.vuerm src/components/HelloWorld.vue

Example use

Create template


Bootstrap All functions are basically available in bootstrap-vue To use the components registered globally in . These components are usually associated with Bootstrap The same name , To make a difference , They all start with b-xxxx.

Here we create a new App.vue Template and add a Bootstrap Containers :
<template><b-container><p>Hello, Chongchong!</p></b-container></template>


Then enable the service
npm run serve

 replace Jquery, use Vue structure Bootstrap 4 application


then , Browser access , You should see the following :

 replace Jquery, use Vue structure Bootstrap 4 application


in addition , If you look at the page source code , You can see that b-container General components used Bootstrap Elements and classes to render :
<div class="container"><p>Hello, Chongchong!</p></div>

Component configuration


Many components can be used Vue Props are configured . for example , b-btn Components , You can add a will button to the page .b-btn There is one variant Control button theme , This is set to primary.
<template><b-container><p>Hello, Chongchong!</p><b-btn variant="primary">Click</b-btn></b-container></templat>

 replace Jquery, use Vue structure Bootstrap 4 application


Vue Supports binding dynamic values to Bootstrap Components . for example , Yes b-alert Add a alert Prompt information . We set it up as success And provide some tips .
<template><b-container><p>Hello, Chongchong!</p><b-btn variant="primary">Click</b-btn><b-alert variant="success">You clicked the button!</b-alert></b-container></template>


Can be showprop Bind to local data Property to conditionally display information showAlert. And then showAlert Response components click Event to switch the value of b-btn.
<template><b-container><p> Hello, Chongchong!</p><b-btnvariant="primary"@click="showAlert = true">Click</b-btn><b-alertv-bind:show="showAlert"variant="success">You clicked the button!</b-alert></b-container></template><script>export default {data: () => ({showAlert: false})};</script>

 replace Jquery, use Vue structure Bootstrap 4 application


Than jQuery Logic is much easier to write .

Bootstrap-Vue Instructions


some Bootstrap Functions are provided as instructions, not as components , So you can easily add it to an existing element .

for example , To add a tool tip feature , have access to v-b-tooltip Instructions . Let's use the command parameters hover Add a... To the button , Trigger when the button hovers .
<b-btn variant="primary" @click="showAlert = true" v-b-tooltip.hover title="This button triggers the alert"> Click </b-btn>

notes :tooltip Plugins need popper.js The dependencies of , But use Vue CLI install Bootstrap-Vue, automatically include.

 replace Jquery, use Vue structure Bootstrap 4 application

summary :


utilize Bootstrap-Vue To replace Bootstrap 4 Medium jQuery Very easy to , And it can bring vue cli The huge functional advantage of , You can try to replace all the projects you have in hand .
版权声明
本文为[Heimin]所创,转载请带上原文链接,感谢
https://fheadline.com/2020/11/20201125050639058s.html
相似文章

2021-08-09