Vue

by FrOnDaL

HTML

<div id="app">
  <input type="text" v-model="name">
  <p>{{ name }}</p><br><br>
  
  <button v-on:click="counter++">Arttır</button>
  <button v-on:click="counter--">Azalt</button>
  
  <button v-on:click="counterC++">Computed buton</button>
  
  <p>Toplam : {{ counter }} || {{ counterC }}</p>
  <p> {{ desc() }} || {{ out }}</p><br><br>
  
  <button @click="degLink">Linki değiştir.</button>
  <a :href="link">Gti</a>
</div>

Vue

new Vue({
	el   : "#app",
  data : {
  	name : "deneme",
    counter : 0,
    counterC : 0,
    link : "https://www.google.com.tr/",

  }, 
  methods : {
  	
     desc : function(){
      console.log("methods çalıştı...");
        return this.counter > 10 ? "10'dan büyük" : "10'dan küçük" ;
      },
       degLink : function(){
      	this.link = "https://ajans360.com/";
      }
    },
    computed : {
    	out : function(){
      console.log("computed çalıştı...");
      	 return this.counter > 10 ? "10'dan büyük" : "10'dan küçük" ;
      },
     
    },
    watch : {
    	counter : function(value){
      	vh = this;
        setTimeout(function(){
        	vh.counter = 0;
        }, 2500)
        
      }
    }
});