컴포넌트 예제

HTML

<!DOCTYPE html>
<html lang="ko">

  <head>
    <meta charset="UTF-8">
    <title>Homepage</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>

  <body class=container>

    <nav id="home-nav" class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">{{ title }}</a>


      <div class="collapse navbar" id="navbarColor02">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item" v-for="item in menus">
            <a class="nav-link" href="#" v-on:click="moveMenu">{{ item }}</a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- 컴포넌트 부분, :contents 는 article객체의 currentContents에 있는 내용을 불러온다. -->
    <article id="home-article" class="row">
      <display-article :contents="currentContents">

      </display-article>
    </article>

  </body>

</html>

JavaScript

Vue.component('display-article', {
  template: '<div class="col-12 text-primary">{{ contents }}</div>',
  props: ['contents']
})

var nav = new Vue({
  el: "#home-nav",
  data: {
    title: "홈페이지",
    menus: ["Home", "Portfolio", "Guestbook"],
    contents: {
      home: "첫화면입니다",
      portfolio: "포트폴리오입니다.",
      guestbook: "방명록입니다."
    }
  },
  methods: {
    moveMenu: function(e) {
      var menu = e.target.text.toLowerCase()
      // 클릭하면 메뉴값을 article.currnetContents에 대입한다.
      article.currentContents = this.contents[menu]
    }
  }
})

var article = new Vue({
  el: "#home-article",
  data: {
    currentContents: ""
  }
})

// 첫 화면 지정
window.onload = function() {
  article.currentContents = nav.contents.home
}