<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <div id="app">
      <h1>Vue Lesson</h1>
<!--       {{ message }}
      <ol>
        <li v-for="item in list">{{item}}</li>
      </ol> -->
      <section>
        <h2>アラート</h2>
        <button @click="handleClick">クリック</button>
      </section>
      <section>
        <h2>入力同期</h2>
        <input v-model="message" placeholder="入力してね">
        <p class="msg">{{ message}}</p>
      </section>
      <section>
        <h2>条件分岐</h2>
        <button @click="show=!show">切り替え</button>
          <p v-if="show">表示されてるよ!(show:true)</p>
<!--         <transition name="bounce">
          <p v-if="show">アニメーションだよ!</p>
        </transition>
        <transition name="slide-fade">
          <p v-if="show">アニメーションだよ!</p> -->
<!--         </transition> -->
      </section>
      <section>
        <h2>カウンター</h2>
          <p>現在のクリック数:<span class="midori">{{num}}</span>回</p>
        <button @click="increment">50を目指せ!</button>
      </section>
      <section>
        <h2>クラスの動的処理</h2>
        <button @click="isActive=!isActive">クリックすると…</button>
        <p :class="{'is-active' : isActive}" class="item">あああああああ</p>
      </section>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
  </body>
</html>
$c : lightseagreen;

*,*::before,*::after{
  box-sizing: border-box;
}

body{
  font-family: sans-serif;
  font-size: 16px;
  color: #2c3e50;
  background: whitesmoke;
}

#app{
  width: 100%;
  max-width: 1200px;
  margin: 10px auto;
  background: white;
  padding: 15px 30px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-top: 5px solid $c;
}

h1{
  margin-bottom: 30px;
  &:first-letter{
  color: $c;
  }
}

h2{
  margin-bottom: 1em;
  &::before{
    content:'#';
    color: $c;
    margin-right: .5em;
  }
}

section{
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid whitesmoke;
}

input{
  font-size: 16px;
  transform: scale(0.8);
  padding: .5em;
}

button{
  min-width: 150px;
  padding: 1em 1.5em;
  background: $c;
  color: white;
  border: none;
  border-radius: 30px;
}

.midori{
  color: $c;
  font-size: 1.2em;
  margin: 0 5px;
}

.item{
  color: $c;
}

.is-active{
  display: block;
  animation: buruburu .1s infinite;
}

@keyframes buruburu {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(0px, 2px) rotateZ(1deg)}
    50% {transform: translate(1px, 1px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

// .bounce-enter-active {
//   animation: bounce-in .5s;
// }
// .bounce-leave-active {
//   animation: bounce-in .5s reverse;
// }
// @keyframes bounce-in {
//   0% {
//     transform: scale(0);
//   }
//   50% {
//     transform: scale(1.5);
//   }
//   100% {
//     transform: scale(1);
//   }
// }

// .slide-fade-enter-active {
//   transition: all .3s ease;
// }
// .slide-fade-leave-active {
//   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
// }
// .slide-fade-enter, .slide-fade-leave-to{
//   transform: translateX(10px);
//   opacity: 0;
// }
View Compiled
let vm = new Vue({
  el: '#app',
  data: {
    message: '',
    // list: ['りんご','バナナ','test'],
    // messageForm: '',
    show:true,
    num: 0,
    isActive:true,
  },
  methods: {
    handleClick(){
      alert('うえーい');
    },
    increment(){
      this.num ++;
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.