はじめに

最近Vue.jsを使い始めたので、このページは自分の備忘録的なものです。

下準備

Vue.js

まずはVue.jsを適用させる方法ですが、自分はVue.js自体をダウンロードしてきました。
CDNを使用すれば早いんだけど、実ファイルを手元に置いておきたいという思いから。

axios

Vue.jsでAPI通信をしたい場合にこれを使用するのがベスト(と自分では思ってます)。
これは実ファイルが見当たらなかったのでCDNを使用。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

実際に使ってみよう

JavaScriptの記述方法

基本的な書き方はこんな感じ。

var app = new Vue({
　el: '#main-content',
　data: {
　　hoge: "",
    fuga: ""
　},
　methods: {
　　hogehoge: function() {
      ...
    }
　}
})

まずJavaScriptファイル内で以下の宣言を行います。

var app = new Vue({})

これでVue.jsのオブジェクトを作るみたい。
で、次に

el: '#main-content',

この「el」でVue.jsの適用範囲を指定します。
基本はエレメントのidとかを指定。
画面全体を指定したい場合はbodyを指定してもいいんじゃないかな、自分はやったことないけど。

data: {
　　hoge: "",
　　fuga: ""
　},

「data」ではvueオブジェクトで使用する変数なんかの宣言をします。
ちなみにここで宣言したフィールドに格納された値はページを閉じるまで保持されます。

methods: {
　　hogehoge: function() {
　　　...
　　}
　}

ここからが本番
「method」ではhtmlから直接呼び出せる関数を記述できます。
ここに記述しておくとHTMLから直接呼び出す事ができます。
呼び出し方は後に記載。

axiosの記述方法

axiosの記述方法は以下のような感じです。

axios.post(URL, パラメータ)
.then(function(res) {
　・・・
}).catch(function(res) {
　・・・
});

GETの場合は
axios.get(url, option)
※optionはaxiosのオプション

$.ajax的な使い方で簡単に使えます。
then～catchはfetchと同じ使い方ですね。
GitHubに詳しい使い方があるので見てみたらもっと詳しく分かるかも。
Axios本家

POST時に渡すパラメータは以下の感じで記述。

let params = new URLSearchParams();
params.append('param', パラメータ);
dataブロックの値を渡したい場合は以下の感じでセット
params.append('data', this.hoge);
配列なんかを格納したい場合は以下のような感じ
params.append('data', JSON.stringify(this.配列名));

HTMLの記述方法

JavaScript側の準備ができたら今度はHTML側との連結を記述します。

<input type="text" value="" v-model="labelId">

この「v-model」というのはJavaScript側で記述した「data」ブロックと紐づけます。
上の例でいくとdataブロックにlabelIdというフィールドを作成しておけば、HTML側で入力した内容が自動的にJavaScript側に格納されます。

<button class="btn" type="button" v-on:click="searchData">

次に「v-on」というのはJavaScript側で指定したmethodやらの呼出ができるようになる記述です。
ここでは「v-on:click」としていることでクリック時に呼出となっています。
要はJQueryでいう

$('.btn').on('click', function(){})

っていうのと同じこと。

<td v-text="data.classification"></td>

次はラベル的にdataブロックの値を表示する方法。
「v-text」としておくとdataブロック内のフィールドに格納されている値を表示させます。
よくサンプルである入力すると同時に入力箇所の下に文字が表示されるというものが簡単に作れます。

最後に

ひとまず自分の中での最低限のvue.jsの使用方法は記載したつもり。
本当はまだまだできることがいっぱいあってvue.jsはかなり面白い。
引き続きvue.jsの使い方をまとめていきたいと思っています。