Vue.jsを学習した振り返り

#はじめに
Vue.jsを学習した内容についての投稿

#目次
・Vue.jsのメリット
・Vue.jsの基本的な使い方
・Vue.jsインスタンスを作る
・バインディングとは
・テイストとデータの（紐付け）バインデジング
・属性とデータの（紐付け）バインディング
・ディレクティブの省略記法
メソッドについて






##Veu.jsのメリット


・Vue.jsはDOM操作を自動で行うため、データやイベントが多くなってもコードが複雑になりにくい。
##Veu.jsの読み込み

```Vue.js

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Vue.js Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="example">{{ greeting }}</div>
    <script src="main.js"></script>
  </body>
</html>
```


```Vue.js
const app = new Vue({
  el: '#example',
  data: {
    greeting: 'Hello Vue.js!',
  },
});
```

プレビューすると'Hello Vue.js!'と表示される。

Vue.jsを読み込みはhead要素内にいれる


```Vue.js
<head>
    <meta charset="utf-8">
    <title>Vue.js Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
```

head内要素にいれる理由は、ページ表示した最初の一瞬だけHTMLファイル書いた部分が
見えてしまう場合があり、これはHTMLファイルに記述した{.....}をVue.jsが処理するまでに
少し時間がかかり、head要素内に入れる方がbodyの直前に入れるより処理が早く表示を抑えることができる。

##Vueのインスタンス作成

newは演算子の一つでVue ( {  } )はオブジェクトを複製するための特別な関数。特別な関数のことを
<font color="Red">new コンストラクタ</font>という。複製したオブジェクトのことを<font color="Red">Vue インスタンス</font>といいます。

```
const app = new Vue( )
①Vue　　　コンストラクタ
②new Vue コンストラクタの呼び出し
③app 　　 インスタンスの格納  

```

Vueコンストラクターの引数には、オブジェクトを渡す。Vue.jsでオブジェクト渡すことを**オプションオブジェクト**という。オプションオブジェクトでプロパティを設定することでVue.jsの機能を使うことができます。

```Vue.js
const app = new Vue({
  el: '#example',
  data: {
    greeting: 'Hello Vue.js!',
  },
});
```

elとdataのプロパティをオプションオブジェクトに設定しています。


elオプション
elオプションの<font color="Red">el</font>は「element(要素)」の略称。elオプションにはDOM要素を設定します。
上記のmain.jsのコードでは#exampleを設定しています。index.html内のid属性div id="example"を
設定したことになります。設定した要素内のHTMLは、**テンプレート**というものになります。
テンプレート内ではVue.jsの機能が使えます。また、テンプレートはVue.jsを通してブラウザに表示されます。

```Vue.js
<div id="example">{{ greeting }}</div>
```

Vueの管理下に置かれたことになります。



dataオプション
dataオプションはデータを設定する。Vueインスタンスのプロパティにアクセスできます。

```Vue.js

data: {
    greeting: 'Hello Vue.js!',
  },
```

データオプションのオブジェクトにはgreetingという名前を設定して、その値に'Hello! vue.js'という文字列を設定。

index.htmlをプラウザで開きデベロッパーで確認すれば

```Vue.js

>app.grreeting
"Hello! Vue.js"
```

と表示されます。


#テキストとデータを結びつける
Vueインスタンスのデータを表示させるにはHTML内で{{...}}を使用する。{{...}}の中にはデータオプションで指定したオブジェクトのプロパティを書き込む。

```Vue.js

<div id="example">{{ greeting }}</div>
```

```Vue.js
const app = new Vue({
  el: '#example',
  data: {
    greeting: 'Hello Vue.js!',
  },
});
```
<font color="Red">この時dataやappの名前は不要。</font>


{{...}}を**mustache(マスタック)構文**という。
HTMLでテンプレート{{...}}を使用して、Vueインスタンスのdataオプション内のデータと結びつけることを、
データバインディング（結びつける）という。

マスタック構文を使ってVueインスタンスのdataオプションとバインディング(結びつき)させる。
バインディングする事でデータが自動で変更され、Vue.jsによってDOM操作が自動で処理される。

#属性とデータを結びつける

属性とVueインスタンスのデータをバインディングすることもできる。属性の場合はマスタック構文は使えない。
その場合は<font color="Red">v-bind属性</font>を使用する。v-bindなどの<font color="Red">特別な属性をディレクティブ</font>という。



```Vue.js

<div id="example">
  <a v-bind:href="url">Google</a>
</div>
```



```Vue.js
const app = new Vue({
  el: '#example',
  data: {
    url: 'https://www.google.com/',
  },
});
```

上記の場合はa要素のhref属性値をVueインスタンスのdataオプションurlプロパティと
バインディング（結びつけ）しています。v-bind:のあとに記述されているのがv-bindの引数になります。

# v-for 配列する処理

v-forは、配列やオブジェクトを繰り返し処理できます。配列は格納した変数  in  配列の構文を使用する。

書き方



```Vue.js

<ul id="#example">
   <li
    v-for="member in members "
    v-bind:key="members"
>
   {{ member }}
   </li>
</ul>
```

```Vue.js
const app = new Vue({
  el: '#example',
  data: {
    members: ['太郎', '山田', '佐藤', '鈴木'],
  },
});
```

上記の場合はmembersが配列。Vueインスタンスのデータオプション内で設定した配列になります。
v-bind:keyはVueが要素は別々であるとして識別するのに必要になる。

その他の書き方



```Vue.js
<ul id="#example">
   <li
    v-for="（member,index) in members "
    v-bind:key="index"
>
    {{ index }} : {{ member }}
   </li>
</ul>
```

```

・0 : 太郎
・1 : 山田
・2 : 佐藤
・3 : 鈴木
```

リスト表示にインデックス(番号)を付け加えることができる。

#v-for オブジェクトの繰り返し処理

プロパティの値を格納した変数  in  オブジェクトの構文を使用する。



```Vue.js
<ul id="#example">
   <li
    v-for="character" in characters "
    v-bind:key="character"
>
    {{ character }}
   </li>
</ul>
```


```Vue.js
const app = new Vue({
  el: '#example',
  data: {
    characters: {
      symbol: ミッキー,
      girlfriend: ミニー,
      duck: ドナルド,
  },
});
```

結果

```html

・ミッキー
・ミニー
・ドナルド
```

#オブジェクトの繰り返し処理２

（プロパティの値を格納した変数,  プロパティ名を格納した変数)  in  オブジェクトでプロパティ名を利用できる。


オブジェクトの繰り返し処理２


（プロパティの値を格納した変数,  プロパティ名を格納した変数)  in  オブジェクトでプロパティ名を利用できる。


```Vue.js
<ul id="#example">
   <li
    v-for="(character, key)" in characters "
    v-bind:key="key"
>
   {{ character }} : {{ character }}
   </li>
</ul>
```


```Vue.js
const app = new Vue({
  el: '#example',
  data: {
    characters: {
      symbol: ミッキー,
      girlfriend: ミニー,
      duck: ドナルド,
  },
});
```

結果

```Vue.js
・symbol: ミッキー
・girlfriend: ミニー
・duck: ドナルド
```


v-on イベント処理

v-onは要素のイベントを処理する。


```Vue.js
<div id="example">
     <input
	v-bind:value="name"
	v-on:input="name = $event.target.value"
     >
     <p>{ { name } }</p>
</div>
```


```Vue.js
const app = new Vue({
  el: '#example',
  data: {
    name: '太郎',
  },
});
```

この場合、input要素に入力することで、$event.target.valueの式が実行される。
($event)の$はjQueryで使用したものと関係ない。



ディレクティブの省略記法

v-bind、v-onは省略して書くことができる。

下記のコードを

```Vue.js
<input  v-on:input="name = $event.target.value" :value="name">
```

v-on:を@マーク、v-bind:を : に置き換えれる

```Vue.js
<input  @:input="name = $event.target.value" :value="name">
```

※コードを省略する時は必ず統一する。


v-model フォーム入力

複数のフォーム入力はv-modelを使う。(v-bind、v-onを複数の要素に結びつけるとコードが複雑になる)


```Vue.js
<div id="example">
    <input v-model="name">
    <p>{{ name }}</p>
</div>
```


```Vue.js
const app = new Vue({
  el: '#example',
  v-model: {
    name: '太郎',
  },
});
```

※下記の場合はname

```Vue.js
<input v-model="Vueインスタンスデータのdataオプションに設定したプロパティ名">
```

input要素のイベントが発生したら、指定したデータの値を更新する処理が行われ、
v-bind、v-onを使わなくても双方向のバインディング(結びつけ)ができます。

算出プロパティ


計算処理(難しい処理)を行うときは算出プロパティを使う。
※難しい計算処理をテンプレート(HTML)内に記述するとコードが複雑でエラーの原因になります。
   算出プロパティでテンプレートも見やすくなり、関数を使うことで複数の式を使用することも
   できる。




メソッド

メソッドもオプションオブジェクトのプロパティとして書く。オプション名はmethods。

算出プロパティ(computed)とメソッド(methods)の使い分け


算出プロパティはキャッシュ(一時保存)され、データが更新された時だけ再計算される。

index.html

```Vue.js
<div id="example">
      <p>
        <button v-on:click="countUp()">{{ count }} 回</button>
      </p>
      <p>現在時刻(メソッド):{{ getDate() }}</p>
      <p>現在時刻(算出プロパティ): {{ date }}</p>
</div>
```


```Vue.js
const app = new Vue({
  el: '#example',
  data: {
   count 0,
  },
  computed: {
   date() {
      return newDate().tolocalStrings();
    },
  },
  methods() {
    countUp() {
     this.count += 1;
    },
    getDate() {
     return newDate().toLocalStrings();
     },
   },
});
```

ボタンクリックでcountUp(   )メソッドが呼び出され、Vueインスタンスのデータのcountの値、
countと結びついた<button>要素内のテキスト(数字)も変化し、現在時刻(メソッド)も更新される。
メソッド(methods)は再描画されるたびに更新されるが、算出プロパティはVueインスタンス
データの値が変更になった場合のみ再計算される。