没时间学 Vue (3) —— 绑定（二）：v-bind 和 v-model

接下来我们还是继续讲 “绑定”

—— 不要吐血，使用 Vue 开发时会用到非常非常多的绑定，而我们在上一篇讲的只是非常非常小的一部分。

咱们上一篇讲的绑定，都是这种风格的：

如果我们只用 div 元素 —— 不用图片，不用链接，不用列表，也不用文本框、单选框、复选框、按钮等的话，那么上面那种风格的确就够用了。

所以，接下来咱们重点吧啦一下这类标签的 “绑定” 用法 —— 主要内容在：https://cn.vuejs.org/v2/guide/syntax.html。

 

1、v-bind （attribute 上不能使用 {{}} 了!!!）

以 链接 元素为例，要是我们想做一个打开 CSDN 网站的链接的话，我们要写下面这样的 HTML （具体的语法可以查询 MDN）：

<a href="https://www.csdn.net">打开 CSDN</a>

页面上就会出现下面这样的链接，点击后会跳转到 CSDN 网站。（注意看上面的元素和展示效果之间的映射关系。）

那么，我们用 Vue 来写的话，是什么样的呢？

按照我们上一篇学的 {{ }} 大法，应该是这样的：

    <div id="app">
      <a href="{{url}}">{{title}}</a>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          url: "http://www.csdn.net",
          title: "打开 CSDN"
        }
      });
    </script>

显示的效果貌似也是正常的 —— 但是，当你点击链接的时候，并没有跳转到 CSDN 网站，而是一个奇怪的页面。

仔细看上面红色那串神奇的 “不知道神马东东”，里面是不是有 url 的模样？莫非？莫非？

是的，就是原封不动、没有经过渲染的 {{url}} 这几个字 😜😜😜

根据 Vue 的官方说明（https://cn.vuejs.org/v2/guide/syntax.html#Attribute）是这么一行小字：

其实 Mustache 引擎是没有这个限制条件的，这个功能在 Vue 的 ver 1.x 里面还是好用的， ver 2.x 里面不知出于什么原因取消了 。

也有吃瓜群众打破砂锅问到底（https://forum.vuejs.org/t/mustaches-in-attributes/6716），不过没有官方回复，估计得问尤雨溪大神本人才能知道为什么了 ......

Vue 2.x 的升级指南中，还专门提到了这一点：

收一下吃瓜的心，回到咱们的绑定上来。

结论就是所有的 attribute 绑定，都得用 v-bind 的方式来做了 —— 先假装没看见 “计算属性” 这几个字，有时间的时候咱们再拆解。

    <div id="app">
      <a v-bind:href="url">{{title}}</a>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          url: "http://www.csdn.net",
          title: "打开 CSDN"
        }
      });
    </script>

虽然没用 {{ }}，但是 v-bind 本质上也是 “模板表达式”，千万不要被迷惑了。

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

 

2、v-bind 的简写 —— 冒号 :

合理偷懒的概念，在程序员身上体现地淋漓尽致。

比如说，当年一统前端的 jQuery 中就用 $ 作为简写，每用一次能少敲 5 个字符；全世界有 100 万人每天用 100 次 jQuery 函数的话，一天能少敲 5 亿个字符。

如果程序员的手速按照 APM 100 来估算的话，每一天就能节省 500 万分钟，也就是能省出 3472 个人天出来。

所以说，合理偷懒还是有道理、能促进生产力提升的。

但是如果你要是在平常的项目开发里把 “没时间学 Vue” 简化成了 msjxvue，那可能就是鬼都看不懂，反而要额外消耗更多的时间了。

闲扯就此打住，Vue 里面也有各种各样的简写，比如说 v-bind 简写成了冒号 (:)。

      <!-- v-bind -->
      <a v-bind:href="url">{{title}}</a>
      
      <!-- 简写成冒号 -->
      <a :href="url">{{title}}</a>

这么简写到底好还是不好呢？各执一词，见仁见智。

不过用的时候就得特别特别注意，要时刻擦亮眼睛。

既要能看懂冒号是什么意思，还要瞪大眼睛不要看漏了 —— 不然就悲催了。

      <!-- 有冒号，就要注意表达式，还要在 data 中声明 -->
      <a :href="url">{{title}}</a>
      
      <!-- 没有冒号，就不是模板啦！在 data 中声明了也不管用的 -->
      <a href="url">{{title}}</a>

 

3、v-model （面向 <input>、<textarea> 和 <select> 的双向绑定）

我们之前用到的 HTML 组件，都是 “显示” 类型，而非输入类型的 —— 比如说：文本框、单选框、复选框 等等。

只要我们的程序需要跟用户交互，就得跟这些组件打交道，因此还是很有必要速成一下的 —— 尤其是 <input> 这个组件，其实是一群组件。

https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Basic_native_form_controls

这类组件有个显而易见的特点，就是值可以变。

比如说，我们可以用一个文本框来显示用户的昵称，也允许用户在这个文本框里面直接修改昵称的值。

我们要做下面这样的文本框的话，对应的 HTML 大概是这样的。

<div>昵称：<input type="text" value="草长莺飞"></div>

按照第 1、章里学到的内容，我们先试着用 v-bind 的方式来改造一版；同时，我们再加一个显示用的 <div> 组件，这样我们就能看到 <input> 里面的值了。

改造后的页面看起来是这样的：

    <div id="app">
      <div>昵称：<input type="text" v-bind:value="nickname"></div>
      <div>你好, {{nickname}} ！</div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          nickname: "草长莺飞"
        }
      });
    </script>

我们试着在文本框里修改一下昵称。如下图所示，你会发现 <input> 里输入的内容、和下面的 <div> 中显示的内容，不一致了。

准确来说，

1）data 里的 nickname，在最初出现的 <input> 组件、以及 <div> 组件中，正确显示出来了；

2）但是 <input> 组件中输入的内容，并没有保存到 data 的 nickname 里面去。

这个就是所谓的 “单向绑定”。

为了实现 “双向绑定”，准确地捕获输入值，我们就得使用 v-model。

是的，彻底跟 HTML 原生地 value 属性拜拜，使用 Vue 特有的 v-model 属性。

新的 HTML 代码如下（只要把 v-bind:value 改成 v-model 就行了）。

    <div id="app">
      <div>昵称：<input type="text" v-model="nickname"></div>
      <div>你好, {{nickname}} ！</div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          nickname: "草长莺飞"
        }
      });
    </script>

改完后效果也是立竿见影。是不是很神奇？

表单输入和 v-model 是个很大的话题，咱们先借用一下 Vue 官方的描述、就此打住；更多的细节，下次有时间的时候再慢慢说。

 

4、思考题

学过了 v-model 和表单输入（虽然只是简单的用法），咱们可以把前一篇的思考题（成绩单）改成更加动态交互的。

当然，能自由输入之后，也可以顺便研究一下平均数除不开、成绩可以输入 100 分以上等实际会出现的问题 —— 有时间的话。