Vue

by FrOnDaL

HTML

<div id="exercise">
  <!-- 1) Efekti Butona basarak başlatın. Efekt "highlight" ve/veya "shrink" class'ları arasında değişmelidir. Bu değişim her bir interval döngüsünde olmalıdır. ("effect" id' li div'e o anki aktif olan class eklenecektir.) -->
  <div>
    <button @click="startEffect">Efekti Başlat!</button>
    <div id="effect"></div>
  </div>
  <!-- 2) Birkaç tane CSS Class'ı üreterek bu Class'ları Array Syntax'ı ile aşağıdaki <div>' e ekleyiniz -->
  <div>Henüz bir class'ım yok :(</div>
  <!-- 3) Örnek birkaç tane Class üreterek (Ya da ürettiklerinizi kullanarak) <input> içerisine Class adı girerek hemen alttaki <div> elementine bu yazılan Class'ı eklemeyi yapınız. -->
  <div>
    <input type="text">
    <div></div>
  </div>
  <!-- 4) Kullanıcının Class isimlerini girebileceği iki adet <input> elementimiz var. Bunları kullanarak hemen alttaki <div> elementinin Class'larini attached etmesini sağlayınız  -->
  <div>
    <input type="text">
    <input type="text">
    <div></div>
  </div>
  <!-- 5) 3.Uygulamayı tekrarlayın. Fakat bu sefer Class Adı yerine Denk gelecek Style Kodlarını ekleyiniz.  -->
  <div>
    <input type="text">
    <div></div>
  </div>
  <!-- 6) setInterval ve Style Binding kullanarak Basit bir progress bar üretin. Progress bar' ın çalışmasını buton'a basarak başlatın. -->
  <div>
    <button v-on:click="startProgress">Progress İşlemini Başlat!</button>
    <div></div>
  </div>
</div>

CSS

#effect {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.highlight {
  background-color: red;
  width: 200px !important;
}

.shrink {
  background-color: gray;
  width: 50px !important;
}

Vue

new Vue({
  el: '#exercise',
  data: {

  },
  methods: {
    startEffect: function() {
    
    }
  }
});