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自动切换tabs选项卡的具体实现
Dec 24 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
小程序云开发实战小结
Oct 25 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
jQuery实现简单全选框
Sep 13 jQuery
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
投票管理程序
2006/10/09 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
json简单介绍
2008/06/10 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
如何利用python发送邮件
2020/09/26 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
读书心得体会
2013/12/28 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
见习报告的格式
2014/10/31 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
三年级作文之趣事作文
2019/11/04 职场文书