Vue学习之路第九篇：双向数据绑定 v-model指令
1、学习准备：
①：双向数据绑定可以简单理解为：后端定义的数据改变，前端页面展示的时候会自动改变，数据通过前端页面修改的时候，后端定义的数据内容也会随之改变。
②：指令中只有v-model可以实现双向数据绑定。
③：v-model只能应用在表单元素中，如：input（radio、text、address、email...）、checkbox、select、textarea等。
2、先来看看单向绑定的例子：
<body>
<div id="app">
<h4>{{ msg }}</h4>
<input type="text" v-bind:value="msg"/>
</div> <script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : 'This is a msg'
},
methods : {}
});
</script>
</body>
这个时候我们 打开浏览器控制台输入：vm.msg，按下enter键查看对象属性。
接下来在控制台执行一条语句：vm.msg = 123 ，对msg数据重新赋值
可以看到我们在赋值的同时，页面的数据也随之发生了变化；那么我们再试试改变页面展示的数据，看看msg后台数据会不会发生变化。
我先在页面input框里加上了“aaa”，然后在页面控制台中输入vm.msg查看，发现其值没有发生变化，还是“123”，这就是数据单向绑定。很明显这是我们平时工作中常见的现象。
3、双向数据绑定的例子：
我们只需要修改input元素即可
<input type="text" v-model="msg"/>
可以看到我们连input框的value元素都不用写，直接用v-model指令即可，其值会默认赋值在value属性上（这也是为什么v-model仅局限于表单元素使用的原因）。
我们先在浏览器控制台中做赋值：vm.msg = 123，观察到页面数据也会随之变化。
然后我们在输入框中加上“神奇”二字，会发现input框上面的<h4>标签的文字会随之变化，控制台输入：vm.msg，其对象值也发生了变化，这就是双向数据绑定。
4、除了以上用法v-model指令后面还可以添加参数
①：lazy：将数据变化改到change事件中发生
<div id="app">
<h4>{{ msg }}</h4>
<input type="text" v-model.lazy="msg"/>
</div>
我们在v-model后加上了“.lazy”，这时我们在Input框里输入内容的时候，<h4>标签的内容不会马上变化，只有当输入完毕，光标不再聚焦于input框的时候，值才会同步，相当于change事件触发时才会同步数据。
②：还有一些参数，比如：number、debounce好像在vue2.0版本之后被移除了，大家有兴趣可以去vue官网或者论坛里看看，也许会有其他的一些参数或者替代方法。
每天进步一点点！
Vue学习之路第九篇：双向数据绑定 v-model指令的更多相关文章
- Vue学习之路第一篇（学习准备）
1.开发工具的选择 这个和个人的开发习惯有关,并不做强求,厉害的话用记事本也可以.但是我还是建议用人气比较高的编辑工具,毕竟功能比较全面,开发起来效率比较高. 我之前写前端一直用的是sublimete ...
- vue学习指南：第九篇(详细) - Vue的 Slot-插槽
Slot v-slot 插槽元素 浏览器在解析时候首先把它当作标签来解析,只有遇到不认识的就不管了,直接跳过,当你发现是组件,在以组件形式解析. 使用插槽的好处? 比如一个网站 分布顶部都是一样的, ...
- Vue学习之路第二篇：插值表达式
要开始写Vue的功能了,是不是很激动呢!开始吧! 1.首先建立一个html页面,导入Vue js包 <script type="text/javascript" src=&q ...
- vue学习之路 - 4.基本操作（下）
vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...
- STM32学习之路入门篇之指令集及cortex——m3的存储系统
STM32学习之路入门篇之指令集及cortex——m3的存储系统 一.汇编语言基础 一).汇编语言:基本语法 1.汇编指令最典型的书写模式: 标号 操作码 操作数1, 操作数2,... ...
- Vue学习之路之登录注册实例代码
Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...
- Qt 学习之路 2（41）：model/view 架构
Qt 学习之路 2(41):model/view 架构 豆子 2013年1月23日 Qt 学习之路 2 50条评论 有时,我们的系统需要显示大量数据,比如从数据库中读取数据,以自己的方式显示在自己的应 ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
随机推荐
- Codevs 1077 多源最短路（ Floyd水 ）
链接:传送门 思路:裸 Floyd /************************************************************************* > Fi ...
- 使用Ansible安装部署nginx+php+mysql之安装mysql(3)
三.使用Ansible安装mysql 1.mysq.yaml文件 - hosts: clong remote_user: root gather_facts: no tasks: # 安装rpm包 - ...
- cmake处理多源文件目录
cmake处理多源文件目录 假设我们的源文件全部在src中,则我们需要在子文件src中建立文件CmakeLists.txt,内容如下: AUX_SOURCE_DIRECTORY(. DIR_TEST_ ...
- SSH框架整合截图(二)
客户拜访管理 1 什么是客户拜访 (1)客户:与公司有业务往来的 (2)用户:可以使用系统的人 2 用户和客户关系 (1)用户和客户之间是拜访的关系 (2)用户 和 客户 是 多对多关系 ** 一个用 ...
- 公司组织oracle培训的理解
oracle执行机制 1.客户端发送一条sql给oracle服务器,oracle会看这条sql的执行计划是否存在缓存 如果存在则直接运行,如果不存在执行第二步. 2.如果不存在缓存 则会 进行语法检 ...
- mongodb 学习笔记 07 -- 数据备份、恢复
mongoexport 导出json或者csv格式 mongoimport 导入json或者csv mongodump 导出二进制bson结构数据以及索引信息 mongorestore 导入二进制文件 ...
- 为屏而生，为屏而死 － IT "精英”们的杯与具
为屏而生,为屏而死 - IT "精英"们的杯与具 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一 ...
- Bootstrap警告
警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 警告(Alerts) 步骤: 1.创建一个 <div> 2.并向其加入一个 .alert ...
- Android编程获取手机型号，本机电话号码，sdk版本号及firmware版本号号(即系统版本号号)
Android开发平台中,可通过TelephonyManager 获取本机号码. TelephonyManager phoneMgr=(TelephonyManager)this.getSystemS ...
- php静态函数的使用场景
php静态函数的使用场景 场景 代码 <?php class Conductor{ public static $i = 100; public function sold(){ $a = se ...