sadsadsad

by Gopinath Kaliappan

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
    <link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/theme/default.css">

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

<script src="https://unpkg.com/vue-material@beta"></script>

<div id="vue">

  <div> <md-button :md-ripple="false"><router-link to="/foo">Home</router-link></md-button></div>
  <div><md-button :md-ripple="false"> <router-link to="/bar">Go to Bar</router-link></md-button></div>
 
    <h1 class="title">{{appTitle}}</h1>
 <router-view></router-view>
    
   

</div >

CSS

.title {
  text-align: center;
}
.active {

  background-color: green;
  opacity: 0.5;
  animation: mymove 1s;
}
.list-item {
  text-decoration: none;
  background-color: brown;
    color: white !important;
    margin-top: 5px;
    padding: 25px;
    border-radius: 8px;
    font-size: 20px;
}
.text-center {
  text-align: center;
}
.list-item a {
  color: white !important;
}
.list {
  padding: 5px;;
}
@keyframes mymove {
    from {height: 40px;}
    to {top: 80px;}
}

JavaScript

// 1. Define route components.
// These can be imported from other files
const Foo = { 
	template: `<div>
									<h3 class="text-center">Welcome Heptagon Coin market place</h3>
						</div>` 
}
const Bar = { template: '<div>bar</div>' }


let coin = Vue.component('coin-componentr', {
  data: function () {
    return {
      title: 'New Title',
      coinList: []
    }
  },
  mounted () {
    axios
      .get('https://api.coinmarketcap.com/v2/listings/')
      .then(response => (this.coinList = response.data.data))
  },
  template: `
  	<div>
    	<h3 class="text-center">Coins you can trade here</h3>
    			<ol class="list">
                		<li class="list-item" v-for="(coin, index) in coinList"><router-link to="/foo">
                    		{{coin.name}}{{coin.symbol}}
                        </router-link>
                    </li>
                </ul>
    </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: '/foo', component: Foo },
  { path: '/bar', component: coin }
]

// 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`
})


const vueObject = {
  el: '#vue',
  router,
  data: {
    appTitle: 'Vue Application',   
  }
}
var vm = new Vue(
	vueObject
);