#目的
フロントエンドのJSを知らないので、どれでもいいので理解したい。
フロントエンドで主流は廃れたJQueryを除くと３つある。

Angular.js
React.js
Vue.js
このなかで、Github上で一番人気があるのがVue.jsである。
なので、Vue.jsのザックリ理解するために入門編としてまとめてみた。

#１．Vue.jsとは
　JavaScriptフレームワークの１つで、MVCモデルのView層を扱います。
　読み方：ビュードットジェイエス
　特徴：学習コストが低い

　※スペルを間違えやすいので、声に出すと間違えない。
　○：ブイユーイー
　✗：ブイイーユー

###対象ブラウザ：ECMAScript5（エクマスクリプト）をサポートするブラウザ。
　　　　　　簡単に言うと、最近のJavaScript標準をサポートするブラウザ。→Chrome,IE9以降

#２．ツール

　Vue DevtoolsというChromeの拡張機能が公開されている。
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja&
検索ワード：vue chrome プラグイン

　Nuxt.jsという便利なフレームワークも提供されており、そちらを使うようになってからは
もっぱらVSCodeを利用している。

VSCode
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

VSCode日本語化
https://qiita.com/ohno888/items/b9e955a2ab1ad0e09767

#３．セットアップ
　Vueはライブラリなので、downloadして読み込ませるか、CDNを利用する。
　https://jp.vuejs.org/v2/guide/installation.html
　以下、CDNが使えるのでそちらを利用して開発できる。
　※CDNとはコンテンツデリバリーネットワークの略で、大容量のデジタルコンテンツをインターネット上で大量配信するためのネットワークのこと。

#４．さっそくHello World

hello.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<!--Vueデータを出力する-->
	<div id="app">{{ msg }}</div>
	
	<script>
	// id=appの要素にVueを適用する
	const app = new Vue({
		el:'#app',
		data:{ msg:'Hello World!' }
	})
	</script>
</body>
</html>

###解説
(1){{プロパティ名}}でデータ出力する。
(2)elプロパティはオブジェクトを割り当てる。キー名:値の形式で指定する。

作法だけ覚えれば簡単。チートシートなどを用意すれば誰でも書ける。

#５．次はイベントハンドリング（ボタンアクション）

event.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<!--Vueデータを出力する-->
	<div id="app">
		<button v-on:click="changeMsg">change</button>
		<p>{{ msg }}</p>
	</div>
	
	<script>
	// id=appの要素にVueを適用する
	const app = new Vue({
		el:'#app',
		data:{ msg:'hoge' },
		methods:{
			changeMsg:function(){
				this.msg = 'fuga'
			}
		}
	})
	</script>
</body>
</html>

###解説
「v-on:DOMイベント」でイベントハンドリングが実装できる。
methodsプロパティに呼び出されるメソッドを記述する。

#６．コンポーネント

component.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<!--Vueデータを出力する-->
	<div id="app">
		<my-comp></my-comp>
	</div>
	
	<script>
	Vue.component('my-comp',{
		template:'<h1>hogehoge</h1>'
	})
	var app = new Vue({
		el:'#app',
	})
	</script>
</body>
</html>

###解説
コンポーネントは「Vue.component()」で定義します。
templateプロパティにコンポーネントに含める要素を指定します。

#７．ディレクティブ
Vue.jsではHTMLタグに「v-**」の属性を指定することができ、これを「ディレクティブ」と呼びます。
ディレクティブを使いこなすことが、Vue.jsを使いこなす第一歩と言えます。

#代表的なディレクティブ
v-text テキストをレンダリングする

v-html HTMLをレンダリングする。タグも変換しないで出力します。
でタグもHTMLで出力できます。rawHTMLが値

v-show 条件に応じたレンダリング制御を行う
　CSSのdisplayプロパティで表示を制御

v-if,v-else,v-else-if 条件分岐を行う
　要素自体の有無を制御

v-for 繰り返しを行う

v-on イベントハンドリングを実装する
　@で記述を省略することができます。

v-bind HTML属性を割り当てる
　:で記述を省略することができます。

v-model 入力フォームへモデルを割り当てる
　input,select,textareaに対してVueオブジェクトのデータとフォーム部品の値を関連付けます。

v-pre テキストをそのまま出力する

v-once 一度だけレンダリングする
　レンダリングを１度だけ行い、それ以降は変数が変動しても、表示に反映させなくします。

#８．最後は実践例（リアルタイム入力チェック）

validation.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<style>
		#app .error{
			color: red;
		}
	</style>
</head>
<body>

	<!--Vueデータを出力する-->
	<div id="app">
		<input type="text" v-model="msg">
		<div class="error" v-if="error.require">必須項目です</div>
		<div class="error" v-if="error.tooShort">短すぎます</div>
		<div class="error" v-if="error.tooLong">長すぎます</div>
	</div>
	
	<script>
	const app = new Vue({
		el:'#app',
		watch:{
			msg:function(newVal, oldVal){
				this.error.require = (newVal.length < 1)?true:false;
				this.error.tooShort = (newVal.length < 3 && newVal.length > 0)?true:false;
				this.error.tooLong = (newVal.length > 5)?true:false;

			}
		},
		data:{
			msg:'hoge!',
			error: {
				require: false,
				tooShort: false,
				tooLong: false
			}
		}
	})
	</script>
</body>
</html>

###解説と注意点
watchは、入力値を監視するためのオプション。

Vueのメソッドやプロパティはカンマでつなぐ必要あり。忘れやすいので注意。上でいうとdataの前のカンマ
app .errorの指定で、appの後ろに空白が必要

以上でVue.jsの入門編は終わり。
他にもVue RouterやVuexなど色々あるが、
まずは上記を押さえれば入門者としては良いと考えています。
##今後の記載予定
入門編：当記事
初級者編：Vue CLI、Vue Router、Vuexなど
中級者編：Nuxt.jsなどを利用し他システムとの連携