昨天提到綁定的概念，v-開頭的就是Vue下使令語言，今天就要來研究它們到底有哪些還有能做什麼!

v-bind 屬性綁定 (簡寫':')

HTML模板裡面的{{...}}就可以綁定data的資料；如果要在標籤上綁定資料的話就要使用v-bind，如下列範例，**v-bind:屬性名稱="data內的名稱"**就可以帶入資料。

<div id="app">
    <div v-bind:id="myId">....</div>
		<button v-bind:disabled="disable">click me</button>
</div>

const vm = Vue.createApp({
    data() {
        return {
            myId: 'item',
            disable: true
        }

    }
}).mount('#app');

樣式切換(:class/:style)

:class切換

當輸入的文字超過10個字時，input標籤內就會多class="error"，

.error {
    color: red;
}

<input type="text" v-model.trim="message" :class="{'error':message.length>10}">

const vm = Vue.createApp({
    data() {
        return {
            message: '',
        }
    }
}).mount('#app');

:style切換

用computed生成data的概念，綁定:style="msgStyle"，當超過十個字時會帶入msgStyle的樣式。

補充: 行內樣式使用「駝峰式」命名(如:backgroundColor)

<input type="text" v-model.trim="message" :style="msgStyle">
<p>computed中的isValid狀態:{{isValid}}</p>

const vm = Vue.createApp({
    data() {
        return {
            message: '',
        }
    },
    computed: {
        isValid: function () {
            return this.message.length <= 10;
        },
        msgStyle: function () {
            return {
                'border': this.isValid ? '' : '2px solid red',
                'backgroundColor': this.isValid ? '' : 'red',
            }
        }
    }
}).mount('#app');

v-model 表單綁定

模板上有表單元素(如: input, textarea...)時，會有更新資料的需求，此時就需要做「雙向綁定」，把表單內的資料更新到data裡面。

1. input文字框

在input裡面打字，{{message}}也會立即更新資料。

<div id="app">
    <p>message is {{message}}</p>
    <input type="text" v-model="message">
</div>

const vm = Vue.createApp({
    data() {
        return {
            message: 'Hello'
        }

    }
}).mount('#app');

2. textarea文字方塊

用法和input文字框一樣，要注意的是，若把{{message}}放在裡面，那麼打字在textarea裡面時並不會更新回資料裡面。

<textarea>{{message}}</textarea>
//不會綁定

<textarea v-model='message'></textarea>
//綁定

3. radio/checkbox選擇框

radio單選

在設定輸入框時都會先設定value屬性，但有了 v-model後可以直接在data屬性設定初始值，所以一開始的畫面就會是item2被選取。

<p> item value now is {{item}}</p>
<div class="radio-group">
    <input type="radio" id="item1" value="1" v-model="item">
    <label for="item1">item1</label>
</div>
<div class="radio-group">
    <input type="radio" id="item2" value="2" v-model="item">
    <label for="item2">item2</label>
</div>

const vm = Vue.createApp({
    data() {
        return {
            item: 2
        }

    }
}).mount('#app');

checkbox多選

由於有多個資料，所以在data中以陣列的方式items: []接收資料。

<p> items {{items}}</p>
<div class="checkbox-group">
    <input type="checkbox" id="A" value="A" v-model="items">
    <label for="A">A</label>
</div>
<div class="checkbox-group">
    <input type="checkbox" id="B" value="B" v-model="items">
    <label for="B">B</label>
</div>
<div class="checkbox-group">
    <input type="checkbox" id="C" value="C" v-model="items">
    <label for="C">C</label>
</div>

const vm = Vue.createApp({
	  data() {
	      return {
	          items: []
	      }
	  }
}).mount('#app');

checkbox確認框

isChecked值是true時就會被打勾

<div id="app">
    <div class="checkbox-group">
        <input type="checkbox" id="status" v-model="isChecked">
        <label for="status">status:{{isChecked}}</label>
    </div>
</div>

const vm = Vue.createApp({
    data() {
        return {
            isChecked: false
        }
    }
}).mount('#app');

4. select下拉選單

v-model沒有設定初始值時 select會處於未選擇的狀態，在 IOS 下就無法觸發change事件，因此可以在第一個選項加入disabled來排除問題。

<div id="app">
    <select v-model="selected">
        <option value="" disabled>choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <p>{{selected}} has been chosen</p>
</div>

const vm = Vue.createApp({
    data() {
        return {
            selected: ''
        }
    }
}).mount('#app');

Modifiers修飾子

在v-model後面加上.xxx就可以對它下附加指令。

• .lazy : input是每打一個字更新一次資料改為離開輸入框才做更新
• .number: 在輸入框中的數字由字串改為數字回傳
• .trim: 把前後多餘的空白過濾掉

v-text

就像模板中的{{message}}，v-text可以直接渲染，不一樣的是它會蓋過原本的Hello World，顯示綁定的Hello。

<p v-text="message">Hello World</p>

const vm = Vue.createApp({
    data() {
        return {
            message: 'Hello'
        }
    }
}).mount('#app');

v-html

v-html會把data中的標籤內容會輸出成標籤，而v-text是輸出整個字串。

<p v-text="text">Hello World</p>
<p v-html="text"></p>

const vm = Vue.createApp({
    data() {
        return {
	         text: '<h1>yeah</h1>'
        }
    }
}).mount('#app');

v-once

資料只會渲染一次

v-pre

{{...}}在模板上是有特殊意義，若想要顯示{{ text }}可以加入v-pre。

<span v-pre>{{ text }}</span>