成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

v-model

RiverLi / 2647人閱讀

摘要：用法中比較基礎(chǔ)的用法是在表單控件中，創(chuàng)建雙向數(shù)據(jù)綁定，能夠更新數(shù)據(jù)并負(fù)責(zé)監(jiān)聽(tīng)用戶(hù)的輸入事件實(shí)例代碼這里是監(jiān)聽(tīng)了輸入框的事件，并將其賦值給。找到的父組件就是組件，里面沒(méi)有注冊(cè)任何方法只是了屬性。因?yàn)樵谝彩抢昧说恼Z(yǔ)法糖。

Vue v-model 用法

vue 中v-model 比較基礎(chǔ)的用法是在表單控件中，創(chuàng)建雙向數(shù)據(jù)綁定，能夠更新數(shù)據(jù)并負(fù)責(zé)監(jiān)聽(tīng)

用戶(hù)的輸入事件

實(shí)例代碼

    
    
Message is: {{ message }}

    // 這里是監(jiān)聽(tīng)了輸入框的input 事件，并將其value賦值給message。
    ==》

詳細(xì)解釋

這里根據(jù)文檔上看，指出v-model 只是一種語(yǔ)法糖，同樣使用checkbox 時(shí)，我們也使用了v-model 來(lái)更新 當(dāng)前復(fù)選框是不是在被選中狀態(tài)，這里監(jiān)聽(tīng)的是change 事件，

在checkbox 中，就可以使用value屬性去做其它事情，
v-model 指令對(duì)于不同的 type 類(lèi)型會(huì)綁定在不同的事件上，查看vue.common.js 中的代碼就可以發(fā)現(xiàn)：

    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會(huì)根據(jù)input 標(biāo)簽中的type 類(lèi)型不同， 相應(yīng)的使用不同的 方法。

再看到 type=“checkbox” 對(duì)應(yīng)的方法，

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

上面也是從vue.js 中截取的代碼， 就可以用來(lái)解釋官網(wǎng)中這段實(shí)例:









Checked names: {{ checkedNames }}

里面的checkedNames 可以保存所有已經(jīng)被勾選的input 對(duì)應(yīng)的value ,還不會(huì)有重復(fù)的值。

ElementUI elCheckboxGroup

官方示例
然后就聯(lián)想到了ElementUI中 和兩個(gè)組件嵌套在一起使用的場(chǎng)景

checkAll數(shù)組中就保存著 內(nèi)部 elCheckbox 組件對(duì)應(yīng)所有已經(jīng)勾選的數(shù)組，

查看ElementUI 源碼中 checkbox.vue 對(duì)應(yīng)文件（只截取對(duì)應(yīng)功能片斷）：

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 的父組件，并觸發(fā)對(duì)應(yīng)的change事件。
          });
        }
      }
      }

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

 checkboxGroup.vue
   
   template   
   

     
     
   


  //里面沒(méi)有注冊(cè)任何 change 方法

script :

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

因?yàn)樵凇?/p> 

  ===

也是利用了 v-model 的語(yǔ)法糖。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87251.html

相關(guān)文章

  • Vue.js-表單與v-model

    摘要：學(xué)習(xí)筆記表單與表單與提供了指令，用于在表單類(lèi)元素上雙向綁定數(shù)據(jù)。事實(shí)上，也是一個(gè)特殊的語(yǔ)法糖，只不過(guò)它會(huì)在不同的表單上智能處理。選擇的項(xiàng)復(fù)選框復(fù)選框單獨(dú)使用時(shí)，也是用綁定一個(gè)布爾值。復(fù)選框選擇列表當(dāng)選中時(shí)，是一個(gè)，所以。 學(xué)習(xí)筆記：表單與v-model 表單與v-model Vue.js提供了v-model指令，用于在表單類(lèi)元素上雙向綁定數(shù)據(jù)。 使用v-model后，表單控件顯示的值...

    jollywing 評(píng)論0 收藏0

  • 父子組件傳值及v-model實(shí)現(xiàn)通信

    摘要：子組件也屬于當(dāng)前實(shí)例。監(jiān)聽(tīng)鉤子函數(shù)的場(chǎng)景使用的不多，但是還是要知道的。可以獲取到父組件傳遞的除和外的所有自定義屬性。 一. 父組件向子組件傳值 創(chuàng)建parent和child組件，并在parent中注冊(cè)child組件 在父組件調(diào)用子組件標(biāo)簽中添加一個(gè)自定義屬性(msg)， im...

    lwx12525 評(píng)論0 收藏0

  • iView2 來(lái)了，全面支持 Vue.js 2.x

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

    YFan 評(píng)論0 收藏0

  • 巧妙運(yùn)用v-model實(shí)現(xiàn)父子組件傳值

    摘要：如何巧妙利用實(shí)現(xiàn)父子組件傳值通常子組件某個(gè)變量更新，并需要告知父組件時(shí)，需要子組件觸發(fā)事件并父組件監(jiān)聽(tīng)該事件。但是熟悉上面的實(shí)現(xiàn)原理后，我們可以巧妙地運(yùn)用這一原理在內(nèi)部使用不同的屬性為不同的輸入元素并拋出不同的事件。 v-model介紹 熟悉Vue的小伙伴們都知道 v-model 是Vue的一個(gè)很大的特色，可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定。但本質(zhì)上呢，它不過(guò)是語(yǔ)法糖，它負(fù)責(zé)監(jiān)聽(tīng)用戶(hù)的輸入事件以更新...

    張金寶 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<