想當年剛出來混的時候，看到這種 inline 寫法都會覺得這樣不會不好管理嗎

<button onclick='XXX'>

然後過了幾年，自己的代碼大概長這樣...真香

<input @input='xxx' @change='xxx' ...>
<button @click='xxx'>

Vue 的屬性綁定

在 Vue 中，當我們對有被綁定的變數進行更改的時候，他會同步到樣板 (template) 上，除了一般的字串數字之類的，我們一樣可以透過函式回傳值來進行顯示，那我們這邊就先來介紹一下 v-bind 屬性綁定吧

V-bind

v-bind 主要會被應用在原先標籤所擁有的屬性上面，例如說 class type 或是 style 等等，當然還有 value，不過 value 有個更方便的用法 v-model 這個就等等再提吧
以一個 input password 為例，在很多目前的登入平台上，我們可以顯示密碼讓使用者確認

<input tpye="password" />
<!-- Vue 可以這樣寫 -->
<input v-bind:type="passwordType">
<script>
new Vue({
    data(){
        return{
            passwordType: 'password'
        }
    }
})
</script>

那這樣當有需要把 password Input 更改成一般 text 只要更改 passwordType 的值就好囉，我們也可以把 v-bind 省略掉，單純使用 :[attr] 就好，像是這樣的寫法

<input :type="passwordType" :class="passwordClass">

v-on

當然，上面有寫到 Vue 的事件埋入方式其實與 inline event 類似譬如說一顆按鈕我們可以這樣寫

<button class="login-button" :disabled="loading" v-on:click="login()">

那我們也可以使用 @ 來做簡寫

<button class="logout-button" @click="logout()">

那有關於事件的位置我們是放在 Vue 實體裡面的 methods 屬性

new Vue({
    el: '#app',
    data(){
        return{
        }
    },
    methods: {
        login(){
        },
        logout(){
        }
    }
})

v-model

Vue 針對 input 之類具有 value 屬性內容的標籤提供了一個很方便的屬性，結合了 v-bind:value 以及 v-on:input 兩者，達到了會再輸入值的時候可以立刻回傳並更改的這件事

修飾符

我們可以針對 v-model 或是 v-on 添加一些修飾符來影響他們的功能
v-model:

• .lazy: 正常來說 v-model 是偵測 @input 事件，若是 v-model.lazy 則是偵測 @change 事件
• .number: v-model.number 將會自動把值轉成 Number 若是無法轉的那會返回原本的字串
• .trim: v-model.trim 會自動將頭尾的空白給去掉

v-on:

• .prevent: v-on:submit.prevent 可以讓提交表單不會跳轉頁面
• .stop: v-on:click.stop 可以讓事件不會繼續傳播
• .capture: 讓事件從根元素開始偵測，也就是所謂的捕捉模式
• .self: 讓事件只會觸發在自己身上
• .once: 該事件只會觸發一次
• .passive: 優化滾動效能但我沒用過

v-on:keyup:
@keyup 可以直接加上通用稱呼讓鍵盤偵測，像是

@keyup.enter
@keyup.page-down
@keyup.a

之類的，當然舊的方法(keyCode)還是存在，只是這就要看瀏覽器支援到什麼時候了

@keyup.13

換成可以直接顯示鍵位這件事我也是今天才知道，一直以為只有特殊幾顆鍵

那今天的內容差不多到這邊，明天來聊聊 Vue 的樣板判斷式 v-if 吧