資料細節說明

{{}}：

這是資料雙向綁定的方法，在 {{}} 包含 HTML 的變數或是直接打 HTML 在裡面都只會呈現純文字而已，如果要顯示出 HTML 的元素的話可以改用 v-html=變數 就可以顯示出 HTML 元素了。

補充說明：
在官網上有說到

{{表達式}}：

在 {{}} 這個裡面可以寫 JS 讓他回傳一個值，例如：

//兩個字串相加，輸出：這是一段文字<span class='text-danger'>紅色文字</span>
{{text+rawHtml}}

//可以用 JS 的 method 寫在 {{}} 裡
{{text.split('').reverse().join()}} 

//數值的運算也可以在這裡完成
{{number1+number2}} 

var app = new Vue({
    el: '#app',
    data: {
        text: '這是一段文字',
        rawHtml: `<span class="text-danger">紅色文字</span>`,
        number1: 100,
        number2: 300,
        htmlId: 'HTMLID',
        isDisabled: true
    },
});

v-text：

這是用指令的方式顯示出資料，這跟 {{}} 很像，但不同的地方是 {{}} 並不會額外有 HTML 在裡面， v-text 就會多跑出一個元素。

因為是指令所以可以用其他 vue API 來搭配，例如想讓資料在輸入的時候只綁定一次用 v-once，就可以讓設定的地方輸出一次。

v-bind：

可以綁定個類型的 HTML 屬性或是 class、id 等等選擇器。

<p v-bind:id="htmlId">請綁定上 ID</p>

//把 isDisabled 改成 false 就會取消 disable 效果

<input :disabled="isDisabled" type="text" class="form-control" placeholder="請在此加上動態 disabled">

var app = new Vue({
    el: '#app',
    data: {
        htmlId: 'HTMLID',
        isDisabled: true
    },
});

動態切換 class name 及 style 多種方法

物件：

在 CSS 中設定好的樣式要動態的加入或切換可以用 v-bind:class={'class name':切換值（boolean）}，因為是物件所以可以插入一個以上的值在裡面，加入的方式就跟物件一樣用 ， 隔開就行了。

<div class="box" :class="{'rotate':isTransform,'bg-danger':boxColor}"></div>

<button class="btn btn-outline-primary" v-on:click="isTransform = !isTransform">選轉物件</button>

<input type="checkbox" class="form-check-input" id="classToggle1" v-model="boxColor">

var app = new Vue({
    el: '#app',
    data: {
        isTransform: false,
        boxColor: false,
    },
});

<style>
    .box {
        transition: all .5s;
    }

    .box.rotate {
        transform: rotate(45deg)
    }
</style>

以上是在 DOM 上寫入物件，當然也可以把 class 物件存在 vue instance 裡的 data 內來帶入。

當我們把 objectClass 綁定到元素上的時候，跟換的內裡的值在 button 上用 v-on:click，checkBox 上用 v-model。

<div class="box" :class="objectClass"></div>

<button class="btn btn-outline-primary" v-on:click="objectClass.rotate = !objectClass.rotate">選轉物件</button>

// 一般來說我們常用到『點記法』來抓取 obj 裡的某屬性，但屬性中間有 - 就要改用『括弧記法』來取得值
<input type="checkbox" class="form-check-input" id="classToggle2" v-model="objectClass['bg-danger']">

var app = new Vue({
    el: '#app',
    data: {
        objectClass: {
            'rotate': false,
            'bg-danger': false,
        }
    },
});

陣列：

陣列加入 class name 適用於 class name 長度比較不一定時使用，可以用兩種陣列方式加入 class ，和物件一樣寫在 DOM 上或是寫在 vue instance data 中來加入 class。

// 寫在 DOM 上方式
<button class="btn" :class="['btn-outline-primary','active']">請操作本元件</button>

// 寫在 data 裡的方式，可以用 checkbox 和 v-model 動態加入值，藉此加上 class name
<button class="btn" :class="arrayClass">請操作本元件</button>

<input type="checkbox" class="form-check-input" id="classToggle3" v-model="arrayClass" value="btn-outline-primary">

<input type="checkbox" class="form-check-input" id="classToggle4" v-model="arrayClass" value="active">

var app = new Vue({
    el: '#app',
    data: {
        arrayClass: []
    },
});

:style

在我看來跟寫 style 在 DOM 上很像，但這邊用物件或陣列來帶入。

// 原本是 background-color 在 vue 把 - 拿掉改用駝峰式命名法來寫入樣式
<div class="box" :style="{'backgroundColor':'red'}"></div>

// 用物件帶入
<div class="box" :style="styleObject"></div>

// 陣列帶入不是用單一值，而是插入完整的物件(和第一個樣)，或是帶入物件變數也可以
<div class="box" :style="[{'backgroundColor':'red'}]"></div>

var app = new Vue({
    el: '#app',
    data: {
        styleObject: {
            backgroundColor: 'red',
            borderWidth: '5px'
        },
        styleObject2: {
            boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
        }
    },
});

vue 會自動加入 prefix

有時候會需要用到 prefix 才能保整每個瀏覽器運行起來一樣，vue 他不需要在加入樣式時打 prefix。

safari

chrome