My New Vue

HepVue

HTML

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

<body>
  <div id="app">
    <div class="header">
      <div class="logo-div">
        <img src="https://res-3.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco/v1486449895/fi7dbedahr6t4sltnbgq.png" alt="logo" class="logo" /></div>
      <div class="title"><span>Heptagon Coin Marketplace</span></div>
    </div>
    <p style="margin: 25px 0px;">
      <!-- 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 class="cmn-buton" to="/home">Home</router-link>
      <router-link class="cmn-buton" to="/coins">Coins</router-link>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view></router-view>
  </div>
</body>

CSS

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

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

.logo {
  width: 35px;
  position: absolute;
  top: 16px;
  display: inline-block;
}

.tiny-space {
  margin: 20px 0px;
}

body {
  background-color: white;
  padding: 25px;
}

.logo-div {
  display: inline-block;
}

.header {
  display: inline-block;
}

.title {
  display: inline-block;
  text-align: center;
  color: brown;
  margin-left: 35px;
}

@keyframes anim {
  from {
    width: 100%
  }
  to {
    width: 98%
  }
}

.cmn-buton {
  background-color: brown;
  outline: none;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  padding: 10px;
  color: white;
}

.block-chain {
  margin: 25px 0px;
  width: 100%;
}

.block-chain:hover {
  animation: anim 0.5s;
}

li {
  margin: 8px 0;
}

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

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

.home {
  height: 100%;
}

Vue

const Coins = Vue.component('coins', {
	data: function() {
  	return {
    	coinList: [],
      currentPage: 0
    }
  },
  mounted() {
  this.currentPage = 0;
   axios
      .get('https://api.coinmarketcap.com/v2/ticker/?limit=10')
      .then(response => (this.coinList = response.data.data))
  },
  template: `
  	<div>
    	<ol>
      		<li v-for="(coin, index) in coinList">
          		
               <router-link to="/coin/{{coin.symbol}}">{{coin.name}}</router-link>
          </li>
      </ol>
      <div class="tiny-space">
      	<button class="cmn-buton" :disabled="this.currentPage === 0" v-on:click="getMoreData(false)">Prev</button>
   			<button class="cmn-buton" v-on:click="getMoreData(true)">Get more data</button>
      </div>

</div>
  `,
  methods: {
  	getMoreData(state) {
    	
      this.currentPage = (state ? this.currentPage +1 : this.currentPage -1);
      this.currentPage = this.currentPage < 0 ? 0 : this.currentPage;  
    		      axios.get(`https://api.coinmarketcap.com/v2/ticker/?start=${this.currentPage * 10}&limit=10`)
      .then(response => (this.coinList = response.data.data))
    }
  }
})

const Home = Vue.component('home', {
	data: function() {
  	return {
    	
    }
  },
  mounted() {
  	
  },
	template: `
  	<div class="home">
    	<h3>Welcome To Heptagon Coin Market cap</h3>
      <div>
      	<img class="block-chain" src="https://heptagon.in/assets/images/Block%20chain%20tech.jpg" />
      </div>
    </div>
  `
})


const Coin = Vue.component('coin', {
	data: function(data) {
  	alert(JSON.stringify(data));
  	return {
    	data: data,
     	coinData: {}
    }
  },
  mounted(data) {
		    		      axios.get(`https://api.coinmarketcap.com/v2/ticker/1/`)
      .then(response => (this.coinData = response.data.data))


  },
	template: `
  	<div class="home">
    {{coinData}}
    	<h3>Coin{{JSON.stringify(this)}}</h3>
    </div>
  `
})

const Foo = { template: Home }
const Bar = { template: Coins }


// 2. Define some routes
// Each...