【Vue.js】始めます。
初めに
つい最近、Vue.jsを勉強するよう勧められたので、覚えたものをアウトプットするという名目でブログに投稿して行きます。
結構噛み砕いて書きます。笑
Vue.jsとは
ご存知かと思いますが、JavaScriptのフレームワークです。
ページ遷移をしない、SPA（Single Page Application）を作成するのに適している。
仮想DOMを使う
使い方
通常のHTMLを書きます。
Vue.jsはappというidを利用する決まり事がある為、appというidを作る。
{{ message }}ここはVue.jsで表示したいものを書くと、それが表示される場所です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js lesson</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
次にscriptタグを作って、Vue.jsのサイトからVue.jsをインストールする。
インストール — Vue.js
今回は、上記URLから少ししたにスクロールしたCDNという項目のURLを利用します。
今こんな感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js lesson</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
// 追加したところ
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
</script>
</body>
</html>
ここからVue.js書いていますが、今回は深く追求せず、形だけ残します。
<script>
let app = new Vue({
el: "#app",
data: {
message: "Hello World"
}
})
</script>
HTMLの{{ message }}とVue.js内で書いているdataの中の文字はリンクするので、同じ文字列であれば機能するようですね。
簡単ですが、ここまで。
時間がある時にドットインストールで触れてみます。
ちなみに今はYoutubeでお世話になってます。
