Vue 进阶教程之v-model详解


Posted in Javascript onMay 06, 2017

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 是从哪来的,那你需要点击它再复习一下文档。

我们仔细观察语法糖和原始语法那两行代码,可以得出一个结论:

在给 <input /> 元素添加 v-model 属性时,默认会把 value 作为元素的属性,然后把 'input' 事件作为实时传递 value 的触发事件

v-model 用在组件上时

v-model 不仅仅能在 input上用,在组件上也能使用,下面是一个和 Vue 官网教程类似的例子(在看这个例子时我们要考虑两个问题):

Vue 进阶教程之v-model详解

父组件的 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"></script>
<script>
Vue.component('currency-input', {
 template: `
  <span>
   <input
    ref="input"
    :value="value"
    <!--为什么这里把 'input' 作为触发事件的事件名?`input` 在哪定义的?-->
    @input="$emit('input', $event.target.value)"
   >
  </span>
 `,
 props: ['value'],// 为什么这里要用 value 属性,value在哪里定义的?貌似没找到啊?
})

var demo = new Vue({
 el: '#demo',
 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 事件。这就尴尬了?

因为 v-model 只是用到了 input 元素上,所以这种情况好解决:↓

<input type="checkbox" :checked="status" @change="status = $event.target.checked" />

当 v-model 用到组件上时:↓

<my-checkbox v-model="foo"></my-checkbox>

Vue.component('my-checkbox', {
 tempalte: `<input 
        type="checkbox"
        @change="$emit('input', $event.target.checked)"
        :checked="value"
       />`
 props: ['value'],
})

在 Vue 2.2 版本,你可以在定义组件时通过 mode l选项的方式来定制 prop/event:↓

<my-checkbox v-model="foo"></my-checkbox>

Vue.component('my-checkbox', {
 tempalte: `<input 
        type="checkbox"
        <!--这里就不用 input 了,而是 balabala-->
        @change="$emit('balabala', $event.target.checked)"
        :checked="value"
       />`
 props: ['checked'], //这里就不用 value 了,而是 checked
 model: {
  prop: 'checked',
  event: 'balabala'
 },
})

看到这里我相信你肯定理解了 Vue 的 v-model,文中如有错误,欢迎在评论中指出谢谢。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
Vue简单实现原理详解
May 07 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
CocosCreator入门教程之网络通信
Apr 16 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
AngularJS封装$http.post()实例详解
May 06 #Javascript
JavaScript瀑布流布局实现代码
May 06 #Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 #jQuery
jQuery extend()详解及简单实例
May 06 #jQuery
jquery仿微信聊天界面
May 06 #jQuery
Javascript实现页面滚动时导航智能定位
May 06 #Javascript
You might like
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
javascript this详细介绍
2016/09/19 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python pickle模块用法实例分析
2015/05/27 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python把转列表为集合的方法
2019/06/28 Python
python装饰器的特性原理详解
2019/12/25 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
python中entry用法讲解
2020/12/04 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
自荐信格式的六要素
2013/09/21 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
创业计划书撰写原则
2014/01/25 职场文书
村干部培训班主持词
2014/03/28 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
光荣之路观后感
2015/06/12 职场文书