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>
<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 to="/home">Home</router-link>
     <router-link 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;
}
.block-chain {
  margin: 25px ;
  width: 100%;
  
}
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 :disabled="this.currentPage === 0" v-on:click="getMoreData(false)">Prev</button>
   			<button 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) {
		    		      this.coinData =axios.get(`https://api.coinmarketcap.com/v2/ticker/1/`)
      .then(response => (this.coinList = response.data.data))


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

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


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