沿用專案並加入新的router-view:
src/view加入檔案，命名為BindDemo.vue，並在檔案中加入template。
src/router/index.js中，import BindDemo.vue並設定routes。
src/Layout.vue的<template>中加入<router-link> 設定BindDemo路徑與參數。
存檔後執行，點選頁面右側v-bind選單，顯示畫面。
接下來開始實作v-bind。
v-bind 屬性綁定
v-bind可以用來綁定HTML上的屬性(attribute)，對HTML屬性作綁定與操作，如title、style、class、disable…等，如同以往以DOM(Document Object Model)對HTML上的屬性作操作一樣。在Vue中，綁定HTML屬性的語法為 v-bind:屬性名稱 = "屬性的值"。
可以透過v-bind綁定各種屬性，如以下:
title屬性
在src/views/BindDemo.vue的template加入<input>標籤並設定HTML屬性title為"TitleValue"。
v-bind:title="TitleValue"
在src/views/BindDemo.vue加入script並設定data與title的值，export出來讓v-bind做綁定。
存檔執行後，將滑鼠游標放置在text上，即可跑出title "請輸入內容"。
disabled屬性
在剛剛建立的<input>標籤設定HTML屬性disabled為"true"。
v-bind:disabled="true"
存檔執行，即可看到text反灰無法輸入。
src屬性
在template中加入<img/>並指定src為"SrcURL"。
v-bind:src="SrcURL"
在script中新增SrcURL的值，export出來讓v-bind做綁定。
存檔執行後，即可看到image。
v-bind縮寫
v-bind語法也可以縮寫，從原本的v-bind:屬性名稱改為:屬性名稱。
除了上面的HTML屬性外，v-bind也能夠綁定其他各種的HTML屬性，可參考 https://www.w3schools.com/tags/ref_attributes.asp。
v-bind Class綁定
v-bind綁定Class屬性。透過設定Class的綁定與否，可以達到動態切換Class的效果。在src/views/BindDemo.vue加入<style>區塊與MyCSS。
在<script>區塊的data中增加MyCSS。
在<template>下方增加<label>綁定class="MyCSS"。
:class="MyCSS"
存檔執行，即可看到My CSS Sytle與榜定的calss。
另外，可以在data定義變數來判斷是否套用class，用來動態綁定class。
在<script>區塊中加入兩個屬性，isActive與notActiv，值分別為true與false。
將原本的<label>增加為兩個，分別以:class="{class名稱: 綁定與否}"，各自設定為:class="{ MyCSS: isActive }"與:class="{ MyCSS: notActive }"。
存檔執行後，可以看到#17因為是isActive: true，所以會綁定class。
而Shohei Ohtani則是notActive: fals所以不會有class效果。
綁定多個class
class的綁定，也可以用陣列的方式[{class1名稱},{class2名稱}]來綁定多個class。
在<style>區塊增加MyCSS2，其背景顏色與文字顏色跟MyCSS相反。
在<style>區塊的data中增加MyCSS2。
在<template>區塊中，將兩個<label>分別以下面語法做綁定
:class="[{ MyCSS: isActive }, { MyCSS2: notActive }]":class="[{ MyCSS: notActive }, { MyCSS2: isActive }]"
存檔執行後，可以看到:
#17的綁定只有MyCSS為isActive: true，所以只會呈現MyCSS的效果(紅底白字)。
而Shohei Ohtani則是MyCSS2為isActive: true，所以只會有MyCSS2的效果(白底紅字)。
套用bootstrap
安裝bootstrap，並綁定bootstrap的CSS。
npm安裝bootstrap
開啟終端機，輸入:npm install bootstrap
安裝完後，就可以看到node_modules多了bootstrap資料夾。
在src/main.js中import bootstrap.min.css，並在建立Vue實體時use()。
在src/views/BindDemo.vue的<template>區塊中變更第6行<input>的HTML屬性，指定 :class="['form-control']"。(會用[' ']包住class，是因為class名稱有"-"，需要特別做處理)
存檔執行，可以看到input套用了bootstrap的class。
v-bind Style綁定
透過 :style 語法，綁定一個或多個inline-style樣式。如果原本想寫在<div>標籤內的style如下:
在vue則可寫成 :style="要綁定的CSS樣式"。
在<div>綁定style樣式為"divCSS"。
:style="divCSS"
另外再<script>區塊加入"divCSS"。
其中border-style跟border-color，因為有"-"的關係，要改成駝峰式的寫法。
存檔執行，顯示的畫面。
