寫在前邊

暑假的時候學vue，但是當時沒有整理導致後來使用的時候對一些基礎概念有些遺忘，尤其是自己的理解出現了些許偏差。在此查漏補缺

作為vue最基礎的指令，v-bind和v-model無疑在資料傳遞，繫結等方面有著多種多樣的應用，下面我們對他們進行一次彙總

v-bind

簡寫

• “v-bind:“可以簡寫作”:”

繫結class

• 動態切換

v-bind:class="{}"的寫法可以動態的切換class，使得使用者可以通過js切換不同樣式的css，語法相較jq的addClass，removeClass更加簡單直觀

<!-- HTML -->
<ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<!-- JS -->
var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true
    }
})
 

如圖，可以通過控制物件中類命的至來決定是否選擇其對應的css樣式

• 直接繫結

亦可直接繫結資料中的物件,相當於上一種情況的一種封裝，在data種更容易辨別（尤其在data種屬性較多的情況下）

<!-- HTML -->
<ul class="box" :class="classObject">
    <li>Vue</li>
    <li>Node</li>
    <li>React</li>
</ul>

<!-- CSS -->
var vm= new Vue({
    el:‘.box‘,
    data:{
        classObject:{
            "textColor" : true,
            "textSize" : false //不渲染，注意看下面的截圖
        }
    }
})
 

陣列語法

• 將陣列傳給v-bind:class，以應用一個class列表

<!-- HTML -->
<ul class="box" :class="[classA, classB]">
    <li>Vue</li>
    <li>Node</li>
    <li>React</li>
</ul>

<!--JS-->
var vm= new Vue({
    el:".box",
    data:{
        classA : "textColor",
        classB : "textSize"
    }
})
 

• 同時還可以根據條件切換class哦
  • 比如三目運算子

<!-- HTML -->
<ul class="box" :class="[isA ? classA : classB]">
    <li>Vue</li>
    <li>Node</li>
    <li>React</li>
</ul>

<!-- JS -->
var vm= new Vue({
    el : ".box",
    data : {
        classA : "textColor",
        classB : "textSize",
        isA : false 
    }
})

• 對於多個class還可以這樣

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

繫結內聯樣式

• （這個真的不太想寫了，和上邊的基本一樣，只不過將屬性弄到了data裡邊）

<!--HTML-->
<div id="box" :style="styleObject">Hello World</div>

<!-- JS -->
var vm= new Vue({
    el:‘#box‘,
    data:{
        styleObject:{
            color : "red",
            fontSize : "30px"
        }
    }

v-model

Vue種，v-model主要用域在input（中的button，select）、textarea元素上進行雙向資料繫結。但其本質是語法糖，負責艦艇使用者的輸入事件以及更新資料

舉個栗子：

<input v-model="message">
<input v-bind:value="message" v-on:input="message = $event.target.value" />
<input :value="message" @input="message = $event.target.value" />

雖然這哥仨長得不一樣，但是本質上實現的功能是一樣的

• v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 例項的資料作為資料來源。你應該通過 JavaScript 在元件的 data選項中宣告初始值

由於是雙向繫結，所以無論更改父元件的值還是子元件的值，其對應（子/父）元件的值

不過具體細節呢，由於本人才疏學淺，就暫且不誤導大家啦，下面的部分是我從簡書大佬“Yi罐可樂”那裡搬運的，Vue 進階教程之：詳解 v-model

大佬主要解決了我對v-model中input作為觸發事件名稱的疑問，下面我們來一起看一下：

<div id="demo">
  <currency-input v-model="price"></currentcy-input>
  <span>{{price}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script>
<script>
Vue.component('currency-input', {
  template: `
    <span>
      <input
        ref="input"
        :value="value"
        <!--為什麼這裡把 'input' 作為觸發事件的事件名？`input` 在哪定義的？-->
        @input="$emit('input', $event.target.value)"
      >
    </span>
  `,
  props: ['value'],// 為什麼這裡要用 value 屬性，value在哪裡定義的？貌似沒找到啊？
})

var demo = new Vue({
  el: '#demo',
  data: {
    price: 100,
  }
})
</script>

事實上，這一切都是語法糖

<currency-input v-model="price"></currentcy-input>
<!--上行程式碼是下行的語法糖-->
<currency-input 
    :value="price" 
    @input="price = arguments[0]">
</currency-input>

給元件新增 v-model 屬性時，預設會把 value 作為元件的屬性，然後把 ‘input’ 值作為給元件繫結事件時的事件名