kayode-adechinan/vuejs.md

## vuejs.md

      
    Raw
  

              vuejs.md
            
          
    hide until vue get loaded

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>
vue without webpack

// bar.js
const Bar = { template: '<div>bar</div>' }
//foo.js
const Foo = { template: '<div>foo love</div>' }
<!DOCTYPE html>
<html>

<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- use router-link component for navigation. -->
      <!-- specify the link by passing the `to` prop. -->
      <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view></router-view>
  </div>
  <script src="foo.js"></script>
  <script src="bar.js"></script>

  <script>

    const routes = [
      { path: '/', component: Foo },
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]

    const router = new VueRouter({
      routes :routes,
      mode: 'history'
    })

    var app = new Vue({
      router,
      el: '#app',
    })
  </script>
</body>

</html>

``