Exemple-1001-1

/**
 * Register Vue Components
 */

// register the grid component
Vue.component('page-head', {
  template: '#page-head'
})

Vue.component('grid', {
  template: '#grid',
  props: ['colors']

})


----------------------------------------------------------------------------------------------------------------


/**
 * index.js
 * - All our useful JS goes here, awesome!
 */


// Init Vue!
var app = new Vue({
  el: '#demo',
	mounted: function () {
    window.addEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll: function(e) {
      if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
				this.addMoreColors();
      }
    },
    addMoreColors: function() {
      // Simple dummy function to add more data.
      this.colors = this.colors.concat([{ hex: "#f6d258"}, { hex: "#efcec5" }, { hex: "#d1af94" },{ hex: "#97d5e0" }, { hex: "#f6d258" }, { hex: "#efcec5"  }]);
    }
  },
  data: function() {
    return {
      colors: [
        { hex: "#f6d258" },
        { hex: "#efcec5" },
        { hex: "#d1af94" },
        { hex: "#97d5e0" },
        { hex: "#f6d258" },
        { hex: "#efcec5" },
        { hex: "#97d5e0" },
        { hex: "#f6d258" },
        { hex: "#efcec5" },
        { hex: "#d1af94" },
        { hex: "#97d5e0" },
      ]
    }
  }
})

----------------------------------------------------------------------------------------------------------------

/**
 * index.scss
 * - Add any styles you want here!
 */

$background: #fff;

* {
  box-sizing: border-box;
}

body {
  background: $background;
}

header {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: normal;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.grid {
  columns: 3 auto;
  column-gap: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.color {
  display: inline-block;
  border-radius: 3px;
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
}

.pop-enter-active {
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.pop-enter {
  opacity: 0;
  transform: scale(0.9);
}

.pop-enter-to {
  opacity: 1;
  transform: scale(1);
}

----------------------------------------------------------------------------------------------------------------

/**
 * index.scss
 * - Add any styles you want here!
 */

* {
  box-sizing: border-box;
}

body {
  background: #fff;
}

header {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: normal;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.grid {
  columns: 3 auto;
  column-gap: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.color {
  display: inline-block;
  border-radius: 3px;
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
}

.pop-enter-active {
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.pop-enter {
  opacity: 0;
  transform: scale(0.9);
}

.pop-enter-to {
  opacity: 1;
  transform: scale(1);
}

----------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Meta -->
  <meta charset="UTF-8" />
  <title>Vue.JS Grid</title>

  <!-- Styles -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="styles/index.processed.css">

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
</head>
<body>

  <script type="text/x-template" id="page-head">
    <header>
      <h1>Vue.JS Grid Template pour les Journées 1000 et 1</h1>
    </header>
  </script>

  <script type="text/x-template" id="grid">
  	<div class="grid">
    	<transition-group name="pop">
			  <div class="color" v-for="(color, index) in colors" v-bind:key="{index}" v-bind:style="{ backgroundColor: color.hex }"></div>
      </transition-group>
    </div>
  </script>

  <div id="demo">
    <page-head></page-head>
    <grid :colors="colors"></grid>
  </div>

  <!-- Scripts -->
  <script src="/scripts/components.js"></script>
  <script src="/scripts/index.js"></script>
</body>
</html>