My New Vue

HepVue

by Gopinath Kaliappan

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<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="/home">Home</router-link>
    <router-link to="/bar">Coins</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: white;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter
// and then call `Vue.use(VueRouter)`.

// 1. Define route components.
// These can be imported from other files

const Coins = Vue.component('coin', {
	data: function() {
  	return {
    	coinList: []
    }
  },
  mounted() {
  	
  },
  template: `
  	<div>
    	<ol>
      		<li v-for="(coin, index) in coinList">
          		{{coin.name}}
          </li>
      </ol>
    </div>
  `
})

const Home = Vue.component('home', {
	data: function() {
  	return {
    	
    }
  },
  mounted() {
  	
  },
	template: `
  	<div>
    	<h3>Welcome To Heptagon Coin Market cap</h3>
    </div>
  `
})

const Foo = { template: Home }
const Bar = { template: '<div>bar</div>' }


// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
  { path: '/home', component: Home },
  { path: '/bar', component: Bar }
]



// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for `routes: routes`
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
	el: '#app',
  router
}).$mount('#app')

// Now the app has started!