Vue.js とやらを勉強 - BackacheEngineerの技術的な備忘録

ありがたいことにこのご時世でも次の働き先が見つかった。そういうことで転職の関係で次に使うやーつを勉強中（XAMLじゃないんかーい）。ということでこれまでやってきたやつを複数回に分けてまとめる。仕事もあって input も大量にしなきゃでまとめる時間がない。

Vue.jsって
JavaScript って
単一ページで使う Vue.js
- ボタン押して message 部分書き換え
- テキストの内容を反映
次まとめること

Vue.jsって

こいつはいっぱいある javascript とかで Web アプリ作るためのフレームワーク。

Nuxt.js っていうルーティングのためのフレームワークと組み合わせるけど、まだ Nuxt.js は勉強してないんであとで。

ルーティングは複数ページ扱う Web アプリでページの遷移とかぐちゃぐちゃできる。 Node.js と Express っていうフレームワークとおんなじ。

JavaScript って

割と普通のスクリプト言語なんだけど、Web の物体を動かせる（らしい）。実はまだそこの動かすとこまでやれてない。

ただ、HTML + CSS + JavaScript はもうセットっぽい。そこのフレームワークとして React とか Node.js とか Vue.js とかいろんなのが乱立してる。戦国時代みたい。

スクリプト言語として勉強した印象は、this とか var / let とか巻き返し（だっけ？）とか面倒なこともあるけど、まぁ普通のスクリプト言語って感じだった。

単一ページで使う Vue.js

Vue.js の使い方もほんといっぱいあるけれど、まずは単一ファイルで使う基本から。

HTML ファイルを用意して、下記を head タグに入れる。

<script src="https://unpkg.com/vue"></script>

単一ならこれで一応使える。 body 部分は以下のようになる。

<body>
    <!-- message 部分を Vue.js で渡す -->
    <div id="app"> {{ message }} </div>

    <!-- vue.js 部分。 javascript で書く。 -->
    <script>
         let app = new Vue({
             el: "#app",
             data: {
                 message: "Hello World!"
             }
         })
    </script>
</body>

script タグ部分は javascript で書いて、message への値反映とかを vue.js がやってくれる感じ。

el プロパティは id 「app」に対して渡さなきゃいけないっぽい。（ id に「app2」とか用意して複数個やろうとして失敗はした。）

ほんで、data 部分はオブジェクトで書く。今回みたいに HTML 部分に渡したいなら同じプロパティで用意すること。

data にはオブジェクトを渡せばいいので、関数もいける。

    <script>
         let app = new Vue({
             el: "#app",
             data:  function() {
                 return {
                     message: "Hello World!"
                 }
             }
         })
    </script>

関数なんでアロー関数も書ける。かなり入力については寛容なようす。

ボタン押して message 部分書き換え

ボタンを押してさっきの message を切り替える。

<body>
  <div id="app">{{ message }}</div>
  <hr>
  <button onclick="onClick();">click</button>

  <script>
    let data = {
      message: 'Hello World',
    }

    let app = new Vue({
      el: '#app',
      data: data,
    });

    function onClick() {
      data.message = 'You Clicked';
    }
  </script>
</body>

onclick 内に実行させたい関数名を書く。そんで、script 部分にその関数を書くってわけ。

テキストの内容を反映

さくさく行く。次はテキストの内容をそのまんま反映する。 XAML とかでいうところの TextChange イベント。

<body>
  <div id="app">{{ message }}</div>
  <hr>
  <input type="text" oninput="textInput(event);"/>

  <script>
    let data = {
      message: 'Hello World',
    }

    let app = new Vue({
      el: '#app',
      data: data,
    });

    function textInput(event) {
      data.message = event.target.value;
    }
  </script>
</body>