html双向绑定,双向绑定
单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
有单向绑定，就有双向绑定。如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。
什么情况下用户可以更新View呢？填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定：
在浏览器中，当用户修改了表单的内容时，我们绑定的Model会自动更新：
在Vue中，使用双向绑定非常容易，我们仍然先创建一个VM实例：
$(function () {
var vm = new Vue({
el: '#vm',
data: {
email: '',
name: ''
}
});
window.vm = vm;
});
然后，编写一个HTML FORM表单，并用v-model指令把某个和Model的某个属性作双向绑定：
我们可以在表单中输入内容，然后在浏览器console中用window.vm.$data查看Model的内容，也可以用window.vm.name查看Model的name属性，它的值和FORM表单对应的是一致的。
如果在浏览器console中用JavaScript更新Model，例如，执行window.vm.name='Bob'，表单对应的内容就会立刻更新。
除了可以和字符串类型的属性绑定外，其他类型的也可以和相应数据类型绑定：
多个checkbox可以和数组绑定：
Chinese
English
French
对应的Model为：
language: ['zh', 'en']
单个checkbox可以和boolean类型变量绑定：
对应的Model为：
subscribe: true; // 根据checkbox是否选中为true/false
下拉框绑定的是字符串，但是要注意，绑定的是value而非用户看到的文本：
Beijing
Shanghai
Guangzhou
对应的Model为：
city: 'bj' // 对应option的value
双向绑定最大的好处是我们不再需要用jQuery去查询表单的状态，而是直接获得了用JavaScript对象表示的Model。
处理事件
当用户提交表单时，传统的做法是响应onsubmit事件，用jQuery获取表单内容，检查输入是否有效，最后提交表单，或者用AJAX提交表单。
现在，获取表单内容已经不需要了，因为双向绑定直接让我们获得了表单内容，并且获得了合适的数据类型。
响应onsubmit事件也可以放到VM中。我们在
元素上使用指令：
其中，v-on:submit="register"指令就会自动监听表单的submit事件，并调用register方法处理该事件。使用.prevent表示阻止事件冒泡，这样，浏览器不再处理
的submit事件。
因为我们指定了事件处理函数是register，所以需要在创建VM时添加一个register函数：
var vm = new Vue({
el: '#vm',
data: {
...
},
methods: {
register: function () {
// 显示JSON格式的Model:
alert(JSON.stringify(this.$data));
// TODO: AJAX POST...
}
}
});
在register()函数内部，我们可以用AJAX把JSON格式的Model发送给服务器，就完成了用户注册的功能。
使用CSS修饰后的页面效果如下：
参考源码
html双向绑定,双向绑定相关推荐
- vue 单向绑定 双向绑定
参考:[Vue]vue 单向绑定& 双向绑定 - vickylinj - 博客园 在react中是单向数据绑定,而Vue.js 最显著的特点就是响应式和数据驱动,也就是将Model和View进 ...
- 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换...
重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换 原文: ...
- 背水一战 Windows 10 (19) - 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定...
原文:背水一战 Windows 10 (19) - 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定 [源码下载] 背水 ...
- spinbox 上下箭头事件_[React] 3 - 自动绑定 (事件绑定)
1. 自动绑定 (事件绑定) 绑定this: React为什么要这么做? 是js中this绑定方式决定的,和react工作方式无关. 函数处理, 是作为回调传递的,这样就会丢失了上下文, 所以this ...
- Angular中数据文本绑定、绑定Html、绑定属性、双向数据绑定的实现方式
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
- WCF绑定细节（2）——绑定，绑定元素
绑定这块引出了很多细节.绑定解决了消息交换中的传输协议,传输,编码等问题.如果要公开WCF服务,就要公开终结点Endpoint,WCF服务信息交换就是Endpoint之间的信息交换.终结点三大元素:A ...
- angular移除事件绑定事件绑定_Vue.js子组件利用事件向父组件传输数据，以及sync修饰符和双向绑定...
在Vue.js的组件中,prop是"单向绑定"的,数据只能从父组件传输到子组件.Vue文档中的说了这样做的原因: 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑 ...
- vue双向数据绑定v-model绑定单选框，复选框，下拉框
v-model使用 1. 简单的demo 2. 三种框的绑定 注意它是自动帮你确认值的!!!无需关心过程,把json数据一丢到data中,自动选中. 1. 简单的demo 实现一边在输入框输入,一边显 ...
- 早绑定,晚绑定和其实现
早绑定,晚绑定,早晚都要绑定--引用网友的话 绑定:在对象和其类型间建立关联的过程 早绑定指在对象申明的时候就和他的类型建立了关联 晚绑定是指我们的代码在运行时再检查对象是否提供了我们所需要的方法和属 ...
- 迟绑定早绑定，迟早都要绑定
1. 概念 首先,什么是绑定?( what`s the definition of binding? ) c++编程思想上有说到: Connecting a function call ...
最新文章
- HTML5 Web SQL
- ZoomBlur 聚焦模糊效果Shader（URP）
- 微信或正测试“发送语音过程”转文字功能 部分安卓用户可用
- LeetCode:Restore IP Addresses
- 细粒度审计导致SYSTEM表空间异常引发ORA-01653同时性能异常
- 华为手机安装软件出现签名不一致
- D1,4CIF,CIF,QCIF各代表的分辨率大小
- 一键解决局域网共享之批处理
- python程序题库-python题库-Python,题库
- Word2010页眉添加两条横线
- Rational Team Concert 2
- yolov3批量测试并存在自己定义的路径（linux，Joseph Redmon，c版本）
- php实现emoji表情包的数据库存储和展示
- matlab模拟薄膜振动,（数理方程）Matlab模拟琴弦振动发声并显示振动图像
- eNSP-配置路由器console接口密码与vty接口密码以及ftp服务
- win10 bat执行cmd命令
- Simulink—PMSM电机模块介绍
- 360安全卫士如何关闭弹窗广告
- HUST高级软件工程--测试管理工具实践--Day4
- 循环冗余校验检错方案