Vue

by Hugo Licon

HTML

<div id="app">
  <button v-on:click="counter++">Increase</button>
  <button v-on:click="counter--">Decrease</button>
  <button v-on:click="secondCounter++">Increase Secod</button>
  <p>Counter: {{counter}} | {{secondCounter}}</p>
  <p>Counter: {{result()}} | {{output}}</p>
  <h2>Add Styles </h2>
  <div class="demo" @click="attachRed = !attachRed" :class="divClasses"></div>
  <div class="demo" @click="attachGreen = !attachGreen" :style="myStyle"></div>
  <div class="demo" @click="attachBlue = !attachBlue" :class="color"></div>
  <hr>
  <input type="text" v-model="color" placeholder="color">
  <input type="text" v-model="width" placeholder="width">
  
</div>

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

.demo {
  height: 100px;
  width: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

Vue

new Vue({
  el: "#app",
  data: {
    counter: 0,
    secondCounter: 0,
    attachRed: false,
    attachBlue: false,
    attachGreen: false,
    color: "",
    width: 50
  },
  computed: {
  	output(){
    	console.log('computed')
      // Computed properties are recomputed only when a variable that is using change
      // Use computed properties whenever you can, they are more optimized
      // THEY NEED TO RUN SYNC CODE
    	return this.counter > 5 ? 'Grater than 5' : 'Smaller than 5'
    },
    divClasses(){
    	return {
      	red: this.attachRed
      }
    },
    myStyle(){
    	return {
      	backgroundColor: this.color,
        width: `${this.width}px`
      }
    }
  },
  watch: {
  	counter() {
      setTimeout(() =>  {
      	this.counter = 0;
      }, 2000);
    }
  },
  methods: {
		result() {
    	console.log('methods')
    	return this.counter > 5 ? 'Grater than 5' : 'Smaller than 5';
    }
  }
})