まずVue.jsはjavascriptのフレームワークである。ではVue.jsの何がすごいか個人的に気になった点を抜粋。
データバインディングで開発負担が軽減できる
生のjavascriptであればhtmlに変更を加える際に、
①定数や変数で要素を取得
②変更する内容を定義
③変更した内容をHTMLに反映する
以上の3ステップが必要。
しかし、Vue.jsではVue.jsで記述したデータとHTML側にあるデータ反映対象に対して、片方が変更されたらそれをもう片方に反映する仕組みを持っている。これにより記述を減らすことができる。
SPA開発ができる
仮想DOMを使用することで、SPA（シングル・ページ・アプリケーション）開発が可能になる。
SPAとは同じURLのままで他のページに遷移したような画面表示を提供する技術です。
実際にVue.jsで動かしてみる
https://zenn.dev/sdkfz181tiger/books/363d20b1e591fc/viewer/0beb4c
上記サイトを参考に勉強させてもらっています。
Vue.jsはjQueryと同じくCDNで使用することができる。
htmlに以下を記述
<script src="https://unpkg.com/vue@next" defer></script>
全体のhtmlは以下
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id="app">
<h1>{{ appName }}</h1>
</div>
<!-- JavaScript -->
<script src="https://unpkg.com/vue@next" defer></script>
<script src="script/script.js" defer></script>
</body>
</html>
ここで二重括弧の{{appName}}はMustache構文と呼ばれVue.jsのデータをHTMLテンプレートに埋め込むためのものらしい
{{ appName }}
なのでappNameという単語だけではなく、{{ name }}や{{ age }}といった任意の単語も入る
javascriptの${name}みたいな感じか
1.Vue.jsで扱うデータを用意する
まずはVue.jsで扱うデータを用意する
記述はJSON方式
const myData = {
appName: "Hello Vue.js!!"
}
2.Vue.jsの準備をする
先ほどのデータをVue.jsに設定する。
"Vue.createApp();"を実行する事で、"Vue"オブジェクトが作られる。
引数にはVue.jsに対する様々な設定を記述する。
const app = Vue.createApp({
data(){
return myData;// Vue.jsで扱うデータを指定する
},
created(){
console.log("created!!");// Vue.jsが起動した時に実行
}
});
3.Vue.jsを起動する
最後は、Vue.jsオブジェクトを起動する。
引数には、タグに指定してあるID名"app"を指定する。
app.mount("#app");// 3. Vue.jsを起動する
これでブラウザにはHello Vue.js!!と表示される。
const myData = {
appName: "Hello Vue.js!!"//この文字列を変更するとブラウザに表示される文字列も変更される
}
Vue.jsの初歩の初歩を勉強することができました。
Vue.jsを勉強する際にjavascriptも同時並行で学習できていい感じかもです。
次回はVue.jsで簡単なアプリケーションを作りたいと思います。