基礎用法:
v-model
本質上不過是語法糖,常見可以用 v-model 指令在表單 <input>
、<textarea>
及 <select>
元素上創建雙向數據綁定。
本質上:
v-model是vue的一個語法糖,一個是v-bind去單項綁定vue實例里面的data數據,然后再通過各種事件比如@change @input等去進行觸發事件修改實例數據的值,
如果在vuex中需要去綁定store里面的數據,則需要通過dispatch一個action,然后action再去提交mutation修改store里面的值
底層實現:
核心是Object.defineProperty()
方法,那接下來我們就簡單介紹一下!
語法:
Object.defineProperty(obj, prop, descriptor)
其中:
obj
要在其上定義屬性的對象。
prop
要定義或修改的屬性的名稱。
descriptor
將被定義或修改的屬性描述符。
其實,簡單點來說,就是通過此方法來定義一個值。
調用,使用到了get方法,
賦值,使用到了set方法。
我們來看個例子熱熱身:
沒過癮?
那再看這鏈接中寫的更詳細,3分鍾左右即可食用完