app-ideas-projects

These are my projects that I tried to do with project ideas in a repository called 'app-ideas'. Some of them were written with vue.js.

MIT License

Stars
5
View Code on GitHub Visit Website View on X
Ecosystems: CSS, Sass, Vue.js

app-ideas-projects

These are my projects that I tried to do with project ideas in a repository called 'app-ideas'. Some of them were written with vue.js.

ScreenShots

- DolarToCent

- ToDoApp

- Bin2Dec (Project1)

- Calculator

VueJs LifeCycle Metodları

This article source from Medium by @edisdev

1. Created

var app = new Vue({
  el: '#app',
  data() {
   return {
      message: ''; // message adında bir data oluşturduk.
  },
  created() {
    this.message = 'Vue Component is created !';
    // component ilk render olduğu anda
    // oluşturduğumuz message adlı dataya değer atadık.
  }
 }
});

2. Computed

var app = new Vue({
  el: '#app',
  data() {
   return {
      message: 'Hello Vue';
  },
  computed: {
     loadedMessage() {
        return 'Vue Component Loaded';
     }
     // componentin render işlemi tamamlandıktan sonra çağırmak
     // istediğimiz bir metod yazdık.
  },
 }
});
<div id="add">
  <p> First Message : {{ message }} </p>
  <hr>
  <p> Load Message: {{ loadedMessage }} </p>
</div>

3. Mounted

var app = new Vue({
  el: '#app',
  data() {
   return {
     message: '';
  },
  mounted() {
   window.addEventListener(“click”, function(e){
    console.log(e.target);
  });
  }
 }
});

4- Watch

var app = new Vue({
  el: '#app',
  data() {
   return {
     isOpen: false;
  },
  mounted() {
    window.addEventListener('click',e => {
    this.isOpen = true;
    })
  },
  watch: {
   isOpen() {
      console.log('Data Değişti');
      // isOpen datasındaki değişliği yakaladık.
   }
  }
 }
});

5- Methods

var app = new Vue({
  el: '#app',
  data() {
   return {
     list: [ { "name":"User1", "age":34, "car":null },
             { "name":"User2", "age":31, "car":null },
             { "name":"User3", "age":23, "car":null }
           ],
     smallList: {}
    }
  },
  methods: {
   // list datasında age i 30 dan büyük olanları farklı
   // bir dataya atayan bir fonksiyon yazalım.
   filterList() {
     this.smallList = this.list.filter(item => item.age > 30);
   }
  },
  created() {
    this.filterList();
    // methods property de oluşturduğumuz fonksiyonu çağırdık.
  }
 }
});

Computed Property İle Methods Karşılaştırması

v-model direktifi açıklamasında da bahsi geçtiği üzere computed ve methods‘un işlev anlamında örtüştüğü noktalar olsalar da temel ve aslında önemli bir farklılık da mevcut5. computed property bağlı olduğu değişkeni ekranda sunarken ön belleğe (cache) de alır ve bu değişken değişmediği sürece tekrar hesaplama yapmaz. method kullanımında ise hesaplama yinelenir ve son değer ön bellekleme olmadan ekrana yansıtılır. Özetle, method re-render gerçekleşen her durumda yeniden çalıştırılır, ancak computed kapsamındaki işlemler yinelenmez.

<template>
<p>{{ reverseMessage() }}</p>
veya
<p v-text="reverseMessage()"></p>
</template>
<script>
methods: {
  reverseMessage() {
    return this.message.split('').reverse().join('')
  }
}
</script>

Computed Property İle Watched Property Karşılaştırması

VueJS, data değişikliklerini gözlemlemek ve bunlara tepki vermek için watch properties olarak ifade edilen daha genel bir yola daha sahiptir. Lifecycle içerisinde watch component var olduğu sürede, o component içeriğindeki datalarla ilgili değişiklikleri yakalamızı sağlar. Örneğin, bir veri bir başka veriye bağlı ise ve bağlı olduğu veride değişiklik söz konusu olmuşsa watch (watcher / watched prop) kullanımı tercih edilebilir. Şöyle bir örneğimiz olsun;

<script>
const app = Vue.createApp({
  data() {
    return {
      message: `It's a New Day!`,
      firstName: 'John',
      lastName: 'Doe',
      fullName: 'John Doe'
    }
  },
  computed: {
    welcome() {
      return 'Hello' + ' <strong>' + this.fullName + '</strong>, ' + this.message
    }
  },
  watch: {
    message(val) {
      this.message = val
    },
    firstName(val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName(val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
}).mount('#app');
</script>

Özetlemek gerekirse, computed properties diğer verilerden türetilmiş yeni veriler oluşturmak istendiğinde öne çıkmaktadır. Bu verileri dönüştürmek (transform), filtrelemek (filter) ya da değiştirmek (manipulate) istediğimizde rahatlıkla kullanabiliriz. Computed properties her zaman bir değer döndürmek (return) ve eş zamanlı olmak durumundadır. Diğer yandan, bir bileşenin (component) prop aldığını ve bu prop içeriğinin her değişmesi durumunda bir AJAX isteği gerçekleştirilmesi gerektiğini düşünün. Bu durumda Watch property ile verideki değişikliği izlemek çok daha isabetli bir karar olacaktır. Özetlemek gerekirse asynchronous ve bütçeli operasyonlardaki veri değişikliklerinin takibinde watch değerlendirilebilir bir seçenektir.

VueJs Directives (Direktifleri)

Bu Yazı Bu Linkteki Siteden alınmıştır.

VueJs Directives

// Vue v2.x
 var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
    private: false,
    number: 10,
    user: {
      firstName: 'Julius',
      lastName: 'Rodman'
    }
  },
  filters: {
    uppercase(value) {
     // veya uppercase: function(value) {
      return value.toUpperCase()
    }
  },
  methods: {
    uppercase(value) {
     return value.toUpperCase()
    },
    uppercase2(value) {
     return this.$options.filters.uppercase(value);
    }
  }
});

// Vue v3.x
// v3.x ile birlikte filtreler kullanımdan kaldırıldı.
const app = Vue.createApp({
  data() {
    return {
      message: 'Hello World!',
      private: false,
      number: 10,
      user: {
        firstName: 'Julius',
        lastName: 'Rodman'
      }
    }
  },
  methods: {
    uppercase(value) {
     return value.toUpperCase()
    },
    uppercase2(value) {
     return this.$options.filters.uppercase(value);
    }
  }
}).mount('#app');

  • v-text

    Hello <span v-for="who in user" v-text="uppercase(who)"></span>

    Hello <span v-for="who in user" v-text="uppercase2(who)"></span>

Hello <span v-for="who in user" v-text="$options.filters.uppercase(who)"></span>
  • v-html
  • v-once
<div v-once="user">Hello {{ user.firstName + ' ' + user.lastName | uppercase }}</div>
<div>Hello <span v-for="who in user" v-text="who" v-once="who"></span></div>
<div>Hello <span v-for="who in user" v-text="uppercase(who)" v-once="user"></span></div>
  • v-for
<!DOCTYPE html>
<html>
 <head>
  <title>Vue Example #1</title>
 </head>
 <body>
  <div id="app">
   <ul>
    <li v-for="msg in message" v-bind:title="msg">{{ msg }}</li>
   </ul>
  </div>
  < src="https://vuejs.org/js/vue.js"></>
  <>
  // Vue v2.x
  var app = new Vue({
    el: '#app',
    data: {
      message: ['Selam', 'Hello', 'Tungjatjeta', 'Salam', 'Вiтаю', 'Hola', 'Hallo', 'Tere']
    }
  });

  // Vue v3.x
  const app = Vue.createApp({
    data() {
      return {
        message: ['Selam', 'Hello', 'Tungjatjeta', 'Salam', 'Вiтаю', 'Hola', 'Hallo', 'Tere']
      }
    }
  }).mount('#app');
  </>
 </body>
</html>
Sonuç Olarak
  • v-show

JavaScirpt

var app = new Vue({
  el: '#app',
  data: {
    title: 'Ten Countries with the Highest Population in the World',
    styleObject: {
      'color': 'red',
      'font-weight': 'bold'
    },
    age : 10,
    countriesAndCapitals: [{
        'China': 'Beijing'
      },
      {
        'India': 'New Delhi'
      },
      {
        'United States': 'Washington, D.C.'
      },
      {
        'Indonesia': 'Jakarta'
      },
      {
        'Brazil': 'Brasilia'
      },
      {
        'Pakistan': 'Islamabad'
      },
      {
        'Nigeria': 'Abuja'
      },
      {
        'Bangladesh': 'Dhaka'
      },
      {
        'Russia': 'Moscow'
      },
      {
        'Mexio': 'Mexico City'
      }
    ]
  },
  methods: {
    getCountry(index) {
      return Object.keys(this.countriesAndCapitals[index])[0]
    }
  }
})

HTML

	<div id="app">

		<h1>{{ title }}</h1>
    <h2>v-show Example</h2>
		<ul>
			<li v-for="(country, index) in countriesAndCapitals" :key="index" v-show="index % 2 !== 1">
				{{ index + 1 }}. Country is <strong>{{ getCountry(index) }}</strong> and its Capital is <span
					v-for="capital in country" v-text="capital" :style="styleObject"></span>
			</li>
		</ul>

		<hr />
    <h2>v-if Example</h2>
		<ul>
			<li v-for="(country, index) in countriesAndCapitals" :key="index" v-if="index % 2 !== 1">
				{{ index + 1 }}. Country is <strong>{{ getCountry(index) }}</strong> and its Capital is <span
					v-for="capital in country" v-text="capital" :style="styleObject"></span>
			</li>
		</ul>
		<hr />
<h2>v-if / v-else-if / v-else Example</h2>
		<ul>
			<li v-if="age < 18">Generation Z, or iGeneration (Teens & younger)</li>
			<li v-else-if="age => 18 && age < 35">Millennials, or Generation Y (18 – 34 years old)</li>
			<li v-else-if="age => 35 && age < 51">Generation X (Roughly 35 – 50 years old)</li>
			<li v-else>Baby Boomers (Roughly 50 to 70 years old)</li>
		</ul>
	</div>
  • v-if/v-else-if/v-else
  • v-if gerçek bir koşul ifadesidir. Koşul bloğu içerisindeki etkinlik dinleyiciler (event listener) ve alt bileşenler (child component) tamamen kaldırılır ve/veya eklenir.
  • Bir üst açıklamayla ilişkili olarak, v-if ilgili bloğu yeniden oluşturduğu (render) ve/veya yok ettiği için v-show‘a göre daha hantaldır. Tabi, diğer yandan v-if gereksiz yere kullanılmayacak blokların da render edilmemesini sağlar. Dolayısıyla kullanım aşamasında ihtiyaçlar ve olası senaryolara göre tercihte bulunmak daha doğrudur.
  • v-on

  1. .stop – event.stopPropagation() metotunu çağırır.

  2. .prevent – event.preventDefault() metotunu çağırır.

  3. .capture – Yakalama modunda (capture mode) etkinlik dinleyici ekler.

  4. .self – Yalnızca etkinlik bu öğeden gönderilirse (dispatch) işlem gerçekleştirir.

  5. .{ keyCode | keyAlias } – Sadece belirli key tanımları için işlem gerçekleştirir.

  6. .native – Bileşenin (component) ana elementiye (root) ilgili yerel (native) etkinlikleri dinler.

  7. .once – Tek seferlik işlem gerçekleştirir.

  8. .left – (2.2.0+) Mouse sol tıklama ile ilişkili olarak etkinlik gerçekleştirir.

  9. .right – (2.2.0+) Mouse sağ tıklama ile ilişkili olarak etkinlik gerçekleştirir.

  10. .middle – (2.2.0+) Mouse orta tuş tıklama ile ilişkili olarak etkinlik gerçekleştirir.

  11. .passive – (2.3.0+) {passive: true} ile bir DOM olayına ilişir.

// method handler:
<button v-on:click="..."></button>
<button @click="..."></button>

// dinamik etkinlik (event) (2.6.0+) kullanımı:
<button v-on:[event]="..."></button>
<button @[event]="..."></button>

// ifade (expression) olmaksızın doğrudan işlem

<form @submit.prevent></form>

// keyAlias ile Enter tuşu işlemi
<input @keyup.enter="...">

// Tek seferlik tıklama etkinliği
<button v-on:click.once="..."></button>
<button @:click.once="..."></button>

// Mouse etkinliği (object syntax (2.4.0+)):
<button v-on="{ mousedown: ..., mouseup: ... }"></button>
  • v-bind
<a href="https://ceaksan.com/vue-js-v-show-v-if-v-else-if-v-else-v-on-v-bind/"> ... </a>
<a href="https://ceaksan.com/vue-js-v-show-v-if-v-else-if-v-else-v-on-v-bind/"> ... </a>

// görsel için src (attribute) içeriği oluşturma:
<img v-bind:src="...">
<img :src="https://ceaksan.com/vue-js-v-show-v-if-v-else-if-v-else-v-on-v-bind/">
<img :src="https://ceaksan.com/vue-js-v-show-v-if-v-else-if-v-else-v-on-v-bind/">

// dinamik özellik tanımı (key ve value) (2.6.0+):
<button v-bind:[key]="value"></button>
<button :[key]="value"></button>

// class tanımları:
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

// stil tanımları
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="styleObjectA"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

// nesne özelliği
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

// prop modifier ile DOM işlemleri
<div v-bind:text-content.prop="text"></div>

// <!-- prop binding. "prop" must be declared in my-component. -->
<my-component :prop="someThing"></my-component>

// alt bileşen ile prop ilişkisi oluşturma
<child-component v-bind="$props"></child-component>

// XLink.
<svg><a :xlink:special="foo"></a></svg>
<svg :view-box.camel="viewBox"></svg>
  • v-model

v-model Az önce de belirttiğim üzere sıklıkla kullanılan bir diğer direktif olan v-model sunduğu two-way binding özelliği sayesinde pek çok form elemanıyla 1 2 birlikte (value, checked, selected) kullanılabilir. v-model yerine v-bind/v-on kullanıldığına da tanık olabilirsiniz3. Bu durumda bilmeniz gereken, bunun bir zorunluluk olabileceğidir. Diğer durumda v-model ilk tercih olmalıdır.

<div id="app">
 <h1 v-text="message"></h1>
 <input type="text" v-model="message" />
</div>

<>
// Vue v2.x
new Vue({
 el: '#app',
 data: {
  message: 'Hello World!'
 }
});

// Vue v3.x
Vue.createApp({
  data() {
    return {
      message: 'Hello World!'
    }
  }
}).mount('#app');
</>

<div id="app">
    <h1 v-text="message"></h1>
    <h1>{{ reversedMessage }}</h1>
    <h1 v-text="reversedMessage"></h1>
    <input type="text" v-model="message" />
</div>
<>
  // Vue v2.x
new Vue({
 el: '#app',
 data: {
  message: 'Hello World!'
 }
 computed: {
  reversedMessage() {
   return this.message.split('').reverse().join('')
  }
 }
});

// Vue v3.x
Vue.createApp({
  data() {
    return {
      message: 'Hello World!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}).mount('#app');
</>

<div id="app">
    <h1 v-text="message"></h1>
    <h1>{{ reversedMessage() }}</h1>
    <h1 v-text="reversedMessage()"></h1>
</div>
<>
// Vue v2.x
new Vue({
 el: '#app',
 data: {
  message: 'Hello World!'
 }
 method: {
  reversedMessage() {
   return this.message.split('').reverse().join('')
  }
 }
});
// Vue v3.x
Vue.createApp({
  data() {
    return {
      message: 'Hello World!'
    }
  },
  method: {
    reversedMessage() {
    return this.message.split('').reverse().join('')
    }
  }
}).mount('#app');
</>
  • v-pre
<p v-pre>{{ selected }}</p>

Mustaches dışında, herhangi bir yönerge içermeten geniş çaplı etiket yığınlarının derlenmesinin istenmediği durumlarda da kullanılabilir.

  • v-cload

Bir diğer empty directive olan v-cloak ViewModel derlemeyi tamamlayana kadar eklendiği element üzerinde kalır. Bir CSS tanımı ile birlikte (örneğin bir div için) derleme süreci tamamlanana, ViewModel hazır olana kadar mustaches ifadelerin gizlenmesi sağlanabilir.

[v-cloak] {
 display:none
}
  • v-slot

v-slot < template > ve bileşenlerle (component) kullanılır. İçerik için (template, component) dağıtım noktaları olarak görev yapar. Kısaca # ile ifade edilebilir.

<base-layout>
  <template v-slot:header>
    <h1>H1 Heading</h1>
  </template>

  <p>A paragraph.</p>

  <template #:footer>
    <p>A footer info.</p>
  </template>
</base-layout>

Makalenin Kaynak Linki için buraya tıklayın.

MIT License

Copyright (c) 2020 Cihat Salik

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.