Vue Course - Components

by jmpp77

HTML

<div id="app">
  <ma-super-navbar></ma-super-navbar>
  <ma-super-navbar></ma-super-navbar>
  <ma-super-navbar></ma-super-navbar>
  <ma-super-navbar></ma-super-navbar>
</div>

CSS

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

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

li {
  margin: 8px 0;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav li {
  flex: 1;
  margin: 0.5rem;
}
nav li a {
  text-align: center;
  display: block;
  background-color: #a0a6aE;
  padding: 0.2rem 0;
  color: #fff;
  text-decoration: none;
  border-radius: 2px;
}

Vue

Vue.component('ma-super-navbar', {
	template: `<nav>
    <ul>
      <li v-for="lien in items"><a href="#">{{ lien }}</a></li>
    </ul>
    <button @click="pop">POP</button>
   </nav>`,
   data :  {
      	items : ['Accueil', 'Projets', 'Contact']
   	
   },
   methods : {
   	pop : function() {
    	this.items.pop();
    }
   }
});

new Vue({
  el: "#app"
});