Vue.js ile merhaba dünya [✔️] Doğru Web Tasarım İstanbul

Merhaba arkadaşlar bu dersimizde vue.js ile merhaba dünya uygulaması yapacağız. Her zamanki gibi işe en zeminden başlıyorum bazı dersler ilginizi çekmese bile takip etmenizi tavsiye ederim.

Vue.js ile merhaba dünya uygulaması;

İlk önce vue.js dosyamızı ekleyelim;

<!-- geliştirici modu -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

yukarıdaki gibi eklerseniz geliştirici modunda çalışır, sistem hatalarını, dom yapısını vs. görüntüleyip, geliştirmenizi sağlar.

<!-- ürün versiyonu -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

yukarıdaki ise ürün versiyonudur. Geliştirici modundaki içerikleri sağlamaz, sıkıştırılmış ve hızlıdır.

yukarıdaki kodları HTML kodlarınızın başlık kısmına ekleyeceksiniz.

<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

Kodlarınızı yazacağınız JAVASCRIPT dosyasını ise alt kısma yazacaksınız.

<script src="vue.js"></script>
</body>
</html>

Herşey tamamsa artık ilk kodumuzu yazabiliriz.

index.html içeriği

<div id="app">{{ message }}</div>

vue.js içeriği

var app = new Vue({ el: '#app', data: { message: 'Merhaba Dünya' }
})

Ekranda Merhaba Dünya yazısını gördüyseniz herşey tamam demektir.

Unutmayın kademe kademe gideceğiz bu ilk adımdı, tebrikler.

ETİKETLER: basit vue vue js dersleri vue.js eğitim seti Vue.js ile merhaba dünya vue.js eğitim

Benzer İçerikler

Doğru web tasarım