官术网_书友最值得收藏!

Combining Vue.js and Bootstrap

When we were talking about Vue, we devoted a big section to its components. When we talked about Bootstrap, we also talked about components. Doesn't it ring the same bell? Maybe we could create Vue components out of Bootstrap components? Maybe we can! Actually, we have already done it! Open the code of the first chapter's PleaseIntroduceYourself application. Check what we have inside the components folder. There's something that we called MessageCard.vue. Actually, this is an implemented Vue component for Card Bootstrap's component (https://v4-alpha.getbootstrap.com/components/card/)!

Open the example13-vue-bootstrap-components-started/components folder. Let's use this project as a playground to create the Vue component based on the Bootstrap alert component. Run npm install and run:

cd example13-vue-bootstrap-components-started/components
npm install
npm run dev

Let's create a Vue component called Alert. This component will contain the necessary code to simulate Bootstrap's alert component behavior.

Create a file named Alert.vue inside the components folder and add template tags. Our alert will definitely have the alert class. However, its additional class (alert-danger, alert-info, etc.) should be something configurable. Also, its title and text should be something passed by bound properties from the parent component. Thus, the template for the alert component will look like this:

//Alert.vue
<template>
  <div class="alert":class="additionalClass" role="alert">
    <strong>{{title}}</strong>{{text}}
  </div>
</template>

Let's implement the additionalClass property as a computed property that will be calculated based on the type property passed by the parent component. So, the script for the Alert component will look like this:

//Alert.vue
<script>
export default {
 props: ['type', 'title', 'text'],
  computed: {
 additionalClass () {
 if (!this.type) {
 return 'alert-success'
 }
 return 'alert-' + this.type
 }
  },
  name: 'alert'
}
</script>

Then, we can call it from our main App.vue component:

//App.vue
<template>
  <div id="app" class="container">
    <img src="./assets/logo.png">
 <alert :title="title" :text="text"></alert>
  </div>
</template>

<script>
 import Alert from './components/Alert'
  export default {
    data () {
      return {
 title: 'Vue Bootstrap Component',
 text: 'Isn\'t it easy?'
      }
    },
    name: 'app',
    components: {
 Alert
    }
  }
</script>

You will end up with a nice alert on your page:

We just created our Alert Vue Bootstrap component

Exercise

Enable a default value for the title of the alert component. So, if the title is not passed, it will say Success by default. Also, bind the type property to the component on its creation inside the App.vue parent component. Export this property as a computed property depending on some arbitrary value. For example, based on some random number, if it's divisible by 3, the type should be danger; if it's divisible by 5, the type should be info; and so on.

Check it out yourself. Go to the example13-vue-bootstrap-components/components folder and have a look, in particular, at the App.vue and components/Alert.vue components.

Combining Vue.js and Bootstrap continued

So, we know how to create Vue components based on Bootstrap components. Doesn't it feel like now it would be great to create all the Bootstrap components as Vue components and just use them in our Vue applications without having to think about Bootstrap classes whatsoever? Imagine Vue components such as <button-success></button-success> or <button :type="success"></button>. We could even create a whole library of Vue components based on Bootstrap! The question is, should we do it if it already exists? Yes, someone has already done all the work for us. These are the people who have done the work:

Core team of bootstrap-vue

These nice people have developed something called Bootstrap-Vue and that's something that does exactly what you think—it contains a full set of Bootstrap components implemented as Vue.js components. Check it out at https://bootstrap-vue.github.io/.

Let's check, for example, how the alert component is implemented at https://bootstrap-vue.github.io/docs/components/alert. It's a little bit more detailed than our alert. The data is passed within the component's tags and not as properties, like in our case, which also makes it more flexible. We will use it a lot while developing our application throughout the book.

主站蜘蛛池模板: 南部县| 兴隆县| 江永县| 苏州市| 历史| 台南市| 丰原市| 库尔勒市| 米泉市| 海安县| 拜城县| 新丰县| 黄浦区| 玉林市| 涞水县| 玉树县| 京山县| 台湾省| 郧西县| 云阳县| 新绛县| 陆丰市| 赞皇县| 武宁县| 五莲县| 东莞市| 突泉县| 金溪县| 什邡市| 马山县| 弥勒县| 沁源县| 尚义县| 锡林浩特市| 建昌县| 荥阳市| 新邵县| 瓮安县| 秦皇岛市| 武宣县| 延寿县|