Vue框架学习笔记——指令语法：v-bind动态绑定属性、data的层级结构

---

指令语法

在标签中想让属性动态变化的时候，不能使用插值语法。
插值语法一般用于标签体中，当针对标签的里面的时候，例如标签属性，就可以使用指令语法

v-bind，增加标签内属性动态绑定方式

{{name}}

需要写成类似这样的代码

<a v-bind:href="url">百度</a>

通过v-bind将这个属性动态绑定，将""字符串内的作为js表达式
v-bind也可以简写为

<a :href="url">百度</a>

data的层级结构

  <div class="box" id="box">
    <h1>
      {{school.name}}hello,world{{name}}
    </h1>
    <a :href="url">百度</a>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
      el: '#box',
      data: {
        name: "这里是name的值",
        url: "http://www.baidu.com",
        school: {
          name: "层级"
        }
      }
    })
  </script>

---

至此，结束。

如果你觉得这篇文章写的不错，多多点赞~收藏吧！