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 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
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
PHP新手上路(八)
2006/10/09 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python3判断url链接是否为404的方法
2018/08/10 Python
django框架auth模块用法实例详解
2019/12/10 Python
python模拟斗地主发牌
2020/04/22 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python json格式化打印实现过程解析
2020/07/21 Python
基于python实现复制文件并重命名
2020/09/16 Python
python实现ping命令小程序
2020/12/28 Python
链表面试题-一个链表的结点结构
2015/05/04 面试题
Final类有什么特点
2012/04/25 面试题
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
党员个人对照检查材料
2014/10/01 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫