Vue 2.0 Hello World

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <section class="bg-light page-section" id="portfolio">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center"><br>
          <h2 class="section-heading text-uppercase works-text">Works</h2>
          <h3 class="section-subheading text-muted">Selected work that has been created with the help of many.</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 col-sm-6 portfolio-item" v-for="(obj, key) in portfolio" :key="key">
          <a :href="obj.url" class="portfolio-link" data-toggle="modal" target="_blank">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">

              </div>
            </div>
            <img :src="obj.img" class="img-fluid">
          </a>
          <div class="portfolio-caption works-text">
            <h4 class="works-text">{{ obj.caption }}</h4>
            <p class="text-muted works-text">{{ obj.title }}</p>
          </div>
        </div>

      </div>
    </div>
  </section>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello',
    portfolio: [{
        img: 'https://dummyimage.com/300x200/000/fff&text=one',
        caption: 'Caption 1',
        title: 'Title 1',
        url: "https://destination-1.com/"
      },
      {
        img: 'https://dummyimage.com/300x200/000/fff&text=two',
        caption: 'Caption 2',
        title: 'Title 2',
        url: "https://destination-2.com"
      }
    ]
  }
})