v-model原理
vue.js中我们也没少用v-model,知道怎么去用,但是却不知其实现底层。
其实谈陌生有很熟悉,那就了解下其底层实现原理吧。
实际上v-model是vue的一个语法糖,一个是v-bind去单项绑定vue实例里面的data数据,然后再通过各种事件比如@change @input等去进行触发事件修改实例数据的值,如果在vuex中需要去绑定store里面的数据,则需要通过dispatch一个action,然后action再去提交mutation修改store里面的值
记住Vue是单项数据流,而v-model只是一种语法糖,使用了双向数据绑定v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但是 Vue 是单项数据流,v-model 只是语法糖而已:↓
v-model缺点
v-model 应用到组件上,会有一些体验不好的场景。因为它默认会把 value 作为组件的属性,把 input作为给组件绑定事件时的事件名。
有时间我们不想用 value 当做默认的属性名,也不想把 input 当做事件名。能不能自定义呢?在 Vue 2.2 及以上版本,你可以在定义组件时通过 model 选项的方式来定制 prop/event
1 <div id="app">
2 <div>{
{
msg}}</div