Vue 2.0 Hello World

by Theara Yuom

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>Click on the Menu Icon to transform it to "X":</p>
  <div class="container" @click="myFunction">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</div>

CSS

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-4px, -4px);
  transform: rotate(45deg) translate(-4px, -4px);
}

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    myFunction() {
      this.$el.querySelector('.container').classList.toggle("change");
    }
  }
})