カテゴリー
JavaScript
Vue.js
投稿日時
2017-10-31 21:04:22
Vue.js入門編3部作、[その1](http://yk0807.com/larablog/posts/11)、[その2](http://yk0807.com/larablog/posts/13)に続いて今回で感動の(?)最終回です。
前回がv-forで終わったので、今回はコンポーネントから紹介していきます。
# 10. コンポーネント
コンポーネントとは一言で言うと、部品化することです。よく使われる箇所をコンポーネントで部品化することによって使いまわしやすくなって便利になります。
簡単な例を紹介してみます。
```JavaScript
Vue.component('hello', {
template: '<span>{{ message }}</span>'
})
new Vue({
el:'#app6',
data: {
message: 'Hello world!'
}
});
```
```html
<div id="app6">
<hello></hello>
</div>
```
これで、helloタグの中に"Hello world!"と表示されるようになります。
ちなみに、Vueコンストラクタに渡すことが出来るオプションはコンポーネントの中で使用することも出来ます。ただ、dataだけは関数として渡す必要があります。
こんな感じです。
```JavaScript
Vue.component('count-up', {
template: '<div v-text="count"></div><button v-on:click="countUp">カウントを増やす</button>',
data: function() {
return count: 0
},
methods: {
countUp: function() {
this.count++;
}
}
})
new Vue({
el:'#app7'
});
```
```html
<div id="app7">
<count-up></count-up>
</div>
```
# 11 props
HTMLでタグに属性を定義するように、コンポーネントでもpropsオプションを用いて属性を定義することが出来ます。
```JavaScript
Vue.component('student', {
props: ['name', 'schoolyear'],
template: '<span>名前:{{ name }}</span><br><span>学年:{{ schoolyear }}</span>'
})
new Vue({
el:'#app8',
data: {}
});
```
```html
<div id="app8">
<student name="坂本龍馬" schoolyear="中学2年"></student>
</div>
```
とやると、
名前:坂本龍馬
学年:中学2年
と出てくるはずです。
# 12 v-bind
ある条件のときにスタイルの属性をまとめて変更したいという場合があると思います。そのようなときにv-bindを用いてデータバインディングを行うことで簡単にクラスやスタイルをいじれるようになります。
例えば、こんな感じです。
```JavaScript
var app9 = new Vue({
el:'#app9',
data: {
isActive: true
},
methods: {
change: function() {
if (this.isActive) {
this.isActive = false;
} else {
this.isActive = true;
}
}
}
});
```
```html
<div id="app9">
<p v-bind:class="{'active':isActive, 'not-active':!isActive}">ボタンを押すたびにここのスタイルが変わります</p>
<button v-on:click="change">スタイル切り替え</button>
</div>
```
この例では、ボタンを押すたびにpタグのクラスがactive←→not-activeと切り替わるようになります。
v-bind:styleも、似たような感じで使えます。
```JavaScript
var app10 = new Vue({
el:'#app10',
data: {
fontsize: 8
},
methods: {
countUp: function() {
this. fontsize ++;
}
}
});
```
```html
<div id="app10">
<p v-bind:style="{fontSize:fontsize + 'px'}">ボタンを押すたびに文字が大きくなります</p>
<button v-on:click="countUp">文字を大きくする</button>
</div>
```
これで、ボタンを押すたびに文字がどんどん大きくなるのがわかると思います。
# 13 カスタムディレクティブ
これまで、Vue.jsのいろいろな機能を紹介してきましたが、その中で先程の **v-bind**や **v-model**, **v-show**など、v-で始まるものが色々出てきたと思います。これらはまとめてディレクティブと呼ばれます。
このディレクティブは自分で作ることも出来たりします。
こんな感じです。
```JavaScript
Vue.directive('directive', {
update: function(newVal, oldVal) {
this.el.innerHTML = '<span>' + oldVal + '->' + newVal + '</span>';
}
});
var vm1 = new Vue({
el: '#app11',
data: {
val: '',
comment: 'Hello world!'
},
methods: {
updateVal: function() {
this.comment = this.value;
}
}
});
```
```html
<div id="app11">
<div v-directive="comment"></div>
<input type="text" v-model="value">
<input type="button" v-on:click="updateVal()" value="update">
</div>
```
テキストボックスに何か入れてupdateボタンを押すと、前の文字列と新しい文字列が表示されるようになります。
# 終わりに
ここまでの3部作の内容を理解できれば、Vue.jsの初歩はつかめてきたと言えるでしょう。後はテキストエディタでもToDoアプリでも、とにかく作ってみるのみです。
後、先日のバグも[先輩PGに教わった情報](https://qiita.com/alfa/items/b0e807ae040fc8f61d20)をもとにv-preを使うことで無事直りました。ありがとうございました!