VueJS - Giriş

Vuekullanıcı arayüzleri oluşturmak için bir JavaScript çerçevesidir. Çekirdek kısmı esas olarak görünüm katmanına odaklanmıştır ve anlaşılması çok kolaydır. Bu eğitimde kullanacağımız Vue sürümü 2.0'dır.

Vue temelde ön uç geliştirme için tasarlandığından, önümüzdeki bölümlerde çok sayıda HTML, JavaScript ve CSS dosyasıyla ilgileneceğiz. Ayrıntıları anlamak için basit bir örnekle başlayalım.

Bu örnekte, vuej'lerin geliştirme versiyonunu kullanacağız.

Misal

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'My first VueJS Task'
            }
         });
      </script>
   </body>
</html>

Çıktı

Bu, VueJS kullanarak oluşturduğumuz ilk uygulama. Yukarıdaki kodda görüldüğü gibi, .html dosyasının başına vue.js ekledik.

<script type = "text/javascript" src = "js/vue.js"></script>

Gövdede eklenmiş bir div var. “My first VueJS Task” tarayıcıda.

<div id = "intro" style = "text-align:center;">
   <h1>{{ message }}</h1>
</div>

Ayrıca bir enterpolasyona bir mesaj ekledik, örn. {{}}. Bu, VueJS ile etkileşime girer ve verileri tarayıcıda yazdırır. DOM'daki mesajın değerini elde etmek için aşağıdaki gibi bir vuejs örneği oluşturuyoruz -

var vue_det = new Vue({
   el: '#intro',
   data: {
      message: 'My first VueJS Task'
   }
})

Yukarıdaki kod parçacığında, DOM öğesinin kimliğini, yani e1: '# intro', div'in kimliğini alan Vue örneğini çağırıyoruz. Değer atanmış mesajla birlikte veri var‘My first VueJS Task’. VueJS, DOM ile etkileşim kurar ve DOM {{message}} içindeki değeri değiştirir’My first VueJS Task’.

Konsolda mesajın değerini değiştirirsek, aynısı tarayıcıya da yansıtılacaktır. Örneğin -

Konsol Ayrıntıları

Yukarıdaki konsolda, bir Vue örneği olan vue_det nesnesini yazdırdık. Mesajı ile güncelliyoruz“VueJs is interesting” ve aynısı yukarıdaki ekran görüntüsünde görüldüğü gibi tarayıcıda hemen değiştirilir.

Bu, VueJS'nin DOM ile bağlantısını ve onu nasıl değiştirebileceğimizi gösteren basit bir örnektir. Önümüzdeki birkaç bölümde direktifler, bileşenler, koşullu döngüler vb. Hakkında bilgi edineceğiz.