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 eğitim vue.js eğitim seti Vue.js ile merhaba dünya basit vue.js

Benzer İçerikler

Doğru web tasarım