大家好，欢迎来到IT知识分享网。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

第2节：绑定元素 attribute

{{ text }} 作为文本插值的形式，而绑定元素 attribute就需要用到 v-bind:属性名=”字段”。

源码

<a v-bind:href="href" id="toutiao" v-bind:title="title">{{ text }}</a>
<a :href="href.toUpperCase()" :title="title">{{ text }}</a>

执行v-bind后，href将作为js表达式执行，href将读取变量22行的href变量，可以理解为将”href”表达式的值绑定到href属性上。其中第2段，则是将href转为大写后进行显示。

不执行v-bind，href将作为标签属性进行解析

v-bind也有简写的形式，就是：号就可以

<a v-bind:href="href" v-bind:title="title">{{ text }}</a>
<a :href="href" :title="title">{{ text }}</a>

以上两种方式结果是一样的，也就是说v-bind:可以简写成:

如何处理多级插值与表达式

<script>
  Vue.config.productionTip = false
  new Vue({
    el: '#app',
    data: {
      "text": "头条",
      "href": "https://www.toutiao.com/",
      "title": "今日头条是一个通用信息平台，致力于连接人与信息，让优质丰富的信息得到高效精准的分发，促使信息创造价值。",
      "ip": {
        "ip1": "127.0.0.1",
        "ip2": "127.0.1.1",
        "ip3": "127.0.2.1"
      }
    }
  })
</script>

<div id="app">
  <pre>
    <a v-bind:href="href" v-bind:title="title" v-bind:time="Date.now()">{{ text }}</a>
    <a :href="href.toUpperCase()" :title="title">{{ text }}</a>
    {{text}}的网址是{{href}},点击可 <a v-bind:href="href">查看</a> ，
    ip地址是{{ip.ip1}}
    ip地址是{{ip.ip2}}
    ip地址是{{ip.ip3}}
  </pre>
</div>

通过{{ip.ip1}}就可以读取到”127.0.0.1″。

那么什么时候用插值？什么时候用指令呢？

插值通常应用于标签体内容。

例如：<h1>标签体内容</h1>、<a href=””>标签体内容</a>，也就是说具备起始标签和结束标签中间的部分称为标签体内容。

指令通常用于标签属性

例如：<a v-bind:href=”href” v-bind:title=”title”>{{ text }}</a>

指令语法可以解析标签，其中包含标签的属性、绑定事件、标签体的内容等等

v-bind仅是指令语法中的其中一个指令，指令语法都是以v-开头。