Vue.jsを更に学ぶ

#v-bindの応用

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <a :href="url">google</a>
  <a :[attribute]="url">hrefを動的に設定した</a>
</div>
```

```js
new Vue({
	el: '#app',
  data: {
  	url: 'google.com',
    attribute: 'href'
  }
})
```

注目すべきは

```html
<a :[attribute]="url">hrefを動的に設定した</a>
```

:[プロパティ名]="~"

とすることで、hrefやclassなどの属性を動的に決定することができる。


#v-bindの応用v-bind=

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <a v-bind="{href: urlTwitter, id: number}">Twitter</a>
</div>
```

```js
new Vue({
	el: '#app',
  data: {
  	url: 'google.com',
    urlTwitter: 'twitter.com',
    number: 31,
    attribute: 'href'
  }
})
```

注目すべきは

```html
<a v-bind="{href: urlTwitter, id: number}">Twitter</a>
```

このようにオブジェクト形式で指定することもできる。


そして、これを更に省略すると

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <a v-bind="twitterObject">Twitter</a>
</div>
```

```js
new Vue({
	el: '#app',
  data: {
    attribute: 'href',
    twitterObject: {
      href: 'twitter.com', 
      id: 31  
    }
  }
})
```

注目すべきは、以前との比較

```html
以前
<a v-bind="{href: urlTwitter, id: number}">Twitter</a>
今回
<a v-bind="twitterObject">Twitter</a>
```

前回はhref: urlTwitterなどをview側に書いていたが、
今回はオブジェクトをjs側で作ってから渡している。

#v-on総復習

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>現在{{ number }}回クリックされています</p>
  <button v-on:click="countUp(2)">カウントアップ</button>
  <p v-on:mousemove="changeMousePosition(3, $event)">
    マウスを載せてください
  </p>
  <p>x: {{x}}, y: {{y}}</p>
</div>
```

```js
new Vue({
	el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    countUp: function(times) {
    	this.number += 1 * times
    },
    changeMousePosition: function(n, event) {
    	this.x = event.clientX / n
      this.y = event.clientY / n
    }
  }
})
```

注目すべきは、引数。

```html
<button v-on:click="countUp(2)">カウントアップ</button>
<p v-on:mousemove="changeMousePosition(3, $event)">テスト</p>
```

```js
methods: {
    countUp: function(times) {
        this.number += 1 * times
    },
    changeMousePosition: function(n, event) {
        this.x = event.clientX / n
      this.y = event.clientY / n
    }
  }
```

呼び出し側で独自の引数と更にイベントの2つを引数として取りたい場合は

```html
<p v-on:mousemove="changeMousePosition(3, $event)">テスト</p>
```

$eventという表記を使う。

呼び出し側で引数を指定しない場合でも、

function(event)などとすれば、イベントを取得することができる。

#.stopと.prevent修飾子(イベント修飾子)

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>現在{{ number }}回クリックされています</p>
  <button v-on:click="countUp(2)">カウントアップ</button>
  <p v-on:mousemove.stop="changeMousePosition(3, $event)">
    マウスを載せてください
    <span v-on:mousemove="noEvent">反応しないでください</span>
  </p>
  <p>x: {{x}}, y: {{y}}</p>
</div>
```

```js
new Vue({
	el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    countUp: function(times) {
    	this.number += 1 * times
    },
    changeMousePosition: function(n, event) {
    	this.x = event.clientX / n
      this.y = event.clientY / n
    },
    noEvent: function(event) {
    	event.stopPropagation()
    }
  }
})
```

<span>タグの反応しないでください　の部分ではメソッドが動作しないようにするには、上記のような書き方ができる。

ただ、それを更に省略して書くことができ、そこでイベント修飾子の.stopが登場する

```html
 <span v-on:mousemove.stop>反応しないでください</span>
```

このように書くだけで、noEventメソッドなどのメソッドを定義する必要がなくなる。


##.prevent

デフォルトの動作をさせないよーっている修飾子

```html
修飾子を使わない書き方
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <a v-on:click="noEvent" href="google.com">Google</a>
</div>
```

```js
new Vue({
	el: '#app',
  methods: {
    noEvent: function(event) {
      //preventは妨げるという意味。
      //デフォルトの動作をさせないよーっていうメソッド
    	event.preventDefault()
    }
  }
})
```

```html
修飾子を使う書き方
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <a v-on:click.prevent href="google.com">Google</a>
</div>
```
.preventをつけるだけで、preventDefault()メソッドを呼び出してくれる。


#キー修飾子と省略系復習

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <input type="text" @keyup.enter="myAlert">
</div>
```

```js
new Vue({
	el: '#app',
  methods: {    
    myAlert() {
    	alert('アラート')
    }
  }
})
```
v-on:は@と省略することができる。
.enterはエンターキーが押されたらという意味。

#computed(算出プロパティ)の復習

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <input type="text" v-model="message">
  <p>{{ message }}</p>
  <p>{{ messageYokota }}</p>
</div>
```

```js
new Vue({
	el: '#app',
  //dataは動的な表現はできないよ。
  //dataは初期値を扱うんだよ。
  data: {
  	message: 'こんにちは'
  },
  computed: {
  	messageYokota: function() {
    	return this.message + '横田'
    }
  }
})
```

computedプロパティはキャッシュされるよ。
methodはキャッシュされないよ。
methodはテンプレートが少しでも変わると、もう一度処理をやり直しちゃうから注意が必要。
computedプロパティは参照先のプロパティの値が変更された時のみ、処理が行われる。

{{}}内において、computedは呼び出し時に()は必要なく、methodは()を必ずつける。

@click="countUp"などの場合は、()を付けなくても大丈夫。

#複数のスタイルオブジェクトを配列で渡す

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p :style="[styleObject, baseStyles]">Hello</p>
</div>
```

```js
new Vue({
	el: '#app',
  data: {
  	styleObject: {
    	color: 'red',
      'background-color': 'blue'
    },
    baseStyles: {
    	fontSize: '30px'
    }
  }
})
```

渡したいスタイルオブジェクトが複数ある場合は、配列にすることで実現可能。