雙向綁定（v-model和屬性的雙綁）

一、可以使用v-model的標簽

你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。

v-model 會忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。

二、雙向綁定

雙向綁定：數據改變時會自動更新視圖，視圖發生變化時會更新數據。

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

<script>
const vm = new vue({
    el: "#app",
    data: {
        name: "么么噠"
    }
});
</script>

1.v-model在input的下拉框、單選按鈕、復選框中的應用

    如下面代碼，分別是v-model在input不同的組件中的應用，但是大體用法相同。注意：像下面代碼中復選框這樣需要接收多條數據的情況下，在data里面應該由數組與其對應二不是字符串。

    這里有一個值綁定的問題，不管是下拉框或者單選按鈕還是復選框，我們都可以在對應的標簽內設置value。以下拉框為例，我們在<option>中添加了vulue=“A被選”，當我們選擇第一個下拉框A的時候，在selected中的字符串為‘A被選'，如果我們不在<option>中設置value值的話那么selected中的字符串將是<option>中的值‘A'。

    這里還有一個和vue無關的問題，比較簡單，但是由於平時主要做后台java開發沒太注意這個前端問題。以下面的單選按鈕代碼為例，<label>標簽內有一個for元素與input中的id值對應(兩個值相同)，剛開始不太理解為什么這么寫，這個對前端人員來說應該是一個很簡單的問題。這樣寫的目的沒有其它任何作用，只是label元素為鼠標改進了可用性，在點擊label的時候也相當於點擊了對應的input控件，點擊label標簽也可以觸發input標簽控件。例如單選按鈕在加了for之后點擊small也可以選擇對應按鈕，但是如果不加for是沒有任何反應的。

<!--下拉框-->
<div id="app">
  <select v-model="selected">
    <option value="A被選">A</option>
    <option value="B被選">B</option>
    <option value="C被選">C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  });
</script>
 
<!--單選按鈕-->
<div id="app">
  <input type="radio" id="small" value="small_value" v-model="picked">
  <label for="small">small</label>
  <br>
  <input type="radio" id="big" value="big_value" v-model="picked">
  <label for="big">big</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      picked: ''
    }
  })
</script>
 
<!--復選框-->
<div id="app">
  <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames">
  <label for="one">選項一</label>
  <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames">
  <label for="two">選項二</label>
  <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames">
  <label for="three">選項三</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      checkedNames: []
    }
  })
</script>

2.v-model修飾符

    v-model也可以和.lazy、.trim和.number這些修飾符一起使用。

<!-- 在每次 input 事件觸發后將輸入框的值與數據進行同步，添加 lazy 修飾符，從而轉變為使用 change 事件進行同步 -->
<input v-model.lazy="msg" >
<!--去除字符串首尾的空格-->
<input v-model.trim="msg">
<!--將數據轉化為值類型-->
<input v-model.number="age" type="number">

下面在單獨給大家介紹下vue中v-model使用

v-model用於表單數據的雙向綁定，其實它就是一個語法糖，這個背后就做了兩個操作：

  1. v-bind綁定一個value屬性

  2. v-on指令給當前元素綁定input事件

自定義組件使用v-model，應該有以下操作：

1. 接收一個value prop

2. 觸發input事件，並傳入新值

在原生表單元素中：

<input v-model="inputValue">

相當於

<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

在自定義組件中

<my-component v-model="inputValue"></my-component>

相當於

<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>

這個時候，inputValue接受的值就是input事件的回調函數的第一個參數，所以在自定義組件中，要實現數據綁定，還需要$emit去觸發input的事件。

this.$emit('input', value)

 

我是小白，期待和優秀的你一起同行!