1.什么是双向数据绑定

　　Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

　　值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

2.v-model

　　 v-model  指令在表单  <input> 、 <textarea>  及  <select>  元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

　　注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

　　语法： v-model="vue中需要展示的内容"

单行文本：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--view层模块-->

 <div id="vue">

     单行文本：<input type="text" v-model="message" value="hello" />&nbsp;&nbsp;单行文本是：{{message}}

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',

         data: {

             message: "第一个Vue项目"

         },

     });

 </script>

 </body>

 </html>

多行文本：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--view层模块-->

 <div id="vue">

     多行文本：<textarea v-model="message"></textarea>&nbsp;&nbsp;多行文本是：{{message}}

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',

         data: {

             message: "第一个Vue项目"

         },

     });

 </script>

 </body>

 </html>

单选按钮：

　　注：v-model中绑定的属性的值必须与标签的value属性相同。

　　v-model中的sex：”男“  === input中的value=”男“相同

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--view层模块-->

 <div id="vue">

     单选按钮：

     <input type="radio" id="one" value="One" v-model="picked">

     <label for="one">One</label>

     <input type="radio" id="two" value="Two" v-model="picked">

     <label for="two">Two</label>

     <span>选中的值: {{ picked }}</span>

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',

         data: {

             picked: "One"

         },

     });

 </script>

 </body>

 </html>

补充知识：

　　html的label标签的for属性绑定对应于input标签的id属性，用于聚焦的功能

　　当点击label标签时，就相当于点击了input标签让内容发生改变。

     <input type="radio" id="one" value="One" v-model="picked">

     <label for="one">One</label>

     <input type="radio" id="two" value="Two" v-model="picked">

     <label for="two">Two</label>　

复选框：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--view层模块-->

 <div id="vue">

     复选框：

     <input type="checkbox" id="checkbox" v-model="checked">

     &nbsp;&nbsp;

     <label for="checkbox">{{ checked }}</label>

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',

         data: {

             // message: "第一个Vue项目"

             checked: true

         },

     });

 </script>

 </body>

 </html>

下拉框：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--view层模块-->

 <div id="vue">

     下拉框：

     <select v-model="selected">

         <option disabled value="">请选择</option>

         <option>A</option>

         <option>B</option>

         <option>C</option>

     </select>

     <span>选中的值: {{ selected }}</span>

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',

         data: {

             selected: ''

         },

     });

 </script>

 </body>

 </html>

　　注意：如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

4.Vue双向绑定的更多相关文章

  1. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  2. IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

    先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...

  3. Vue双向绑定原理，教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  4. 梳理vue双向绑定的实现原理

    Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...

  5. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  6. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  7. vue双向绑定原理源码解析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...

  8. Vue双向绑定实现原理demo

    一.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  9. Vue双向绑定原理（源码解析）---getter setter

       Vue双向绑定原理      大部分都知道Vue是采用的是对象的get 和set方法来实现数据的双向绑定的过程,本章将讨论他是怎么利用他实现的. vue双向绑定其实是采用的观察者模式,get和s ...

  10. Vue双向绑定原理及其实现

    在之前面试的时候被面试官问到是否了解Vue双向绑定的原理,其实自己之前看过双向绑定的原理,但也就是粗略的了解,但是没有深入.面试官当时让我手写一个原理,但是就蒙了

随机推荐

  1. 转:xcode项目打不开:incompatible project version问题

    这个是xcode版本对应不上,不一定要修改版本,我们修改记录版本的文件里面的版本号就行了. 低版本xcode打开高版本xcode项目或库工程的时候就会出现,打不开的问题 解决 1可以重建创建工程,将文 ...

  2. Vue.js 源码分析(二) 基础篇 全局配置

    Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies        ;自定义合并策略的选项silent         ...

  3. mybaties报错：There is no getter for property named 'table' in 'class java.lang.String'

    报错是由于xml里获取不到这个table参数 package com.xxx.mapper; import java.util.List; import org.apache.ibatis.annot ...

  4. JVM的内存分配策略

    1.对象优先在Eden区分配大多数情况下,对象在新生代Eden区中分配.当Eden区没有足够空间进行分配时,虚拟机将发起一次Minor GC. 2.大对象直接进入老年代 所谓的大对象是指,需要大量连续 ...

  5. 【UOJ#82】【UR #7】水题生成器（贪心）

    [UOJ#82][UR #7]水题生成器(贪心) 题面 UOJ 题解 把\(n!\)的所有约数搜出来,这个个数不会很多. 然后从大往小能选则选就好了. #include<iostream> ...

  6. Java编程基础——常量变量和数据类型

    Java编程基础——常量变量和数据类型 摘要:本文介绍了Java编程语言的常量变量和数据类型. 常量变量 常量的定义 一块内存中的数据存储空间,里面的数据不可以更改. 变量的定义 一块内存中的数据存储 ...

  7. 腾讯WeTest携手拉夏贝尔共筑电商小程序安全壁垒

    上海拉夏贝尔服饰股份有限公司成立于1998年,是中国快速发展的多品牌时尚运营企业.La Chapelle品牌创立初衷正是希望通过精美别致的时装设计,将法式优雅精致的风情元素和对生活的认知感悟传递给都市 ...

  8. redis笔记3

    redis持久化机制 redis提供了两种持久化策略 RDB RDB的持久化策略: 按照规则定时将内存的数据同步到磁盘 snapshot redis在指定的情况下会触发快照 自己配置的快照规则 sav ...

  9. elasticsearch7 配置篇

    学习了这么多,终于开始搭建生产环境了,这一篇主要讲解配置项,以及支持中文分词的ik安装,集群的搭建. 配置项确实挺多的,但把几个常用配置熟悉就好,而且就像elasticsearch官方文档所说,不存在 ...

  10. Java打印9*9乘法表

    废话不多说直接贴代码, 先放一个标准的正三角形状的 for (int i = 1; i <= 9; i++) { for (int j = 1; j <= i; j++) { System ...