v-model

RiverLi 發布于2019-08-21 11:53 / 2640人閱讀

摘要：用法中比較基礎的用法是在表單控件中，創建雙向數據綁定，能夠更新數據并負責監聽用戶的輸入事件實例代碼這里是監聽了輸入框的事件，并將其賦值給。找到的父組件就是組件，里面沒有注冊任何方法只是了屬性。因為在也是利用了的語法糖。

Vue v-model 用法

vue 中v-model 比較基礎的用法是在表單控件中，創建雙向數據綁定，能夠更新數據并負責監聽

用戶的輸入事件

實例代碼

    
    Message is: {{ message }}
    // 這里是監聽了輸入框的input 事件，并將其value賦值給message。
    ==》

詳細解釋

這里根據文檔上看，指出v-model 只是一種語法糖，同樣使用checkbox 時，我們也使用了v-model 來更新當前復選框是不是在被選中狀態，這里監聽的是change 事件，

在checkbox 中，就可以使用value屬性去做其它事情，
v-model 指令對于不同的 type 類型會綁定在不同的事件上，查看vue.common.js 中的代碼就可以發現：

    if (el.component) {
        genComponentModel(el, value, modifiers);
        // component v-model doesn"t need extra runtime
        return false
      } else if (tag === "select") {
        genSelect(el, value, modifiers);
      } else if (tag === "input" && type === "checkbox") {
        genCheckboxModel(el, value, modifiers);
      } else if (tag === "input" && type === "radio") {
        genRadioModel(el, value, modifiers);
      } else if (tag === "input" || tag === "textarea") {
        genDefaultModel(el, value, modifiers);
      } else if (!config.isReservedTag(tag)) {
        genComponentModel(el, value, modifiers);

checkbox

v-model會根據input 標簽中的type 類型不同，相應的使用不同的方法。

再看到 type=“checkbox” 對應的方法，

    this.listener = function () {
        var model = self._watcher.value;   // 獲取綁定指令 的 數組，在chang 事件發生時，時刻操作value 數組的變化
        if (isArray(model)) {
          var val = self.getValue();
          if (el.checked) {
            if (indexOf(model, val) < 0) {     //  checkbox 已經被勾選后，首先在model數組中查找有沒有被勾選checkbox 的對應value，沒有的的話就加入進去，這里也可以推斷出在v-model 綁定在一組checkbox中時，可以記錄所有的選中的值。
              model.push(val);
            }
          } else {                           // checkbox 被取消，就在model中 刪除checkbox 對應的value,
            model.$remove(val);
          }
        } else {
          self.set(getBooleanValue());
        }
      };
      //   將this.listener 函數綁定到 input　的　chang 事件中去， 在checkbox 發生變化時，
      this.on("change", this.listener);

上面也是從vue.js 中截取的代碼，就可以用來解釋官網中這段實例:


Jack

John

Mike


Checked names: {{ checkedNames }}

里面的checkedNames 可以保存所有已經被勾選的input 對應的value ,還不會有重復的值。

ElementUI elCheckboxGroup

官方示例
然后就聯想到了ElementUI中和兩個組件嵌套在一起使用的場景

checkAll數組中就保存著內部 elCheckbox 組件對應所有已經勾選的數組，

查看ElementUI 源碼中 checkbox.vue 對應文件（只截取對應功能片斷）：

checkbox.vue

template:
  
   
script:
    methods:{
           handleChange(ev) {
            this.$emit("change", ev);
            if (this.isGroup) {
              this.$nextTick(_ => {
                this.dispatch("ElCheckboxGroup", "change", [this._checkboxGroup.value]);  // 自定義dispatch 方法，向上遍歷找到parent組件 名字是ElCheckboxGroup 的父組件，并觸發對應的change事件。
          });
        }
      }
      }

this.dispatch 找到的父組件就是 checkboxGroup組件，

 checkboxGroup.vue
   
   template   
   
     
     
   

  //里面沒有注冊任何 change 方法

script :

   watch: {
      value(value) {
        this.dispatch("ElFormItem", "el.form.change", [value]);
      }
    }
   // 只是watch 了value 屬性。

因為在　

===

也是利用了 v-model 的語法糖。

云服務器 GPU云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87251.html

Vue.js-表單與v-model

摘要：學習筆記表單與表單與提供了指令，用于在表單類元素上雙向綁定數據。事實上，也是一個特殊的語法糖，只不過它會在不同的表單上智能處理。選擇的項復選框復選框單獨使用時，也是用綁定一個布爾值。復選框選擇列表當選中時，是一個，所以。學習筆記：表單與v-model 表單與v-model Vue.js提供了v-model指令，用于在表單類元素上雙向綁定數據。使用v-model后，表單控件顯示的值...

jollywing 2019-08-23 16:02 評論0 收藏0
父子組件傳值及v-model實現通信

摘要：子組件也屬于當前實例。監聽鉤子函數的場景使用的不多，但是還是要知道的。可以獲取到父組件傳遞的除和外的所有自定義屬性。一. 父組件向子組件傳值創建parent和child組件，并在parent中注冊child組件在父組件調用子組件標簽中添加一個自定義屬性(msg)， im...

lwx12525 2019-08-23 17:51 評論0 收藏0
iView2 來了，全面支持 Vue.js 2.x

摘要：來了兩個星期的緊張開發，終于發布了支持的版本。整體性能也大幅度提升。報名費用元，報名地址微信掃描二維碼更新日志目前已發布至，文檔還需一段時間，但很快會發布新版本的來支持。 showImg(https://segmentfault.com/img/remote/1460000008640063?w=1600&h=900); iView2 來了兩個星期的緊張開發，iView 終于發布了支...

YFan 2019-08-21 11:34 評論0 收藏0
巧妙運用v-model實現父子組件傳值

摘要：如何巧妙利用實現父子組件傳值通常子組件某個變量更新，并需要告知父組件時，需要子組件觸發事件并父組件監聽該事件。但是熟悉上面的實現原理后，我們可以巧妙地運用這一原理在內部使用不同的屬性為不同的輸入元素并拋出不同的事件。 v-model介紹熟悉Vue的小伙伴們都知道 v-model 是Vue的一個很大的特色，可以實現雙向數據綁定。但本質上呢，它不過是語法糖，它負責監聽用戶的輸入事件以更新...

張金寶 2019-08-23 16:44 評論0 收藏0