わからなかったVue.jsの単語まとめ

##この記事について
Vue.jsを初めて学んだときによく分からなかった単語やらをまとめる記事ですので、優しい目で見守ってください。

少しずつ更新！！！

##参考URL
https://jp.vuejs.org/


##まずVue.jsとは
WebアプリケーションのUIを構築するためのJavascriptフレームワークのこと。
任天堂やLINEなどの有名企業が導入しており、ReactやAngularJSと並ぶ3大Javascriptフレームワークの一つである。


###なぜ導入するのか
Webアプリケーションはページの表示が変わるタイミングでバックエンドとの通信が発生して、ページ全体を読み込まないといけない。こんなことではユーザにとったら時間がかかってイライラして使いづらい。
そのためにページの読み込みが起こらないように、変化が必要な箇所だけ変化させておいて、あとのデータ処理は見えないところでやってもらって**SPA**として構成する形式できるのだ。

####従来のwebアプリケーションの場合
①ユーザーがアクションを起こす
②サーバーに通信
③サーバー側でHTMLを生成
④サーバーからHTMLを受け取る
⑤HTMLを描写


####SPA
①ユーザーがアクションを起こす
②そのアクションに必要なデータだけをサーバーに要求
③返ってきたデータをjsで処理
④差分を描写



##Vue.jsのオプション構成
```ruby:vue.js
new Vue({
    el: '#app',
    data: {
        #コンポーネントが保持するデータ
    },
    methods: {
        #コンポネートが持つメソッド
    },
    filters: {
        #コンポネートが持つフィルター
    },
    computed: {
        #コンポネートが持つ算出プロパティ
    },
    watch: {
        #コンポネートが持つ算出ウォッチャ
    }
 });
```



##Vueインスタンスを生成
`new Vue({})`を記述することによって「こっからVue.js使いまっせ！！！」って宣言する = Vueインスタンスを生成すること

```ruby:vue.js
new Vue({
   el: '#app',
});
```

```ruby:main.html
<div id="app"></div>  #idがappであるここの要素がVue.jsと連動させられることが宣言されてる。
```

`new Vue({})`の中にある`el: 'app'`はHTMLの#appの中身だけ、つまり**idがappである要素をVue.jsと連動させる**ことを表す。Vue.jsにはel以外にも、dataやmethodsなどのプロパティが用意されている。
※プロパティとは、そのオブジェクトに紐付いたデータのこと。



##データバインディング
英語のbindの「結びつける」って意味から連想しやすく、Vue.jsのバインドとは**javascriptファイルに記述したVue.jsの処理と、HTMLファイルに記述した内容を結びつけること。**

```ruby:vue.js
new Vue({
   el: '#app',
   data: {
       message: "Hello Vue.js"
});
```

```ruby:main.html
<p div="app">
  {{ message }} 
 #Vue.jsのdataプロパティで設定したキー（message）のvalueが連動させるマスタッシュ構文を追記
</div>  
```


elの下に追加したdataプロパティは「キー:バリュー」の形でデータを作成することができる。
今回の場合であればmessageをキーとして、Hello Vue.jsというバリューがある。
用意したdataをHTMLに反映させるために`{{}}（マスタッシュ構文）`を使用する。
**データバインディングのもっとも基本的な形は、マスタッシュ構文を利用したテキスト展開**



##リアクティブ
値の更新を行うと、更新した値が反映されるシステム。



```ruby:vue.js
var app = new Vue({
    el: '#app',
    data: {
        number: 1
    },
    methods: {
        plusOne: function() {
            return this.number += 1;
        }
    }
})
```

```ruby:main.html
<p div="app">
  <p>{{number}}</p>
  <button v-on:click="plusOne">プラスボタン</button>
</div>  
```

上記の記述をするとブラウザではこのように表記される。

![スクリーンショット 2020-08-31 8.36.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/82dcbff5-b076-7d22-789c-6caa90a3ddb8.png)


###ディレクティブについて
htmlで見慣れない`v-on:click="plusOne"`という記述がある。
Vue.jsでは「v-」から始まる特別な属性をよく使い、他にも「v-model」や「v-if」などの様々な機能が利用できる便利なやつ。主にバインドをするために必要になってくる。

今回では「v-on」属性を使っており、`v-on:click(イベント)="機能"`でクリックしたときにある機能を実行させるという意味になる。上記の場合だと、クリックをするとplusOneが実行されることになる。

###機能はmethodsプロパティで設定する
```ruby:vue.js

    methods: {
        plusOne: function() {
            return this.number += 1;
        }
    }

```

htmlで記述したv-onによって、methodsで記述したplusOneメソッドで定義している処理を実行してくれる。
detaで定義したオブジェクトにアクセスするために、「this」をつけて**this.number**という形で記述してnumberの値を更新していく。

ここまで設定できたらブラウザでボタンを押せば数字が１つずつ増えていき、リアクティブを実感できるはず！！！





##双方向データバインディング（v-model）
これまではデータバインディングというをやっていて、「dataとHTMLを結び付けるという意味」
双方向データバインディングというのは 「**dataを更新すれば HTML が更新されて、 HTML を更新すれば data が更新される」**という意味。
つまりVue.js側からdataをイジるだけではなく、HTML側からでもdataをイジれるのだ！！！！



```ruby:vue.js
new Vue({
   el: '#app',
   data: {
       message:'Hello'
   }
});
```

```ruby:main.html
<div id="app">
   <input type="text" v-model="message">
   <p>{{ message }}</p>
</div>
```

この`v-model`ディレクティブは公式ドキュメントによると以下となっている。。。。
全然わかんない（笑）


>form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成するには、v-model ディレクティブを使用することができます。それは、自動的に入力要素のタイプに基づいて要素を更新するための正しい方法を選択します。


今回の場合であれば`v-model="message"`となっている。つまりこれは「v-modelでVueインスタンスで定義したdataプロパティのmessageを操作しますよ」って宣言している。

Vue.jsのdataでは「message:'Hello'」としているが、ブラウザで「こんにちは」を入力するとHTMLのp要素内の表記が変わっている。
![スクリーンショット 2020-08-31 9.04.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/ed99cfab-4740-f64a-4495-955754585617.png)

こんな感じでVue.js側からだけではなく、HTML側からもデータを操作することを双方向データバインディングと呼ぶ。



##computed（算出プロパティ）とは
データに基づいて何らかの加工を行った結果を返すプロパティで、基本的には読み取り専用。
methodsプロパティと異なる点は、キャッシュをするかしないかの違い。

- **computed（算出プロパティ）**
一度テンプレートで参照されると、Vueはその時の値をキャッシュするようになっていて、再度同じ算出プロパティが参照された場合はキャッシュした値が取り出される。
依存関係にあるいアクティブデータが更新されない限り、キャッシュが参照され続ける。
データの加工を伴った取得ができ、getterのような役割を果たしてくれる。
**間違ってもデータの加工だけをするのであって、データ自体を更新してはいけないこと！！！**

- **methods**
参照されるたびに処理を実行する。
データの取得に限らず、操作やデータの更新等様々な処理に使用


###使い分け
毎回同じ結果になるならキャッシュで記憶してくれる算出プロパティを使えばパフォーマンスが上がる。


##フィルターとは
マスタッシュ構文でテンプレートにバインドしたデータがテキストとして表示される前に、何らかの加工をすることができる機能のこと。
汎用的なフィルターはVue.filter()メソッドで、全てのコンポーネントから共通で利用できるようになる。

```ruby:main.html
Vue.filter('フィルター名', 関数) {
    #加工するための処理
}
```


##ウォッチャとは
**データの変更を監視する機能。**
特定のデータまたは算出プロパティの状態を監視して、変化があったとき登録した処理を自動的に実行するもの。算出プロパティとは違い、ウォッチャ自体が値を返すことはない。
どうやらAjaxを実現したいならウォッチャがいるみたい。

###正直v-onのイベントハンドラでもできますよね？？？
と、お思いのそこのおれ！！！！
どっちでも可能であるが、ウォッチャを使っちまえばHTML側にv-onを記述しなくてもいいし、クリーンな状態を維持できるのがウォッチャのいいところ。