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指令的更多相关文章

  1. Vue学习之路第一篇（学习准备）

    1.开发工具的选择 这个和个人的开发习惯有关,并不做强求,厉害的话用记事本也可以.但是我还是建议用人气比较高的编辑工具,毕竟功能比较全面,开发起来效率比较高. 我之前写前端一直用的是sublimete ...

  2. vue学习指南：第九篇(详细) - Vue的 Slot-插槽

    Slot  v-slot 插槽元素 浏览器在解析时候首先把它当作标签来解析,只有遇到不认识的就不管了,直接跳过,当你发现是组件,在以组件形式解析. 使用插槽的好处? 比如一个网站 分布顶部都是一样的, ...

  3. Vue学习之路第二篇：插值表达式

    要开始写Vue的功能了,是不是很激动呢!开始吧! 1.首先建立一个html页面,导入Vue js包 <script type="text/javascript" src=&q ...

  4. vue学习之路 - 4.基本操作（下）

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

  5. STM32学习之路入门篇之指令集及cortex——m3的存储系统

    STM32学习之路入门篇之指令集及cortex——m3的存储系统 一.汇编语言基础 一).汇编语言:基本语法 1.汇编指令最典型的书写模式: 标号 操作码        操作数1, 操作数2,... ...

  6. Vue学习之路之登录注册实例代码

    Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...

  7. Qt 学习之路 2（41）：model/view 架构

    Qt 学习之路 2(41):model/view 架构 豆子 2013年1月23日 Qt 学习之路 2 50条评论 有时,我们的系统需要显示大量数据,比如从数据库中读取数据,以自己的方式显示在自己的应 ...

  8. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  9. Vue学习之路第十一篇：为页面元素设置class类样式

    1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...

随机推荐

  1. 用SufaceGO加微软全家桶做个遥控车（一）

    作为一个dotnet技术的新手我是不好意思写帖子的,原因就是本人技术太水了,写出的帖子肯定会让人笑话.所以这次我是厚着脸皮写出这个帖子的,希望大佬们轻喷了.我的目标就是用SurfaceGo实现一个和我 ...

  2. react实现简单倒计时

    今天遇到一个简单的小功能,看网上的一些方法感觉不太适合,所以就手敲了一个,直接上代码!!! import React, { Component } from 'react'; class NoTime ...

  3. Python 安装 numpy 以及 matplotlib 的过程

    系统:ubuntu 16.04 版本:Python3.5 步骤: 安装 pip sudo apt install python3-pip 查看 pip list 是否有 numpy 以及 matplo ...

  4. 训练1-B

    杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除个别的士司机和乘客的心理障碍 ...

  5. 关于sql连接查询（内联、左联、右联、全联）

    内连接(INNER JOIN)(典型的连接运算,使用像   =   或   <>   之类的比较运算符).包括相等连接和自然连接. 内连接使用比较运算符根据每个表共有的列的值匹配两个表中的 ...

  6. crm2013使用图片字段

    在CRM2013能够加入图片字段(一个实体仅仅能加入一个图片字段) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveV9mMTIz/font/5a6L5L2 ...

  7. TCO 2015 2D

    250分题:给一段仅仅有'0','1'构成的字符串,然后给出串上平衡点的定义:在串上找到某个点(位置是p),这个点将串分成左右两部分(能够为空),左右分别计算字符的值的和,假设左边有字符是'1',那么 ...

  8. scikit-learn系列之如何存储和导入机器学习模型

    scikit-learn系列之如何存储和导入机器学习模型   如何存储和导入机器学习模型 找到一个准确的机器学习模型,你的项目并没有完成.本文中你将学习如何使用scikit-learn来存储和导入机器 ...

  9. nyoj--16--矩形嵌套(动态规划)

    矩形嵌套 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a< ...

  10. Regexp-Utils：身份证号校验

    ylbtech-Regexp-Utils:身份证号校验 1.返回顶部 1.方法 var idCardNoUtil = { /*省,直辖市代码表*/ provinceAndCitys: { 11: &q ...