今回は、Vue．jsについて学習していきたいと思います。
Vue.jsとは、フロントエンドで使われる言語です。Javascriptのフレームワークになります。
HTMLとCSSで書いたあとに、動きを付けることができます。
フロントエンドではよく使われる言語のようです。
他にも、Javascriptのフレームワークはたくさんあり、用途ごとに使い分けて行きます。
また、Vue.jsには更にフレームワークが存在するのですが、ここでは割愛させていただきます。
Vue.jsを使うメリット
Vue.jsを使うメリットは、いくつかあります。
①HTMLとCSS
②Javascriptの知識があれば割とすんなり入ってくる。
③DOMがを自動的処理してくれる。（JsからHTMLとCSSのデータを取得してくれる）
です。
導入の仕方
コマンドを使ったりすることは特にないですが
HTMLとVue自体にお決まりのような記述内容があります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js practice</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="script/script.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
message: 'こんにちわ！'
}
})
上記が主なVue.jsの雛形となっています。
ブラウザで表示すると以下のようになります。
HTML側からのVue.js
① Vue Devtools
これを使うことによりVueアプリケーションのバグを簡単に見つけることができるため、インストールしとくことをおすすめします。
HTMLでは以下のように記述します。bodyタグ一番最後に入力します。
また、その下にJsフォルダとそのファイルを読み込んでくれるように記述します。
"https://cdn.jsdelivr.net/npm/vue@2.6.12"
②divタグ
後で記述しますが、これは、Vue.jsでインスタンスの展開はここだよ〜って意味です。
で、divタグの中に入れてほしい単語などを記述します。
UIの領域になります。Ul/UXについては後ほど学習していきます。
JS側からの実装
①var
一行目にVarという記述がみられますね。これは、Vueの中核。これがなければそもそも動きません。心臓です。
ちなみにVarとはJsでの変数の宣言の場合に使われます。
②data
これはオブジェクト、配列の指定になります。詳しくは後に学習します。
以上がVue.jsを使うときに主に記入する内容になっています。