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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
初学Python实用技巧两则
2014/08/29 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
浅谈Python的异常处理
2016/06/19 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
自考毕业自我鉴定范文
2013/10/27 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
高中生家长寄语大全
2014/04/03 职场文书
学校师德承诺书
2014/05/23 职场文书
校运会口号
2014/06/18 职场文书
就业意向书
2014/07/29 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python