山地人

输入数据

山地人
山地人
2021-05-13

Web应用中,我们经常会用到输入,登录网站需要输入,填写收获地址,问卷调查等等。而这里面最常用的组件是<input>输入框。

下面,我们看看输入框在Vue中如何应用。

代码分析

这里我们用到了一个新的指令v-model,这个指令的作用是帮我们把data中的响应式数据和输入控件input建立双向绑定的关系。

双向绑定

如上面的message,在发生变化时,会更改页面上的数据,当页面上input内容被修改后,会自动更新到message数据上。

v-model的本质是: v-bind + onchangemessage通过v-bind和界面元素input建立绑定关系,界面input元素的onchange和message建立绑定关系。

用一个直观的方式表示:

data <--> view

数据变化会更新视图,同时视图的变化也能更新数据,这种被称为双向绑定。

执行流程分析

Vue解析阶段

  1. Vue在处理input标签时,解析v-model指令,对input的value值绑定了message,同时对onchange设置了更新message
  2. Vue在处理p标签,发现其内部的{{message}},于是将p标签的内容绑定到message

Vue运行阶段

  1. 你在浏览器上看到inputp都显示了Hello!这是因为这两个标签都绑定了message这个响应式的数据。
  2. 当你在输入框中输入内容后,inputp的内容都更新成了新的内容。这是因为input通过onchange事件把新的内容更新回了message字段。

等价的Vue做法

下面的例子将v-model的过程拆开,我们使用vuev-bindv-on:input来演示这个过程。

原生JavaScript写法

下面的写法是脱离vue框架的写法,通过三种写法的对比,我们可以更好的体会框架的作用。

  • 使用框架后,框架把DOM操作维护的过程进行了封装。我们更多的时候可以把注意力集中到数据的处理和业务表达上。当然,缺点就是要增加框架代码,另外我们还要接受框架下的书写规则。
  • 不使用框架,我们可以获得最大的自由度,当然缺点就是我们需要自己赋值处理处理,DOM维护,等方方面面的问题。

所以对于是使用vue框架来接管还是使用原生js来操作,这个你得根据你的业务场景进行权衡。