BootstrapVue 簡介

1 參考網站
2 執行環境
3 BootstrapVue 套件安裝
4 圖標(Icon) 與按鈕 (Button)
5 卡片(Card)
6 清單
7 表格
8 工具列 (Navbar)
9 對話框
10 多媒體
11 表單 (Form)
- 11.1 選項
- 11.2 下拉式選單 (DropDown)
12 VUE 專案
- 12.1 專案檔案分割前
- 12.2 檔案分割後

BootstrapVue 簡介¶

BootstrapVue以全球最流行的Bootstrap V4框架，構建移動優先的響應式應用程式

參考網站¶

執行環境¶

開發工具請參閲 HTML 網頁程式課程中的網頁開發工具。

BootstrapVue 套件安裝¶

Vue 可透過 CDN 方式安裝

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>BootstrapVue app</title>

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
  </div>

  <script>
      new Vue({
        el: '#app',
        data: {
        },
        computed: {
        }
      })
  </script>
</body>
</html>

圖標(Icon) 與按鈕 (Button)¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <b-button variant="outline-primary" v-for="item in items">
      <b-icon :icon="item.icon"></b-icon>
      {{item.text}}
    </b-button>
    <hr>

    <!-- button-group -->
    <b-button-group>
      <b-button variant="outline-primary" v-for="item in items">
        <b-icon :icon="item.icon"></b-icon>
        {{item.text}}
      </b-button>
    </b-button-group>
    <hr>

    <!-- button-toolbar -->
    <b-button-toolbar>
      <b-button-group class="mx-1">
        <b-button variant="outline-primary" v-for="item in items">
          <b-icon :icon="item.icon"></b-icon>
          {{item.text}}
        </b-button>
      </b-button-group>

      <b-button-group>
        <b-button variant="outline-primary" v-for="item in items">
          <b-icon :icon="item.icon"></b-icon>
          {{item.text}}
        </b-button>
      </b-button-group>
    </b-button-toolbar>
  </div>

  <script>
      window.app = new Vue({
        el: '#app',
        data: {
          items: [
            { icon: 'house', text: 'item1' },
            { icon: 'heart', text: 'item2' },
            { icon: 'gear', text: 'item3' },
          ]
        },
        computed: {
        }
      })
  </script>
</body>
</html>

卡片(Card)¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <b-card-group columns>
      <b-card v-for="i in 9" :key="i"
              title="Card Title"
              img-src="https://picsum.photos/600/300/?image=25"
              img-top>
        <b-card-text>
          Some quick example text to build on the card title and make up the bulk of the card's content.
        </b-card-text>
      </b-card>
    </b-card-group >
</div>


  <script>
      window.app = new Vue({
        el: '#app',
        data: {
        },
        computed: {
        }
      })
  </script>
</body>
</html>

清單¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <b-list-group>
      <b-list-group-item v-for="item in items" class="d-flex justify-content-between">
        <b-icon :icon="item.icon"></b-icon>
        {{item.text}}
        <b-badge variant="primary" pill>{{item.icon}}</b-badge>
      </b-list-group-item>
    </b-list-group>
  </div>


  <script>
      window.app = new Vue({
        el: '#app',
        data: {
          items: [
            { icon: 'house', text: 'item1' },
            { icon: 'heart', text: 'item2' },
            { icon: 'gear', text: 'item3' },
          ]
        },
        methods: {
          itemClick(item) {
            alert(item);
          }
        }
      })
  </script>
</body>
</html>

UBik 範例¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

  <!-- axios 套件-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <!-- 行政區篩選 -->
    <b-form-select :options="sareas" v-model="area">
    </b-form-select>

    <b-list-group>
      <b-list-group-item v-for="item in items" v-if="item.sarea==area">
        <!--站名-->
        <h5>{{item.sna}}</h5>

        <!--地址-->
        {{item.ar}}
      </b-list-group-item>
    </b-list-group>
  </div>

  <script>
      window.app = new Vue({
        el: '#app',
        data: {
          url: "http://ewin.tw/myApp/sample/UBike/",
          items: {},
          area: '八里區',
          sareas: []
        },
        mounted() {
          //透過 axios 讀取網路上的json資料
          axios.get(this.url)
            .then(response => {
              this.items = response.data.result.records;

              // 篩選出新北市的區名
              this.sareas = this.items.map(function (item) {
                return item.sarea;
              });

              // 去除重複
              this.sareas = [...new Set(vm.sareas)];
              // this.sareas = Array.from(new Set(this.sareas))
            })
            .catch(function (error) {
              console.log(error);
            })
        }
      })
  </script>
</body>
</html>

折叠清單(Collapse)¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <!-- Using modifiers -->
    <b-button v-b-toggle.collapse-2 class="m-1">切換</b-button>

    <!-- Using value -->
    <b-button v-b-toggle="'collapse-2'" class="m-1">切換</b-button>

    <!-- Element to collapse -->
    <b-collapse id="collapse-2">
      <b-card>可折疊的内容</b-card>
    </b-collapse>
  </div>


  <script>
      window.app = new Vue({
        el: '#app',
      })
  </script>
</body>
</html>

<div id="app">
<div class="accordion" role="tablist">
  <b-card no-body class="mb-1" v-for="(item, i) in 3" :key="i">
    <!-- 標題 -->
    <b-card-header header-tag="header" class="p-1" role="tab">
      <!-- 需採用 v-b-toggle="" 方式切換 -->
      <b-button block v-b-toggle="'acc'+i" variant="info">標題 {{i}}</b-button>
    </b-card-header>

    <!-- 展開的内容 -->
    <b-collapse :id="'acc'+i" visible accordion="my-accordion" role="tabpanel">
      内容 {{i}}
    </b-collapse>
  </b-card>
</div>
</div>

<div id="app">
<!-- 行政區篩選 -->
<b-form-select :options="sareas" v-model="area">
</b-form-select>

<div class="accordion" role="tablist">
  <b-card no-body class="p-0" v-for="(item, i) in items" v-if="item.sarea==area" :key="i">
    <!-- 標題 -->
    <b-card-header header-tag="header" class="p-0" role="tab">
      <!-- 需採用 v-b-toggle="" 方式切換 -->
      <b-button block v-b-toggle="'acc'+i" variant="info">
        {{item.sarea+'-'+item.sna}}
      </b-button>
    </b-card-header>

    <!-- 展開的内容 -->
    <b-collapse :id="'acc'+i" visible accordion="my-accordion" role="tabpanel">
      站點代號: <span v-text="item.sno"></span><br>
      場站總停車格: <span v-text="item.tot"></span><br>
      可借車位數: <span v-text="item.sbi"></span><br>
      可還空位數: <span v-text="item.bemp"></span><br>
      中文地址: <span v-text="item.ar"></span><br>
      經緯度:
      <a :href="'https://www.google.com/search?q='+item.lat+'%2C'+item.lng+'&oq='+item.lat+'%2C'+item.lng"
         target="_blank" style="text-decoration:none">
        {{item.lat+','+item.lng}}
      </a>
    </b-collapse>
  </b-card>
</div>
</div>

<script>
  window.app = new Vue({
    el: '#app',
    data: {
      url: "http://ewin.tw/myApp/sample/UBike/",
      items: {},
      area: '八里區',
      sareas: []
    },
    mounted() {
      //透過 axios 讀取網路上的json資料
      axios.get(this.url)
        .then(response => {
          this.items = response.data.result.records;

          // 篩選出新北市的區名
          this.sareas = this.items.map(function (item) {
            return item.sarea;
          });

          // 去除重複
          this.sareas = [...new Set(vm.sareas)];
        })
        .catch(function (error) {
          console.log(error);
        })
    }
  })
</script>

可拖曳清單（Draggable）¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- CSS -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

  <!-- Sortable -->
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
</head>
<body>
  <div id="app">
    <!--整列拖曳-->
    <b-list-group>
      <draggable v-model="items" @start="drag=true" @end="drag=false;">
        <b-list-group-item>

        </b-list-group-item>
      </draggable>
    </b-list-group>
  </div>

  <script>
      new Vue({
        el: '#app',
        data: {
          drag: false,
          items: [
            { icon: 'house', text: 'item1' },
            { icon: 'heart', text: 'item2' },
            { icon: 'gear', text: 'item3' },
            { icon: 'house', text: 'item4' },
            { icon: 'heart', text: 'item5' },
          ]
        },
      })
  </script>
</body>
</html>

加上編輯功能

<div id="app">
    <!--整列拖曳-->
    <b-list-group>
      <draggable v-model="items" @start="drag=true" @end="drag=false; index=-1;">
        <b-list-group-item v-for="(item,i) in items" :key="i" :active="index==i" @mousedown="index=i;">
          <div v-if="index==i">
            <input v-model="item.text" />
          </div>

          <div v-else>
            <b-icon :icon="item.icon"></b-icon>
            {{item.text}}
          </div>
        </b-list-group-item>
      </draggable>
    </b-list-group>
  </div>

  <script>
      new Vue({
        el: '#app',
        data: {
          drag: false,
          index:-1,
          items: [
            { icon: 'house', text: 'item1' },
            { icon: 'heart', text: 'item2' },
            { icon: 'gear', text: 'item3' },
            { icon: 'house', text: 'item4' },
            { icon: 'heart', text: 'item5' },
          ]
        },
      })
  </script>

加上拖曳塊

<div id="app">
    <!--整列拖曳-->
    <b-list-group>
      <draggable v-model="items" @start="drag=true" @end="drag=false; index=-1;" handle=".handle">
        <b-list-group-item v-for="(item,i) in items" :key="i" :active="index==i" @mousedown="index=i;"
                           class="d-flex justify-content-between">

          <div v-if="index==i && drag==false">
            <input v-model="item.text" load="console.log('test')" />
          </div>

          <div v-else>
            <b-icon :icon="item.icon"></b-icon>
            {{item.text}}
          </div>

          <!--拖曳塊-->
          <b-icon icon="grip-vertical" class="handle px-4" @mousedown.stop="drag=true; index=i;"></b-icon>
        </b-list-group-item>
      </draggable>
    </b-list-group>
</div>

可拖曳卡片（Draggable）¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

  <!-- Sortable -->
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
</head>
<body>
<div id="app">
  <b-card-group>
    <draggable v-model="items" @start="drag=true" @end="drag=false; save();" class="w-100">
      <div v-for="(item, i) in items" :key="i" class="p-1 float-left w-25">
        <b-card :title="item.text" :img-src="'https://picsum.photos/600/300/?image='+item.img" img-top>
        </b-card>
      </div>
    </draggable>
  </b-card-group>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      drag: false,
      items: [
        { text: 'img1', img: 11 },
        { text: 'img2', img: 12 },
        { text: 'img3', img: 13 },
        { text: 'img4', img: 14 },
        { text: 'img5', img: 15 },
        { text: 'img6', img: 16 },
        { text: 'img7', img: 17 },
        { text: 'img8', img: 18 },
      ]
    },
    beforeMount() {
    },
    methods: {
    }
  })
</script>
</body>
</html>

加上編輯功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

  <!-- Sortable -->
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
</head>
<body>
<div id="app">
  <b-card-group>
    <draggable v-model="items" @start="drag=true" @end="drag=false;" class="w-100">
      <div v-for="(item, i) in items" :key="i" class="p-1 float-left w-25">
        <b-card :img-src="'https://picsum.photos/600/300/?image='+item.img" img-top v-b-modal="'list-'+i">

          <!-- 新增 -->
          <b-icon icon="plus" style="background-color: aliceblue; position: absolute; top:0; right: 30px;" font-scale=1.5
            @click.stop="items.splice(i, 0, item)"></b-icon>

          <!-- 刪除 -->
          <b-icon icon="x" style="background-color: aliceblue; position: absolute; top:0; right: 0;" font-scale=1.5
            @click.stop="items.splice(i, 1)"></b-icon>

          <!-- 編輯文字 -->
          <h5 v-b-modal="'edit-'+i" @click.stop="">{{item.text}}</h5>
          <b-modal :id="'edit-'+i" title="BootstrapVue">
            <p class="my-4"><input v-model="item.text" /></p>
            <template #modal-footer="{ok}">
              <b-button variant="success" @click="ok();">
                確定
              </b-button>
            </template>            
          </b-modal>            

          <!-- 編輯图片 -->
          <b-modal :id="'list-'+i" title="BootstrapVue" hide-footer>
            <template #default="{ok}">
              <b-img v-for="i in 40" :src="'https://picsum.photos/600/300/?image='+i" style="width: 200px; margin: 5px;"
              @click="item.img=i; ok();"></b-img>
            </template>            
          </b-modal>            

        </b-card>
      </div>
    </draggable>
  </b-card-group>

</div>

<script>
  new Vue({
    el: '#app',
    data: {
      drag: false,
      items: [
        { text: 'img1', img: 11, edit: false },
        { text: 'img2', img: 12, edit: false },
        { text: 'img3', img: 13, edit: false },
        { text: 'img4', img: 14, edit: false },
        { text: 'img5', img: 15, edit: false },
        { text: 'img6', img: 16, edit: false },
        { text: 'img7', img: 17, edit: false },
        { text: 'img8', img: 18, edit: false },
      ]
    },
    beforeMount() {
    },
    methods: {
    }
  })
</script>
</body>
</html>

<div id="app">
  <b-card-group>
    <draggable v-model="items" @start="drag=true" @end="drag=false; save();" class="w-100">
      <div v-for="(item, i) in items" :key="i" class="p-1 float-left w-25" v-b-modal="'modal-'+i">
        <b-card :title="item.text" :img-src="'https://picsum.photos/600/300/?image='+item.img" img-top>

          <!-- 新增 -->
          <b-icon icon="plus" style="background-color:white; position:absolute; top:0; right:30px;"
                  font-scale="1.5" @click.stop="items.splice(i, 0, Object.assign({}, item)); save();"></b-icon>

          <!-- 刪除 -->
          <b-icon icon="x" style="background-color:white; position:absolute; top:0; right:0px;"
                  font-scale="1.5" @click.stop="items.splice(i, 1); save()"></b-icon>

          <!-- 編輯 -->
          <b-modal :id="'modal-'+i" title="編輯資料">
            <p>標題：<input v-model="item.text" /></p>
            <p>圖片：<input v-model="item.img" /></p>
            <p>圖片：
            <img :src="'https://picsum.photos/600/300/?image='+item.img" 
                  style="width:200px;" @click="index=i; $refs['sel-img'].show()" /></p>

            <template #modal-footer="{ok}">
              <b-button variant="success" @click="ok(); save();">
                確定
              </b-button>
            </template>
          </b-modal>
        </b-card>
      </div>
    </draggable>
  </b-card-group>

  <!-- 選擇圖片 -->
  <b-modal ref="sel-img" title="選擇圖片" size="lg" hide-footer>
    <b-img v-for="i in 40" :src="'https://picsum.photos/600/300/?image='+i"
            class="m-1" style="width:30%;" @click="items[index].img=i; save(); $refs['sel-img'].hide()" />
  </b-modal>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      drag: false,
      index:-1,
      items: [
        { text: 'img0', img: 0 },
      ]
    },
    beforeMount() {
      let items = localStorage.getItem("items");
      if (items != null) {
        this.items = JSON.parse(items);
      }
      else {
        for (let i = 10; i < 22; i++)
          this.items.push({ text: 'img' + i, img: i });
      }
    },
    methods: {
      save() {
        localStorage.setItem("items", JSON.stringify(this.items));
      }
    }
  })
</script>

表格¶

基本表格¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <b-table striped hover :items="items"></b-table>
  </div>

  <script>
      window.app = new Vue({
        el: '#app',
        data: {
          items: [
            { age: 40, name: '小王'},
            { age: 21, name: '小明' },
            { age: 89, name: '小陳'},
            { age: 38, name: '小松'}
          ]
        },
      })
  </script>
</body>
</html>

排序與勾選¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>

  <script>
      window.app = new Vue({
        el: '#app',
        data: {
          fields: [
            {
              key: 'name',
              label: '姓名',
              sortable: true
            },
            {
              key: 'age',
              label: '年齡',
              sortable: true,
              variant: 'danger'
            }
          ],
          items: [
            { age: 40, name: '小王'},
            { age: 21, name: '小明' },
            { age: 89, name: '小陳'},
            { age: 38, name: '小松'}
          ]
        },
      })
  </script>
</body>
</html>

<div id="app">
    <b-table :items="items" :fields="fields"
             selectable select-mode="multi" @row-selected="onRowSelected">
    </b-table>
    {{ selected }}
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        selected: [],
        fields: [
          {
            key: 'name',
            label: '姓名',
            sortable: true
          },
          {
            key: 'age',
            label: '年齡',
            sortable: true,
          }
        ],
        items: [
          { age: 40, name: '小王' },
          { age: 21, name: '小明' },
          { age: 89, name: '小陳' },
          { age: 38, name: '小松' }
        ]
      },
      methods: {
        onRowSelected(items) {
          this.selected = items
        }
      }
    })
  </script>

響應表格 (Responsive Table)¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <b-table responsive sticky-header :items="items"></b-table>
    {{items}}
  </div>

  <script>
      new Vue({
        el: '#app',
        data: {
          items: []
        },
        beforeMount() {
          let obj = {};
          for (let i in [...'xxxxxxxxxxx'])
            obj[i] = 'cell';

          for (let i in [...'xxxxx'])
            this.items.push(obj);
        }
      })
  </script>
</body>
</html>

<div id="app">
    <b-table responsive sticky-header :items="items" :fields="fields"></b-table>
    {{items}}
  </div>

  <script>
      window.app = new Vue({
        el: '#app',
        data: {
          fields: [
            { key: '0', stickyColumn: true, isRowHeader: true, variant: 'primary' },
            ...'123456789',
            '10'
          ],
          items: []
        },
        beforeMount() {
          let obj = {};
          for (let i in [...'xxxxxxxxxxx'])
            obj[i] = 'cell';

          for (let i in [...'xxxxxxxxxx'])
            this.items.push(obj);
        }
      })
  </script>

Nav Tabs¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <b-nav tabs>
      <b-nav-item v-for="(item, i) in items"
                  :active="activeIndex==i" 
                  @click="activeIndex=i">
        {{ item }}
      </b-nav-item>
    </b-nav>

    <div v-for="(item, i) in contents" v-if="activeIndex==i">
      {{item}}
    </div>
  </div>


  <script>
      window.app = new Vue({
        el: '#app',
        data: {
          activeIndex: 0,
          items: ['A', 'B', 'C'],
          contents: ['内容A', '内容B', '内容C']
        },
      })
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <b-card no-body>
      <b-card-header header-tag="nav">
        <b-nav card-header tabs fill>
          <b-nav-item v-for="(item, i) in items"
                      :active="activeIndex==i" 
                      @click="activeIndex=i">
            {{ item }}
          </b-nav-item>
        </b-nav>
      </b-card-header>

      <b-card-body class="text-center">
        <b-card-text v-for="(item, i) in contents" v-if="activeIndex==i">
          {{item}}
        </b-card-text>
      </b-card-body>
    </b-card>
  </div>


  <script>
      window.app = new Vue({
        el: '#app',
        data: {
          activeIndex: 0,
          items: ['A', 'B', 'C'],
          contents: ['内容A', '内容B', '内容C']
        },
      })
  </script>
</body>
</html>

工具列 (Navbar)¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <b-navbar toggleable="lg" type="dark" variant="info">
      <!-- 主圖標 -->
      <b-navbar-brand href="#">
        <b-icon icon="list"></b-icon>
      </b-navbar-brand>

      <!-- 靠左邊的圖標 -->
      <b-navbar-nav>
        <b-nav-item>
          <b-icon icon="house" variant="light"></b-icon>
        </b-nav-item>
      </b-navbar-nav>

      <!-- 靠右邊的圖標 -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item>
          <b-icon icon="house" variant="light"></b-icon>
        </b-nav-item>
      </b-navbar-nav>
    </b-navbar>

    <div>
      内容
    </div>

    <!-- 下工具列 -->
    <b-navbar toggleable="lg" type="dark" variant="info" fixed="bottom">
      <!-- 靠右邊的圖標 -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item>
          <b-icon icon="house" variant="light"></b-icon>
        </b-nav-item>
      </b-navbar-nav>
    </b-navbar>
  </div>

  <script>
      window.app = new Vue({
        el: '#app',
        data: {
        },
      })
  </script>
</body>
</html>

具有内容時，邊界的設定

<div id="app">
    <b-navbar toggleable="lg" type="dark" variant="info" fixed="top">
      <!-- 主圖標 -->
      <b-navbar-brand href="#">
        <b-icon icon="list"></b-icon>
      </b-navbar-brand>

      <!-- 靠左邊的圖標 -->
      <b-navbar-nav>
        <b-nav-item>
          <b-icon icon="house" variant="light"></b-icon>
        </b-nav-item>
      </b-navbar-nav>

      <!-- 靠右邊的圖標 -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item>
          <b-icon icon="house" variant="light"></b-icon>
        </b-nav-item>
      </b-navbar-nav>
    </b-navbar>

    <div style="overflow:hidden; margin: 60px 10px">
      <div v-for="i in 100">{{i}}</div>
    </div>

    <!-- 下工具列 -->
    <b-navbar toggleable="lg" type="dark" variant="info" fixed="bottom">
      <!-- 靠右邊的圖標 -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item>
          <b-icon icon="house" variant="light"></b-icon>
        </b-nav-item>
      </b-navbar-nav>
    </b-navbar>
  </div>

抽屜式側選單 (Draw Menu、Sidebar)¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <b-navbar toggleable="lg" type="dark" variant="info">
        <b-navbar-brand href="#">
          <b-icon icon="list" v-b-toggle="'sidebar-1'"></b-icon>
        </b-navbar-brand>

        <!-- 靠右邊的圖標 -->
        <b-navbar-nav class="ml-auto">
          <b-nav-item>
            <b-icon icon="house" variant="light"></b-icon>
          </b-nav-item>
        </b-navbar-nav>
      </b-navbar>

      <!--sidebar: 加上 backdrop 允許點選背景後關閉選單 -->
      <b-sidebar id="sidebar-1" title="Sidebar" shadow backdrop>
        在此建立清單
      </b-sidebar>
    </div>
  </div>

  <script>
      window.app = new Vue({
        el: '#app',
        data: {
          items: [
            { icon: 'house', text: 'item1' },
            { icon: 'heart', text: 'item2' },
            { icon: 'gear', text: 'item3' },
          ]
        },
        methods: {
          itemClick(item) {
            alert(item);
          }
        }
      })
  </script>
</body>
</html>

結合路由

<!DOCTYPE html>
<html>
<head>
  <!--調整手機瀏覽器的螢幕解析度 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Vue.js  -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  <!-- vue-router 路由套件-->
  <script src="https://cdn.jsdelivr.net/npm/vue-router"></script>

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <!--首頁 -->
  <style></style>
  <template id="home">
    <b-card>首頁内容</b-card>
  </template>
  <script>
    const home = {
      template: '#home',
    };
  </script>

  <!-- about -->
  <style></style>
  <template id="about">
    <b-card>關於</b-card>
  </template>
  <script>
    const about = {
      template: '#about',
    };
  </script>

  <!-- Setting -->
  <style></style>
  <template id="setting">
    <b-card>設定</b-card>
  </template>
  <script>
    const setting = {
      template: '#setting',
    };
  </script>

  <!-- 應用程式 -->
  <div id="app">
    <div>
      <b-navbar toggleable="lg" type="dark" variant="info">
        <b-navbar-brand href="#">
          <b-icon icon="list" v-b-toggle.sidebar-1></b-icon>
        </b-navbar-brand>

        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

        <b-collapse id="nav-collapse" is-nav>

          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">
            <b-nav-item to="/">
              <b-icon icon="house" variant="light"></b-icon>
            </b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>

      <b-sidebar id="sidebar-1" title="Sidebar" shadow>
        <b-list-group>
          <b-list-group-item v-for="item in items" :to="item.to">
            <b-icon :icon="item.icon"></b-icon>
            {{item.text}}
          </b-list-group-item>
        </b-list-group>
      </b-sidebar>
    </div>

    <!-- 結果在此顯示 -->
    <router-view></router-view>
  </div>
  <script>
    const router = new VueRouter({
      routes: [
        {
          path: '/',
          component: home
        },
        {
          path: '/about',
          component: about
        },
        {
          path: '/setting',
          component: setting
        }
      ]
    });

    var vm = new Vue({
      router,
      el: '#app',
      data: {
        items: [
          { icon: 'house', text: 'Home', to: '/' },
          { icon: 'heart', text: 'About', to: '/about' },
          { icon: 'gear', text: 'Setting', to: '/setting' },
        ]
      },
    })
  </script>
</body>
</html>

對話框¶

Toast¶

<div id="app">
  <b-button @click="$bvToast.show('toast')">
    Show toast
  </b-button>
  <b-button @click="$bvToast.toast('toast')">
    Toast
  </b-button>

  <b-toast id="toast" title="Toast 範例" static no-auto-hide>
    内容
  </b-toast>
</div>

簡單的對話框¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <b-button v-b-modal="'modal-1'">開啓對話框</b-button>
    <b-button @click="$bvModal.show('modal-1')">開啓對話框</b-button>
    <b-button @click="$refs['modal-1'].show()">開啓 ref 對話框</b-button>
    <b-button @click="bModalShow=true">開啓 v-model 對話框</b-button>

    <b-modal id="modal-1" title="簡單的對話框">
      <p class="my-4">Hello!</p>
    </b-modal>

    <b-modal ref="modal-1" title="簡單的對話框" size="sm" button-size="sm">
      <p class="my-4">Hello by Reference!</p>
    </b-modal>

    <b-modal v-model="bModalShow" title="簡單的對話框" size="lg" button-size="lg">
      <p class="my-4">Hello by v-model!</p>
    </b-modal>
  </div>

  <script>
      window.app = new Vue({
        el: '#app',
        data: {
          bModalShow:false
        }
      })
  </script>
</body>
</html>

自訂按鈕¶

<div id="app">
<b-button v-b-modal="'modal-1'">開啓對話框</b-button>

<b-modal id="modal-1" title="簡單的對話框" hide-footer>
  <p class="my-4">Hello!</p>
  <b-button @click="$bvModal.hide('modal-1')">關閉</b-button>
</b-modal>
</div>

自訂對話框 Slot¶

<div id="app">
<b-button v-b-modal="'modal-1'">開啓對話框</b-button>

<b-modal id="modal-1" title="簡單的對話框">
  <template #modal-header="{ close }">
    <b-icon icon="x" @click="close()" style="position:absolute; right:5px"></b-icon>
  </template>

  <p class="my-4">Hello Slot!</p>

  <template #modal-footer="{ ok, cancel }">
    <b-button @click="cancel()">Cancel</b-button>
    <b-button @click="ok()" variant="danger">OK</b-button>
  </template>
</b-modal>
</div>

<script>
  window.app = new Vue({
    el: '#app',
  })
</script>

對話框事件¶

<div id="app">
    <b-button v-b-modal="'modal-1'">開啓對話框</b-button>

    <b-modal id="modal-1" title="簡單的對話框" @shown="modalShown" @ok="modalOK">
      <p class="my-4">Hello!</p>
    </b-modal>
  </div>

  <script>
    window.app = new Vue({
      el: '#app',
      methods: {
        modalShown() {
          console.log("modalShown");
        },
        modalOK() {
          this.$bvModal.msgBoxConfirm('Alert', { title: '請確認', centered: true })
            .then(value => {
              console.log(value);
            })
        }
      }
    })
  </script>

msgBoxOk 及 msgBoxConfirm¶

<div id="app">
<b-button @click="showAlert">Alert</b-button>
<b-button @click="showConfirm">Confirm</b-button>
</div>

<script>
  window.app = new Vue({
    el: '#app',
    methods: {
      showAlert() {
        this.$bvModal.msgBoxOk('Alert', { title: '請確認', centered: true})
          .then(value => {
            console.log(value);
          })
          .catch(err => {
            // An error occurred
          })
      },
      showConfirm() {
        this.$bvModal.msgBoxConfirm('Alert', { title: '請確認', centered: true })
          .then(value => {
            console.log(value);
          })
          .catch(err => {
            // An error occurred
          })
      },
    }
  })
</script>

多媒體¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <b-embed type="iframe"
             aspect="16by9"
             src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"
             allowfullscreen></b-embed>
  </div>

  <script>
      window.app = new Vue({
        el: '#app',
      })
  </script>
</body>
</html>

<div id="app">
<b-button v-b-modal="'modal-1'">開啓對話框</b-button>
<b-modal id="modal-1" title="簡單的對話框" hide-footer>
  <b-embed type="iframe"
            aspect="16by9"
            src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"
            allowfullscreen></b-embed>
</b-modal>
</div>

表單 (Form)¶

選項¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
  <div id="app">
    <!-- 單一選項 -->
    <b-form-checkbox v-model="status" :value="true" :unchecked-value="false">
      選項一
    </b-form-checkbox>
    <div>{{ status }}</div>
    <hr>

    <!-- 組合多選項 -->
    <b-form-checkbox-group v-model="selected" :options="options1">
    </b-form-checkbox-group>

    <b-form-checkbox-group v-model="selected" switches>
      <b-form-checkbox v-for="item in options2" :value="item.value">
        {{item.text}}
      </b-form-checkbox>
    </b-form-checkbox-group>

    <div>{{ selected }}</div>
    <hr>

    <!-- 組合單選項 -->
    <b-form-group label="單選">
      <b-form-radio-group v-model="status" name="radios1" :options="options1">
      </b-form-radio-group>
    </b-form-group>

    <b-form-group label="單選">
      <b-form-radio-group v-model="status" name="radios2">
        <b-form-radio v-for="item in options1" :value="item">{{item}}</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <div>{{ status }}</div>
    <hr>

    <!-- 下拉選項 -->
    <b-form-select v-model="status" :options="options1"></b-form-select>

    <b-form-select v-model="status">
      <b-form-select-option v-for="item in options1" :value="item">
        {{item}}
      </b-form-select-option>
    </b-form-select>

    <div>{{ status }}</div>
  </div>

  <script>
      new Vue({
        el: '#app',
        data: {
          status: true,
          selected: [], 
          options1: ['Orange', 'Apple', 'Grape'],
          options2: [
            { text: 'Orange', value: 'Orange' },
            { text: 'Apple', value: 'Apple' },
            { text: 'Grape', value: 'Grape' }
          ]
        },
        computed: {
        }
      })
  </script>
</body>
</html>

下拉式選單 (DropDown)¶

<div id="app">
  <b-dropdown>
    <template #button-content>
      下拉選單按鈕内容 slot
    </template>
    <b-dropdown-item href="#" v-for="item in options1" @click="itemClick(item)">
      {{item}}
    </b-dropdown-item>
  </b-dropdown>

  <b-dropdown>
    <template #button-content>
      下拉選單按鈕内容 slot
    </template>
    <b-dropdown-item href="#" v-for="item in options2" @click="itemClick(item)">
      <b-icon :icon="item.icon"></b-icon>
      {{item.text}}
    </b-dropdown-item>
  </b-dropdown>
</div>

<script>
    window.app = new Vue({
      el: '#app',
      data: {
        options1: ['House', 'Heart', 'Gear'],
        options2: [
          { icon: 'house', text: 'House' },
          { icon: 'heart', text: 'Heart' },
          { icon: 'gear', text: 'Gear' },
        ]
        ]
      },
      methods: {
        itemClick(item) {
          console.log(item);
        }
      }
    })
</script>

VUE 專案¶

專案檔案分割前¶

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- 安裝 Vue、vue-router -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router"></script>

  <!-- 安裝 BootstrapVue -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

  <!-- 安裝 Vuex -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>
</head>
<body>
  <!-- 主程式 -->
  <div id="app">
    <div>
      <!-- 工具列 -->
      <b-navbar toggleable="lg" type="dark" variant="info">
        <b-navbar-brand href="#">
          <b-icon icon="list" v-b-toggle="'sidebar-1'"></b-icon>
        </b-navbar-brand>

        <!-- 靠右邊的圖標 -->
        <b-navbar-nav class="ml-auto">
          <b-nav-item>
            <b-icon icon="house" variant="light"></b-icon>
          </b-nav-item>
        </b-navbar-nav>
      </b-navbar>

      <!--抽屜式選單: 加上 backdrop 允許點選背景後關閉選單 -->
      <b-sidebar id="sidebar-1" title="Sidebar" shadow backdrop>
        <!-- 路由清單 -->
        <b-list-group>
          <b-list-group-item v-for="item in menuItems" :to="item.to">
            <b-icon :icon="item.icon"></b-icon>
            {{item.text}}
          </b-list-group-item>
        </b-list-group>
      </b-sidebar>

      <!-- 路由切換結果在此顯示 -->
      <router-view></router-view>
    </div>
  </div>

  <!-- page1 -->
  <template id="page1">
    <div class="pt-5 text-center">
      <h5>第一頁</h5>
      <b-button @click="setCount(count+1)">{{count}}</b-button>
    </div>
  </template>

  <script>
    const page1 = {
      name: 'page1',
      template: '#page1',
      data: function () {
        return {
        }
      },
      computed: {
        ...Vuex.mapState(['count']),
      },
      methods: {
        ...Vuex.mapMutations(['setCount']),
      },
    };
  </script>

  <!-- page2 -->
  <template id="page2">
    <div class="pt-5 text-center">
      <h5>第二頁</h5>
      <b-button @click="setCount(count+1)">{{count}}</b-button>
    </div>
  </template>

  <script>
    const page2 = {
      name: 'page2',
      template: '#page2',
      data: function () {
        return {
        }
      },
      computed: {
        ...Vuex.mapState(['count']),
      },
      methods: {
        ...Vuex.mapMutations(['setCount']),
      },
    };
  </script>

  <script>
    const router = new VueRouter({
      routes: [
        {
          path: '/',
          component: page1
        },
        {
          path: '/page1',
          component: page1
        },
        {
          path: '/page2',
          component: page2
        }
      ]
    });

    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        setCount(state, val) {
          state.count = val;
        }
      }
    });

    new Vue({
      el: '#app',
      router,
      store,
      data: {
        menuItems: [
          { icon: 'house', text: '第一頁', to: 'page1' },
          { icon: 'heart', text: '第二頁', to: 'page2' },
          //{ icon: 'gear', text: '第三頁', to: 'page3' },
        ]
      },
      methods: {
      }
    })
  </script>
</body>
</html>

檔案分割後¶

page1.js

let template = `
<div class="pt-5 text-center">
    <h5>第一頁</h5>
    <b-button @click="setCount(count+1)">{{count}}</b-button>
</div>
`

export default {
    name: 'page1',
    template: template,
    data: function () {
        return {
        }
    },
    computed: {
        ...Vuex.mapState(['count']),
    },
    methods: {
        ...Vuex.mapMutations(['setCount']),
    },
};

page2.js

let template=`
<div class="pt-5 text-center">
    <h5>第二頁</h5>
    <b-button @click="setCount(count+1)">{{count}}</b-button>
</div>
`

export default {
    name: 'page2',
    template: template,
    data: function () {
        return {
        }
    },
    computed: {
        ...Vuex.mapState(['count']),
    },
    methods: {
        ...Vuex.mapMutations(['setCount']),
    },
};

router.js

import page1 from "./page1.js"
import page2 from "./page2.js"

export default new VueRouter({
    routes: [
        {
            path: '/',
            component: page1
        },
        {
            path: '/page1',
            component: page1
        },
        {
            path: '/page2',
            component: page2
        }
    ]
});

store.js

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        setCount(state, val) {
            state.count = val;
        }
    }
});

main.js

import router from "./router.js"
import store from "./store.js"

new Vue({
    el: '#app',
    router,
    store,
    data: {
        menuItems: [
            { icon: 'house', text: '第一頁', to: 'page1' },
            { icon: 'heart', text: '第二頁', to: 'page2' },
            //{ icon: 'gear', text: '第三頁', to: 'page3' },
        ]
    },
    methods: {
    }
})

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <!-- Stylesheets -->
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- 安裝 Vue、vue-router -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router"></script>

  <!-- 安裝 BootstrapVue -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

  <!-- BootstrapVue icons -->
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

  <!-- 安裝 Vuex -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>
</head>
<body>
  <!-- 主程式 -->
  <div id="app">
    <div>
      <!-- 工具列 -->
      <b-navbar toggleable="lg" type="dark" variant="info">
        <b-navbar-brand href="#">
          <b-icon icon="list" v-b-toggle="'sidebar-1'"></b-icon>
        </b-navbar-brand>

        <!-- 靠右邊的圖標 -->
        <b-navbar-nav class="ml-auto">
          <b-nav-item>
            <b-icon icon="house" variant="light"></b-icon>
          </b-nav-item>
        </b-navbar-nav>
      </b-navbar>

      <!--抽屜式選單: 加上 backdrop 允許點選背景後關閉選單 -->
      <b-sidebar id="sidebar-1" title="Sidebar" shadow backdrop>
        <!-- 路由清單 -->
        <b-list-group>
          <b-list-group-item v-for="item in menuItems" :to="item.to">
            <b-icon :icon="item.icon"></b-icon>
            {{item.text}}
          </b-list-group-item>
        </b-list-group>
      </b-sidebar>

      <!-- 路由切換結果在此顯示 -->
      <router-view></router-view>
    </div>
  </div>

  <script src="main.js" type="module"></script>
  <script>
  </script>
</body>
</html>