Vue Experiment

In this example below you will see how to do a Vue Experiment with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ineedthekeyboard, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ineedthekeyboard ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Vue Experiment</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>
<hr>
<div id="list-demo">
  <transition-group name="list" tag="ul" v-if="items">
    <li class="list-item" v-for="item of items" v-bind:key="item">{{item}}</li>
   </transition-group>
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition name="button-fade" mode="out-in">
    <button v-on:click="auto = !auto;" v-bind:key="auto">
      {{ auto ? 'On' : 'Off' }}
    </button>
  </transition>
</div>
  <script src='https://unpkg.com/vue'></script>
<script src='https://unpkg.com/vuex@3.0.1/dist/vuex.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ineedthekeyboard/vue-experiment-RLzLge */
#list-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.list-item {
  display: inline-block;
  margin-right: 10px;
  transition: all 1s;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
.list-leave-active {
  position: absolute;
}


.button-fade-enter-active {
  transition: all .3s ease;
}
.button-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.button-fade-enter, .button-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateY(10px);
  opacity: 0;
}
.button-fade-enter-to, .button-fade-leave {
  opacity: 1;
  transform: translateY(10px);
}

/*Downloaded from https://www.codeseek.co/ineedthekeyboard/vue-experiment-RLzLge */
Vue.use(Vuex);
function randomIndex(state) {
  return Math.floor(Math.random() * state.items.length);
}
var store = new Vuex.Store({
  state: {
    count: 0,
    items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    nextNum: 10
  },
  mutations: {
    increment: function increment(state) {
      return state.count++;
    },
    decrement: function decrement(state) {
      return state.count--;
    },
    add: function add(state) {
      state.nextNum++;
      state.items.splice(randomIndex(state), 0, state.nextNum);
    },
    remove: function remove(state) {
      state.items.splice(randomIndex(state), 1);
    }
  }
});
var counterDemo = new Vue({
  el: '#app',
  computed: {
    count: function count() {
      return store.state.count;
    }
  },
  methods: {
    increment: function increment() {
      store.commit('increment');
    },
    decrement: function decrement() {
      store.commit('decrement');
    }
  }
});
var demo = new Vue({
  el: '#list-demo',
  data: {
    auto: false
  },
  computed: {
    items: function items() {
      return store.state.items;
    }
  },
  methods: {
    add: function add() {
      store.commit('add');
    },
    remove: function remove() {
      store.commit('remove');
    }
  }
});

Comments