vue官網上的v-model指令的介紹是

v-model

• 預期：隨表單控制元件型別不同而不同。

• 限制：

  • <input>
  • <select>
  • <textarea>
  • components

• 修飾符：

  • .lazy- 取代input監聽change事件
  • .number- 輸入字串轉為有效的數字
  • .trim- 輸入首尾空格過濾

用法：

在表單控制元件或者元件上建立雙向繫結。細節請看下面的教程連結。

對於v-model VUE指出在使用表單控制元件的時候就需要想到v-model

問題: :value的方式只能將記憶體中模型變數的值繫結到頁面，不能將頁面的修改自動同步到記憶體中的模型變數上——單向繫結

 解決: 雙向繫結: 既能將記憶體中模型變數的值繫結到頁面，又能將頁面的修改自動同步到記憶體中的模型變數上。

 何時: 只要繫結可修改的表單元素，都用v-model

 如何: v-model:value=”模型變數”

   簡寫: v-model=”模型變數”

 原理: 所有帶v-model繫結的元素，都被加入一個監視佇列(watch)，由一個死迴圈不斷監視佇列中元素的內容變化。只要發生變化，就直接修改繫結的模型變數

 監視函式: 只要頁面變化，就自動執行的函式

對於watch和computed的區別:

computed 計算屬性

計算屬性顧名思義就是通過其他變數計算得來的另一個屬性，fullName在它所依賴firstName，lastName這兩個變數變化時重新計算自己的值。

另外，計算屬性具有快取。計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 lastName和firstName都沒有發生改變，多次訪問 fullName計算屬性會立即返回之前的計算結果，而不必再次執行函式。

而觀察watch是觀察一個特定的值，當該值變化時執行特定的函式。例如分頁元件中，我們可以檢測頁碼執行獲取資料的函式。