博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue之单表输入绑定
阅读量:2177 次
发布时间:2019-05-01

本文共 1797 字,大约阅读时间需要 5 分钟。

vue的核心:声明式的指令和数据的双向绑定。

那么声明式的指令,已经给大家介绍完了。接下来我们来研究一下什么是数据的双向绑定?

另外,大家一定要知道vue的设计模式:MVVM

M是Model的简写,V是View的简写,VM就是ViewModel。

单向绑定和双向绑定的区别?

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

有单向绑定,就有双向绑定。

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

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

其实单项数据也有双向绑定的意思,不过页面变动后数据的变化不会发生自动更新。

我们可以这样认为:双向数据绑定=单向数据绑定+UI事件监听。

我们先看个vue中双向数据绑定的例子:

  

{

{data}}

再简单不过了,效果显示,当我们在input输入框中输入内容的时候,下面p标签同步显示内容。这就是最典型的双向数据绑定的例子。vue里使用v-model实现此想法。

 

那么我们看一下v-model的实现原理是怎样的呢?

首先大家一定要知道,官网上介绍的。

通过官网的介绍,我们知道v-mode指令是v-bind:vlaue 和v-on:input的结合体。

看个例子吧,同时给大家介绍了计算属性getter的用法。

 

var set = new Vue({            el:'#set',            data:{                username:'',                txt:''            },            methods:{                commitHandler(){                                        this.$refs.item.innerHTML = this.usernameValue;                },                inputHandler(e){                    this.usernameValue = e.target.value;                }            },            computed:{                usernameValue:{                    get(){                        return this.username;                    },                    set(newValue){                        this.username = newValue;                    }                }            }

看完上个例子之后,相信大家对v-model实现双向数据绑定和计算属性的setter方法一定有个新的认识了。

接下来我们看看v-model的一些基础用法!

v-model

v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

v-model只适用在表单控件中

比如:表单文本、多行文本、复选框、单选按钮、多选按钮、选择框。内容太多,就不给大家一一阐述了。大家一定要去阅读vue的官网文档

 

ps:官网上的vue的文档非常好,喜欢vue的同学没事多来看看!1

转载地址:http://vaykb.baihongyu.com/

你可能感兴趣的文章
PHP项目用xhprof性能分析(安装及应用实例)
查看>>
composer安装YII
查看>>
Sublime text3快捷键演示
查看>>
sublime text3 快捷键修改
查看>>
关于PHP几点建议
查看>>
硬盘的接口、协议
查看>>
VLAN与子网划分区别
查看>>
Cisco Packet Tracer教程
查看>>
02. 交换机的基本配置和管理
查看>>
03. 交换机的Telnet远程登陆配置
查看>>
微信小程序-调用-腾讯视频-解决方案
查看>>
phpStudy安装yaf扩展
查看>>
密码 加密 加盐 常用操作记录
查看>>
TP 分页后,调用指定页。
查看>>
Oracle数据库中的(+)连接
查看>>
java-oracle中几十个实用的PL/SQL
查看>>
PLSQL常用方法汇总
查看>>
几个基本的 Sql Plus 命令 和 例子
查看>>
PLSQL单行函数和组函数详解
查看>>
Oracle PL/SQL语言初级教程之异常处理
查看>>