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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
浅谈javascript中的闭包
May 13 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
webpack优化的深入理解
Dec 10 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 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
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
python的re模块使用方法详解
2019/07/26 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
python实现图片横向和纵向拼接
2020/03/05 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
创先争优制度
2014/01/21 职场文书
联谊活动策划书
2014/01/26 职场文书
老龄工作先进事迹
2014/08/15 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书