没时间学 Vue (4) —— 绑定（三）：面向各种文本框的 v-model

最新推荐文章于 2024-09-05 11:22:00 发布

原创最新推荐文章于 2024-09-05 11:22:00 发布 · 610 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

没时间学 Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用Vue.js的v-model指令与HTML的常见表单组件，如<input>、<textarea>和<select>进行交互。通过理解HTML原生元素的本质，运用第一性原理来推导Vue的用法，并通过实践验证。文中详细探讨了单行文本框、特殊类型的文本框和多行文本框的使用，并提供了示例代码。最后提出了关于v-model与双向数据绑定的思考，以及三个作业题目，引导读者进一步探索Vue的数据绑定机制。

今天接着将 v-model，顺带过一下常见的表单组件：<input>、<textarea> 和 <select>。

主要的内容，也还在 Vue 官方文档上：https://cn.vuejs.org/v2/guide/forms.html。

上述表单组件的较为详细的描述，还是参照：https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Basic_native_form_controls。

开工之前，咱们再提一个有效的合理偷懒的方法：

第一性原理 —— 理解本质（基本的法则），推导各式各样的用法，还可以按需灵活运用、发明新的用法

第一性原理思维被广为人知，可能还是钢铁侠埃隆·马斯克的功劳。

汽车是什么？只要能让轮子转起来就可以了。至于要怎么转起来呢？不一定非得是现有的气缸发动机，也可以用 7000 块笔记本锂电池 + 中学物理里学到的电磁发动机。

火箭是什么？只要推力足以摆脱地球引力就可以了。至于要怎么产生这么大的推力呢？我也不知道，不过据说埃神是从教科书里面自己推导了一套体系出来了。

以至于有人问他 “是不是只凭着看书就能造出火箭？” 的时候，他回答说：“当然不是。除了看书，你还得实验。”。

回到学 Vue 的话题上来，第一性原理就是：

1）理解本质 —— HTML 原生的元素是怎么用的

2）推导用法 —— 试着用 Vue 来简化 HTML 的用法，同时写一些简单的测试代码来验证我们推导出来的用法。

所以，我们基本上都可以按照下面的套路来折腾 v-model 。

1）看一下最核心的 HTML 原生元素的用法；

还是要多看 https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Basic_native_form_controls 。

2）试着用 v-model 来折腾一下；

3）做一个 <div> 把折腾后的 v-model 的结果显示出来，以便更好的理解。

1、单行文本框

核心的 HTML 原生用法是这样的：（value 属性里面是文本框里的值）。

另外注意，<input> 后面是没有 </input> 的 ...... 没办法，就是这么任性 —— 准确说是这个标签过于老旧，受限于当时的认知水平限制，有很多现在看来很诡异的东西。

<input type="text" value="张三">

显示出来就是下面这个样子的：

接下来我们试着用一下 v-model ，再加一个显示 v-model 的 <div>。也就是类似于这样的：

    <div id="app">
      <div>姓名：<input type="text" v-model="text"></div>
      <div>输入文本：{{text}}</div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          text: "张三"
        }
      });
    </script>

然后我们试着修改一下文本框里的内容，删几个字、加几个字，看看会发生什么。

如我们预期一样，文本只要发生了变化，<div> 里显示的文本也会跟着一起变。

要说唯一有点儿 “特殊” 的，就是在输入法还没转换完成的时候，<div>的内容并不会发生变化。

2、其他文本框

除了上面提到的通用型的单行文本框，在 <input> 组件中指定不同的 type 属性的话，还能得到其他一些特殊用途的文本框。

type 的具体设置，可以查看：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#%3Cinput%3E_types。

我们下面先说一下比较像文本框的其他文本框（从上面的 MDN 资料里搬运过来的 😀）。

这类文本框的特殊之处在于，

1）浏览器和手机上会使用特殊的键盘布局，比如说：全数字的键盘；

2）各种框架也会做内置的有效性校验，比如说：数字类型的文本框里输入字母就会提示出错。

校验本身是个很大的话题，现在只要有个印象就行，详细内容有时间的时候咱们再慢慢说。

type	描述	效果图
email	编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
number	用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password	单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
url	用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。

3、多行文本框

上面提到的文本框，都是 “单行文本框”，也就是只能输入一行，不能回车的。

如果要输入多行文本 —— 比如说备注——那就需要使用多行文本框 <textarea> 组件。

      <textarea>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
      </textarea>

对比一下 <input> 组件，差别还是很大的吧？

1）后面是要接 </textarea> 的；

2）文本内容不是用 value 属性来表示，而是在 <textarea> 和 </textarea> 中间指定的。

显示出来的效果是这样的：

如图所示，4 行文本、只显示了 2 行 —— 不过可以使用右下角的 gripper 来手动调整文本框大小。

也可以使用 rows 属性来指定默认显示的文本行数。比如说，我们在 HTML 里面加上 rows="6" （也就是），

那么显示效果就会变成这样的：

<textarea> 组件有个跟 <div> 组件很不一样的地方，它会把每行文本的缩进如实显示出来。

比如说，我们有这样的比对代码（注意 <div> 和 <textarea> 中文本的缩进）：

      <div>
          随意空格，
          第二行继续空格
      </div>
      
      <hr> <!-- 华丽的分割线 -->

      <textarea rows="6">
          轻轻的我走了，
          正如我轻轻的来；
          我轻轻的招手，
          作别西天的云彩。
      </textarea>

它的显示效果，却是这样的：

铺垫了这么多，接下来我们来折腾一下 <textarea>。

    <div id="app">
      <div>备注：<br><textarea rows="6" cols="60" v-model="text"></textarea></div>
      <div>输入文本：<br>{{text}}</div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          text: "轻轻的我走了，\n正如我轻轻的来；\n我轻轻的招手，\n作别西天的云彩。"
        }
      });
    </script>

（注意 text 中的 \n ，用来换行的 —— 各种开发语言中标准通用的转义字符）

显示的效果是这样的：

有点儿怪？底下的 <div> 没有换行 ......

嗯，是的，<div> 不支持换行。所以，咱们还得把底下的 <div> 换成 <textarea>。

这种 “创造性发明”，也是第一性原理的重要体现 —— 不要上来就给自己画个框框，必须使用 <div>，因为我们之前的例子都是用的 <div>。

但是既然文本在 <textarea> 和 </textarea> 之间 —— 跟 <div></div> 基本上是一样的，咱们可以试一下回显的时候不用 v-model，而用 {{ }}。

也就是这样的：

    <div id="app">
      <div>备注：<br><textarea rows="6" cols="60" v-model="text"></textarea></div>
      <div>回显文本：<br><textarea rows="6" cols="60">{{text}}</textarea></div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          text: "轻轻的我走了，\n正如我轻轻的来；\n我轻轻的招手，\n作别西天的云彩。"
        }
      });
    </script>

显示效果是这样的。