字串和物件的差异

今天会用两个例子来比较看看多个字串和一个物件多笔资料有什麽不同
第一个范例是在data中放「首页」、「记事本」和「关於我」三个字串

第二个范例虽然也可以使用三个字串，但我们在制作网页时标题、内文和照片通常是有关联性的，所以在这个范例中我把这三个东西装在一个diary物件中，这样对於以後要进行专案修改或是如果在做比较中大型的专案的时候维护起来也比较容易
不过因为这里只是在做字串和物件的比较，所以我使用的是前面介绍过的Lorem Picsum 假图产生器和乱数假文产生器 Chinese Lorem Ipsum
制作的)

最後要介绍的是第二个范例在绑定资料的部分

        <div class="card">
          <img :src="diary.photo">
          <div class="txt">
            <h2>{{diary.title}}</h2>
            <p>{{diary.contents}}</p>
          </div>
        </div>

从这段程序码中我们可以看出照片和文字绑定的方式是不一样，这是为什麽呢?
在前面我们介绍过Mustache语法也就是我们在标题和内文中所使用{{}}的资料绑定，但因为Mustache语法不能在HTML属性中使用，所以在这里我们是使用v-bind指令绑定照片(v-bind缩写为:)

github