#目的
フロントエンドの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
<!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プロパティはオブジェクトを割り当てる。キー名:値の形式で指定する。
作法だけ覚えれば簡単。チートシートなどを用意すれば誰でも書ける。
#５．次はイベントハンドリング（ボタンアクション）
<!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プロパティに呼び出されるメソッドを記述する。
#６．コンポーネント
<!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 一度だけレンダリングする
レンダリングを１度だけ行い、それ以降は変数が変動しても、表示に反映させなくします。
#８．最後は実践例（リアルタイム入力チェック）
<!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などを利用し他システムとの連携