Vue 進階教學之:v-model的詳解

巴扎黑
發布: 2017-06-27 09:08:35
原創
2434 人瀏覽過

分享

Vue 官網教學上關於 v-model 的講解不是十分的詳細,寫這篇文章的目的就是詳細的剖析一下, 並介紹Vue 2.2 # v-model改進的地方,然後穿插的再說點Vue 的小知識。

在 Vue 中,有許多方法和 Angular 相似,這主要是因為 Angular 是 Vue 早期開發的靈感來源。然而,Augular 中存在許多問題,在 Vue 中已經解決。


v-model 用在input 元素上時

v-model雖然很像使用了雙向資料綁定的Angular 的 #ng- model,但Vue 是單一資料流,v-model 只是語法糖而已:↓

<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
登入後複製

第一行的程式碼其實只是第二行的語法糖。然後第二行程式碼還能簡單寫成這樣:↓

<input :value="sth" @input="sth = $event.target.value" />
登入後複製

要理解這行程式碼,首先你要知道 input 元素本身有個 oninput 事件,這是HTML5 新增加的,類似 onchange ,每當輸入方塊內容變化,就會觸發 oninput ,將最新的value交給 sth
如果你不知道 $event 是從哪裡來的,那你需要點選它再複習一下文件。

我們仔細觀察語法糖和原始語法那兩行程式碼,可以得出一個結論:

在給 元素加上v-model 屬性時,預設會把value 作為元素的屬性,然後把'input' 事件當作即時傳遞value 的觸發事件


v-model 用在元件上時

##v-model 不只能在 input上使用,在元件上也能使用,以下是和Vue 官網教學類似的例子(看這個範例時我們要考慮兩個問題):


實例示範.gif
父元件的 

price 的初始值是100,改變子元件的值能即時更新父元件的 price

<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?1.1.11"></script><script>Vue.component(&#39;currency-input&#39;, {
  template: `
    <span>
      <input
        ref="input"
        :value="value"
        <!--为什么这里把 &#39;input&#39; 作为触发事件的事件名?`input` 在哪定义的?-->
        @input="$emit(&#39;input&#39;, $event.target.value)"
      >
    </span>
  `,
  props: [&#39;value&#39;],// 为什么这里要用 value 属性,value在哪里定义的?貌似没找到啊?
})var demo = new Vue({
  el: &#39;#demo&#39;,
  data: {
    price: 100,
  }
})</script>
登入後複製


如果你知道這兩個問題的答案,那麼恭喜你真正掌握了 

v-model,如果你沒明白,那麼可以看下這段程式碼:↓

<currency-input v-model="price"></currentcy-input><!--上行代码是下行的语法糖
  <currency-input :value="price" @input="price = arguments[0]"></currency-input>
-->
登入後複製

現在你知道 

value 和 input 從哪裡來的了吧。與上面總結的類似:

給元件加上v-model 屬性時,預設會把value 作為元件的屬性,然後把'input' 值當作給元件綁定事件時的事件名稱


v-model 的缺點和解決方案

在建立類似複選框或單選框的常見元件時,

v-model就不好用了。

<input type="checkbox" v-model="sth" />
登入後複製

v-model 給我們提供了 value 屬性和 oninput 事件,但是,我們需要的不是 value 屬性,而是 checked 屬性,並且當你點選這個單選框的時候不會觸發 oninput 事件,它只會觸發 onchange 事件。這就尷尬了

以上是Vue 進階教學之:v-model的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!