Vue学习之路第九篇:双向数据绑定 v-model指令

Posted shibin90

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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指令的主要内容,如果未能解决你的问题,请参考以下文章

10《Vue 入门教程》Vue 双向绑定指令

Vue学习Vue高级特性

vue3自定义组件使用v-model实现双向数据绑定

VUE学习笔记:7.v-model指令讲解

Vue—数据的双向绑定v-model

#Java学习之路——基础阶段二(第九篇)