Vue.jsが面白そうだから学ぶ①

Vue.jsが前から気になっていたのでこれから勉強しようかと。
文章にすると難しいと思う（纏められない）のでコードベースに記録していきたいと思ってます。

# レンダリング
データとDOMは関連付けられ、全てがリアクティブになります。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
  <div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>

```
```js:index.js
let data = {
  message: 'Hello World'
}

new Vue({
  el: '#app',
  data: data
});
```
これでテキストボックスの値を変更するとpタグ内も変更されるかと思います。
ポイントはVueインスタンスの`el`プロパティにセレクタを用いてバインド先のDOMを指定することと、`data`プロパティにモデルが保持するデータを指定することです。
htmlではバインド先のDOMに`v-model`でプロパティ名を指定すればリアクティブとなります。

# 条件分（if）
先ほどの例で見たHTMLで指定してる**v**ではじまる属性はディレクティブと呼ばれています。
条件分岐を書きたい場合は以下のようにします。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message" v-if="seen">
  <div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>

```
```js:index.js
let data = {
  message: 'Hello World',
  seen: false
}

new Vue({
  el: '#app',
  data: data
});
```
`v-if`属性を指定して`data`プロパティに真偽値を指定すれば値に応じて表示/非表示されます。
`seen`プロパティをtrueにしてみると表示されるのを試してみてください。

# ループ処理
繰り返し処理は`v-for`ディレクティブを用います。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="todo in todos">{{ todo.text }}</li>
    </ul>
    <input type="text" v-model="message">
  <div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>

```
```js:index.js
new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'JavaScript' },
      { text: 'Vue' },
      { text: 'React' }
    ],
    message: "Hello World"
  }
})
```

`{{ todo.text }}`はliタグ内で`v-text="todo"`とすることでも内容の表示ができます。

# イベント処理
次はリストにデータを追加してみたいと思います。今度はモダンなjsで記載する場合と比較してみます。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="todo in todos" v-text="todo"></li>
    </ul>
    <input type="text" id="input">
    <button id="button">add</button>
  <div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>

```
```js:index.js
var app = new Vue({
  el: '#app',
  data: {
    todos: ['JavaScript', 'Vue', 'React']
  }
})
// ボタンを押下した際に入力値を取得して配列に追加 → 入力項目の内容をクリア
document.querySelector('#button').addEventListener('click', function(){
	let text = document.querySelector('#input');
	app.todos.push(text.value);
	text.value = '';
})
```

vueで記載すると以下のようになります。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="todo in todos" v-text="todo"></li>
    </ul>
    <input type="text" v-model="newTodo">
    <button v-on:click="addTodo">add Todo</button>
  <div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>

```
```js:index.js
var app = new Vue({
  el: '#app',
  data: {
    todos: ['JavaScript', 'Vue', 'React'],
    newTodo: ''
  },

  methods: {
    addTodo() {
      this.todos.push(this.newTodo);
      this.newTodo = '';
    }
  }
})
```

`v-on`属性を使ってクリック時のイベントを設定しました。
実際のイベントはvueのmethodsプロパティで定義します。かなりスッキリした書き方ができますね！


ということで続きは②で記事にしたいと思います。