Vue

by Dallington Augusto

HTML

<div id="app">
   <div class="c-nav-item">
    <!-- -->
    <a class="c-nav-item__single" href="/work" style="" ui-sref="caseStudies" v-on:mouseover="mouseOver" v-bind:class="{on: active, 'fade': active}">
      <div class="c-nav-item__inner" style="transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="c-nav-item__text">
          Work
          <span class="c-nav-item__period">
            .
          </span>
        </h2>
      </div>
    </a>
    <!-- -->
    <a class="c-nav-item__single" href="/the-story" style="" ui-sref="the-story" v-on:mouseover="mouseOver" v-bind:class="{on: active, 'fade': active}">
      <div class="c-nav-item__inner" style="transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="c-nav-item__text">
          The Story
          <span class="c-nav-item__period">
            .
          </span>
        </h2>
      </div>
    </a>
    <!-- -->
    <a class="c-nav-item__single" href="/us" style="" ui-sref="team.all" v-on:mouseover="mouseOver" v-bind:class="{on: active, 'fade': active}">
      <div class="c-nav-item__inner" style="transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="c-nav-item__text">
          Us
          <span class="c-nav-item__period">
            .
          </span>
        </h2>
      </div>
    </a>
    <!-- -->
    <a class="c-nav-item__single" href="/the-juice" style="" ui-sref="blog" v-on:mouseover="mouseOver" v-bind:class="{on: active, 'fade': active}">
      <div class="c-nav-item__inner" style="transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="c-nav-item__text">
          The Juice
          <span class="c-nav-item__period">
            .
          </span>
        </h2>
      </div>
    </a>
    <!-- -->
    <a class="c-nav-item__single" href="/contact" style="" ui-sref="contact" v-on:mouseover="mouseOver" v-bind:class="{on: active, 'fade': !active}">
      <div class="c-nav-item__inner" style="transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="c-nav-item__text">
          Contact
    ...

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;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})