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

v-model 用在组件上时

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

<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' 值作为给组件绑定事件时的事件名

https://www.cnblogs.com/coffeelovetea/p/8326115.html(关于v-model更详细解释)

vue2进阶之v-model在组件上的使用的更多相关文章

  1. python3-开发进阶Django-form组件中model form组件

    Django的model form组件 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,先来一个简单的例子来看一下这个东西怎么用:比如我们的数据库中有这样 ...

  2. vue 基础--&gt;进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  3. Django的model form组件

    前言 首先对于form组件通过全面的博客介绍,对于form我们应该知道了它的大致用法,这里我们需要明确的一点是,我们定义的form与model其实没有什么关系,只是在逻辑上定义form的时候字段名期的 ...

  4. Django 的 model form 组件

    Django 的 model form 组件 Model Form 组件的由来 之前介绍过 Django 的 Form 组件(Django的Form表单)使用方法,Form 组件能够帮我们做三件事: ...

  5. amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  6. 微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是c ...

  7. 组件上使用v-model

    组件上使用v-model <input v-model="searchText"> 等价于 <input v-bind:value="searchTex ...

  8. vue 学习六 在组件上使用v-model

    其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...

  9. 【AutoMapper官方文档】DTO与Domin Model相互转换(上)

    写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...

随机推荐

  1. sqlserver中自定义函数+存储过程实现批量删除

    由于项目的需要,很多模块都要实现批量删除的功能.为了方便模块的调用,把批量删除方法写成自定义函数.直接上代码. 自定义函数: ALTER FUNCTION [dbo].[func_SplitById] ...

  2. 【Spring-AOP-1】AOP相关概念

    Advice (好多中文书籍翻译为:增强处理,比如前向增强.后向增强等) 描述了Aspect类执行的具体动作.the job of an aspect. 定义了如下两个方面: what:即Aspect ...

  3. Oracle -&gt;&gt; 变量赋值 Demo

    刚学Oracle,学习学习别人的代码.这段代码时从下面的博文中摘取的:http://www.cnblogs.com/mq0036/p/4155774.html declare l_dept ; cur ...

  4. SQL 三种基本Join

    Join是关系型数据库系统的重要操作之一,SQL常用Join:内联接.外联接和交叉联接等. 这里讨论一下这常用的三种连接. 测试环境:db2 v10.1, linux 表定义: --用户 CREATE ...

  5. IOT

    文档地址:http://www.owasp.org.cn/owasp-project/owasp-things?searchterm=iot 今天面试,面试官问到iot

  6. WIndows下使用Grafana+InfluxDB打造监控系统

     前言 对于一个运维DBA来说,了解数据库的TPS.QPS很有必要(QPS:每秒查询数,即对数据库每秒的DML的操作数:TPS:每秒事物处理,即对数据库每秒DDL操作数),通过了解他们,可以掌握一个实 ...

  7. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

  8. CentOS7防火墙之firewalld

    今天在centos7上装mysql8,装好了之后发现主机的navicat始终连不上centos中的mysql 搜索发现是防火墙的问题,已查看iptables,嗯?没有了这个防火墙,原来centos换防 ...

  9. 在windows 2008 R2中SQl Server 2008中代理启动失败的一个原因总结

    启动SQL代理的时候报错如下: 关调用实时(JIT)调试而不是此对话框的详细信息,请参见此消息的结尾. ************** 异常文本 **************System.NullRef ...

  10. Java 实验案例(多态)

    实验任务 任务一:图形面积周长计算小程序 任务二:饲养员喂养动物程序 实验内容: 任务一: 图形面积周长计算 任务目的: 掌握多态的含义及应用场合 掌握上转型对象和多态的实现 掌握abstract关键 ...