More Related Content
Similar to はじめてのVue.js (20)
はじめてのVue.js
- 7. 仮想DOMライブラリ(React, Vue, Riot)の⽐較
React Vue Riot
形式 Tag in JS
Tag in JS
Or
単⼀ファイル
単⼀ファイル
学習コスト 中〜⾼ 低 低
Github Star数
(2018.3.6時点)
89,822 85,619 12,818
ファイルサイズ
中〜⼤
※軽量版Preactがあ
る
⼩ ⼩
その他
React Native
ReactVR
(NativeScript連携) -
- 22. JS
new Vue({
el: ʻ#appʼ,
data: function(){
return: {
message: ʻHello, Vue.jsʼ
}
}
});
HTML
<div id=“app”>{{ message }}</div>
Vueインスタンス側には、ʼdataʼキーを作り、
オブジェクト形式で返す。
Vue.jsの情報をhtmlに出⼒するには、⼆重波括弧を作り変数を⼊れる。
- 23. (3) 算出プロパティ
JS
new Vue({
data: function(){ return { score: 20 } },
// dataの更新に伴い再計算される
computed: {
result: function(){
return: this.score + 60
}
}
});
- 25. (4) ライフサイクルダイアグラム
JS new Vue({
…
// Vueインスタンスの⽣成・マウント・更新・破棄
// のイベントに対応して、処理を⾏うときに使う。
mounted(){
console.log(ʻmountedʼ);
},
updated(){
console.log(ʻupdatedʼ);
}
});
- 29. JS
new Vue({
el: ʻ#appʼ,
methods: {
say(){
console.log(ʻHelloʼ);
}
}
});
HTML
<div id=“app”>
<button v-on:click=“say”>Hello</button>
</div>
メソッドを実⾏したい箇所に、
ʼv-on:[イベント名]=“(メソッド)”ʼを記⼊
- 30. (7) 条件付きレンダリング (1/2)
HTML
<div id=“app”>
// 条件判定するブロックにʼv-ifʼを指定
<div v-if=“hasData”>
<p>This value is {{ num }}</p>
</div>
// JSのif⽂同様、判定と違う場合ʼv-else'を使⽤
<div v-else>
<p>The value doesnʼt exit.</p>
</div>
</div>
- 31. (7) 条件付きレンダリング (2/2)
HTML
<div id=“app”>
// 表⽰切り替え対象にʼv-showʼを指定
// v-ifと違って、cssのʼdisplayʼプロパティで設定。
// 表⽰・⾮表⽰を⾏う機会が多い場合こちらを使うと良い。
<div v-show=“hasData”>
<p>This value is {{ num }}</p>
</div>
</div>
- 35. (10) コンポーネント (2/3)
JS
// ②ローカル登録(スコープ内で利⽤可能)
let MyComponent = {
template: ʻ<div>My Component!</div>
};
new Vue({
el: ʻ#appʼ,
components: {
ʻmy-componentʼ: MyComponent
// 上記は以下のように省略可
// W3Cルールにより、html上ではハイフンつなぎ
// MyComponent
}
});
- 36. (10) コンポーネント (3/3)
Vue
// ③.vue拡張⼦のファイルに、以下のように
// 構造(template)・スタイル(style)・アクション(script)
// をセットにして呼び出すことも可能(但し要コンパイル)。
<template>
…
</template>
<style>
…
</style>
<script>
…
</script>
- 39. (11) 親 -> ⼦への連携(props)
JS
// propsを追加して、キーの名前を指定(ʼchildʼ)
let Child = {
props: ['child'],
template: '<div>{{ child }}</div>'
};
// 親のʼv-bind:属性ʼの属性名にpropsで指定したキー
new Vue({
…
data: function(){ return { message: 'Hello, Child!' } },
components: {
Child
},
template: '<child v-bind:child=“message”></child>'
});
- 41. (12) ⼦ -> 親への連携(カスタムイベント)
JS
//ʻthis.$emit(ʻカスタムイベント名ʼ, パラメータ)ʼ
let Child = {
template: ʻ<div>
<button v-on:click=“alert”>アラート</button>
</div>ʼ,
methods: {
alert(){ this.$emit(ʻsetAlertʼ, ʻhogeʼ); }
}
};
new Vue({
…
components: { Child },
template: ʻ<child v-on:setAlert=“alertMessage”></
child>ʼ
});
- 47. (14) Vueによる要素の参照
JS
new Vue({
el: ʻ#appʼ,
…
mounted(){
// ʻthis.$elʼを使うと、Vueインスタンスのelキーで
// 指定した要素を参照できる。
console.log(this.$el);
// また、特定要素を参照するには、
// 該当要素にref=“[参照名]”を追加し、
// ʻthis.$refs.[参照名]ʼによって参照できる。
console.log(this.$refs.main);
}
});
