双向绑定

简介: 双向绑定

双向绑定


单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。


有单向绑定,就有双向绑定。如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。


什么情况下用户可以更新View呢?填写表单就是一个最直接的例子。当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定:

image.png


在浏览器中,当用户修改了表单的内容时,我们绑定的Model会自动更新:


image.png

在Vue中,使用双向绑定非常容易,我们仍然先创建一个VM实例:


$(function () {
    var vm = new Vue({
        el: '#vm',
        data: {
            email: '',
            name: ''
        }
    });
    window.vm = vm;
});


然后,编写一个HTML FORM表单,并用v-model指令把某个<input>和Model的某个属性作双向绑定:


<form id="vm" action="#">
    <p><input v-model="email"></p>
    <p><input v-model="name"></p>
</form>

我们可以在表单中输入内容,然后在浏览器console中用window.vm.$data查看Model的内容,也可以用window.vm.name查看Model的name属性,它的值和FORM表单对应的<input>是一致的。


如果在浏览器console中用JavaScript更新Model,例如,执行window.vm.name='Bob',表单对应的<input>内容就会立刻更新。


除了<input type="text">可以和字符串类型的属性绑定外,其他类型的<input>也可以和相应数据类型绑定:


多个checkbox可以和数组绑定:


<label><input type="checkbox" v-model="language" value="zh"> Chinese</label>
<label><input type="checkbox" v-model="language" value="en"> English</label>
<label><input type="checkbox" v-model="language" value="fr"> French</label>


对应的Model为:


language: ['zh', 'en']


单个checkbox可以和boolean类型变量绑定:


<input type="checkbox" v-model="subscribe">


对应的Model为:


subscribe: true; // 根据checkbox是否选中为true/false


下拉框<select>绑定的是字符串,但是要注意,绑定的是value而非用户看到的文本:


<select v-model="city">
    <option value="bj">Beijing</option>
    <option value="sh">Shanghai</option>
    <option value="gz">Guangzhou</option>
</select>


对应的Model为:


city: 'bj' // 对应option的value


双向绑定最大的好处是我们不再需要用jQuery去查询表单的状态,而是直接获得了用JavaScript对象表示的Model。


处理事件


当用户提交表单时,传统的做法是响应onsubmit事件,用jQuery获取表单内容,检查输入是否有效,最后提交表单,或者用AJAX提交表单。


现在,获取表单内容已经不需要了,因为双向绑定直接让我们获得了表单内容,并且获得了合适的数据类型。


响应onsubmit事件也可以放到VM中。我们在<form>元素上使用指令:


<form id="vm" v-on:submit.prevent="register">


其中,v-on:submit="register"指令就会自动监听表单的submit事件,并调用register方法处理该事件。使用.prevent表示阻止事件冒泡,这样,浏览器不再处理<form>的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修饰后的页面效果如下:


image.png

相关文章
|
监控 Kubernetes 数据库
实时计算 Flink版产品使用合集之如何实时监控和捕获数据表结构的变化
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStreamAPI、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
|
12月前
|
XML JavaScript Java
NekoHTML 是一个基于Java的HTML扫描器和标签补全器
**NekoHTML** 是一个基于Java的HTML扫描器和标签补全器(tag balancer),由J. Andrew Clark开发。它主要用于解析HTML文档,并能够“修正”许多在编写HTML文档过程中常犯的错误,如增补缺失的父元素、自动用结束标签关闭相应的元素,以及处理不匹配的内嵌元素标签等。这使得程序能够以标准的XML接口来访问HTML文档中的信息。 ### NekoHTML的主要特点包括: 1. **错误修正**:能够自动修正HTML中的常见错误,如未闭合的标签等。 2. **DOM树生成**:将HTML源代码转化为DOM(Document Object Model)结构,便
163 1
|
12月前
|
Python
pandas包的安装和Could not find a version that satisfies|9
pandas包的安装和Could not find a version that satisfies|9
338 8
|
12月前
|
SQL 关系型数据库 数据库
pgAdmin4如何查看当前的scheme默认是哪个
pgAdmin4如何查看当前的scheme默认是哪个
233 4
|
12月前
|
C语言 Python
有一个已经排好序的数组。现输入一个数,要求按原来的规律将它插入数组中。
有一个已经排好序的数组。现输入一个数,要求按原来的规律将它插入数组中。
500 4
|
12月前
|
C语言 索引 Python
利用递归函数调用方式,将所输入的5个字符,以相反顺序打印出来。
利用递归函数调用方式,将所输入的5个字符,以相反顺序打印出来。
248 4
|
12月前
|
存储 C语言
一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?
一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?
375 4
|
12月前
|
存储 C语言 Python
求1+2!+3!+…+20!的和
求1+2!+3!+…+20!的和
217 3
|
12月前
|
Python
Python之shutil库详解
Python之shutil库详解
272 3
|
12月前
|
消息中间件 Kafka API
python之kafka日志
python之kafka日志
134 3