初めまして！初投稿で緊張気味のタクマです.
OthloTech Advent Calendar 2018の11日目の記事として書かせていただきます．
初心者故に誤った情報や不適切な表現が多々あると思います．お手数ではございますが，都度ご指摘いただけると大変嬉しいです．
さて，今回取り上げる内容はVue.jsについてです．
最近Vue.jsを学んでいるのと，UdemyのVue JS入門決定版！jQueryを使わないWeb開発 - 導入からアプリケーション開発まで体系的に動画で学ぶを修了したのでここら辺で学んだことの整理をしようと考えました．
内容としてはかなり初歩的なものにとどまってしまいますが，最後までお付き合いください．
テンプレート
誰でもここから始められる，Vue.jsの雛形を示しておきます．
今回は初歩的なところを取り上げるので，初心者でも導入のしやすいCDNを採用しています．
Vue.jsのバージョンを変えたい場合は，
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
を変更してください．
See the Pen template by Takuma Kurosawa (@takumaron) on CodePen.
基本文法を覚えよう
上で示した雛形をもとにVue.jsの基本的な文法からまとめていきたいと思います．
是非みなさんも手を動かしながら読み進めてみてください！ちなみに，いちいちテキストエディタを立ち上げてファイルを作って・・・という処理がめんどくさいという人はJSfiddleを使うとオンライン上で簡単に自分のコードを試してみることができます．
Mustache構文
実はすでに上で挙げたテンプレートに出てきている構文です．
<h1>{{ 変数名 }}</h1>
var app = new Vue({
el: '#app',
data: {
変数名: "Hello, Vue.js!",
}
})
これは直感的にわかりやすいかなと思いますが，javascriptで定義した変数の内容をhtmlに埋め込む時に使う文法です．{{ }}がヒゲ(Mustache)に見えることからこの名前がつけられています．
さて，以下のコードではどのような出力結果になるでしょうか．一度頭の中で想像してからResultボタンをクリックしてみてください．
See the Pen template by Takuma Kurosawa (@takumaron) on CodePen.
想像していた結果と同じ結果になりましたか？この調子で進めていきましょう！
v-if
テキストや画像の表示・非表示を切り替えるための構文です．
使い方としては，データの中にtrueかfalseのどちらかを持つ変数を定義しておき，html側でv-if=変数名を適用させたい要素に付け加えます．
<p v-if=変数名>Hello</p>
var app = new Vue({
el: '#app',
data: {
変数名: trueかfalse
}
})
さて，以下のコードではどのような出力結果になるでしょうか．一度頭の中で想像してからResultボタンをクリックしてみてください．
See the Pen v-if by Takuma Kurosawa (@takumaron) on CodePen.
想像した結果と同じ結果になりましたか？
v-for
他の言語等でプログラミングを学んでいる方にはなじみが深いと思いますが，繰り返し処理をするための構文です．Vue.jsでは配列などの複数あるデータから1つずつ取り出して表示するときなどによく使われます．早速コードを見ていきましょう．
<ol>
<li v-for="[格納するための変数名] in [配列名]">{{ 格納するための変数名 }}</li>
</ol>
var app = new Vue({
el: '#app',
data: {
配列名: ['要素1', '要素2', '要素3'],
}
})
イメージがつきにくいと思うので，下のコード結果を見ながらv-forの使い方を掴みましょう！
See the Pen v-for by Takuma Kurosawa (@takumaron) on CodePen.
v-model
双方向データバインディングと言われているVue.jsの強力な機能の一つで，__ユーザからの入力をその都度処理をしてページに反映させるための構文__です．
<input type="text" v-model="変数名">
<h1>{{ 変数名 }}</h1>
var app = new Vue({
el: '#app',
data: {
変数名: "",
}
})
今回はユーザからの入力をテキストとして受け付けていますが，チェックボックスのtrue/false等も受け付けることができます．ユーザからの入力に対して瞬時に反応したい機能などに使いましょう．
それでは，以下の結果を想像してみてください．
See the Pen v-model by Takuma Kurosawa (@takumaron) on CodePen.
少し前の復習も兼ねて，先ほど出てきたv-ifも無理やり入れ込んでみましたw想像していた結果通りでしたか？
v-on
今回取り上げる最後の構文になります．__ユーザが所定の動作をした時に反応して何かしらの応答を返すための構文__です．これまでの構文は，Javascript側で定義していたものは変数や配列といったデータのみでした．v-on構文では独自の処理をユーザに返すことができるため，その__動作を定義するためのmethodsというデータ__の概念が登場します．難しいものではないので，一緒に見ていきましょう．
<button v-on:ユーザからの入力種類="メソッド名">
Click!
</button>
var app = new Vue({
el: '#app',
methods: {
メソッド名: function() {
//どんな挙動をユーザに返すか
}
}
})
まずHTMLの方から確認していきましょう．ユーザからの入力種類にはVue.jsがあらかじめ用意しているオプションが入ります．例えば，ユーザがクリックした時↓
<button v-on:click="メソッド名">
や，ユーザがEnterキーを押した時↓
<button v-on:keyup.enter="メソッド名">
などが指定できます．どんな入力を指定できるか知りたい方は，Vue.js v2 イベントハンドラ一覧を参照してみてください．わかりやすくまとめられています．
次はJavascriptの方を見ていきます．注目していただきたいのは，これまでdataと書いていたところがmethodsに置き換わっているというところです．正確には置き換わっているというより，dataの定義を消しているだけなので，一緒の場所に混在させることももちろん可能です．
イメージとしては，__数値や文字列，配列といったデータをまとめておくdata__と同じようにして__独自の挙動をfunction(関数)として定義することができるmethods__も一つにまとめることができると考えていただければ結構です．
var app = new Vue({
el: '#app',
data: {
message: "Hello,World!",
},
methods: {
doMethod: function() {
//独自の挙動を定義できる
}
}
})
こういうことも可能ですよということですね＾＾
function()の中身や使い方については今回言及しませんが，以下のTechAcademyさんのページを参照していただけると理解していただけると思います．
v-on構文ではどのような挙動になるか確認してみましょう！
See the Pen v-on by Takuma Kurosawa (@takumaron) on CodePen.
いかがでしたか？今回は入門編ということで5つの基本構文について書きました．私自身も最近Vue.jsを触り始めたところなので分かりづらい説明になっていたり，間違っていたりするかもしれません．是非気づいた点，思ったことなどあればコメント等頂けると嬉しいです．ここまで読んでいただきまして有難うございました．
また，最近twitterも始めましたので気軽にフォローして頂けると嬉しいです．一緒にプログラミング学習頑張りましょう！！
明日のOthloTech Advent Calendar 2018は@daizudesuyo2525さんです．デザインについての記事を書いてくださるそうなので楽しみですね！！
ではでは，今回は以上にしようと思います．今回の投稿を皮切りにより多くのアウトプットをしていこうと考えていますので，今後ともよろしくお願いいたします．