前回、Vue.jsの簡単な動かし方を試しましたが、今度は分岐や繰り返し、ボタンイベントを試してみましょう。
まずは、動作検証用のサイトを開きます。
次に、サイトを開いたら、左ペインの「External Resources」に必要なJSを追加
Veu.jsを使う場合はこちらを追加：https://cdn.jsdelivr.net/npm/vue
※上記のURLを直接開くと難読化されたJavaScriptのコードが表示されますが、気にしないでください。
では、まずは"分岐"から。
Vue.jsでは分岐は v-if 属性をhtmlコードへ記述します。
htmlとしては解釈されないので、表示の邪魔になりません。
以下のコードを前回と同じようにjsfiddleへ張り付けていってください。
[htmlコード記述]部分に以下のコードを張り付けます。
======================================
<div id="disp-2">
<span v-if="hasError">{{message}}</span>
<span v-if="!hasError">エラーが無い時に表示</span>
</div>
======================================
[JavaScriptコード記述]部分に以下のコードを張り付けます。
======================================
// id="disp-2"が定義された範囲について、Vue.jsの制御を追加
var vue2 = new Vue({
el: '#disp-2',
data: {
hasError: true, // エラー有り・無しのフラグ
message: 'エラーメッセージを表示！'
}
})
======================================
[処理結果を表示]部分に以下のような結果が表示されます。
======================================
(hasErrorがtrueの時)
エラーメッセージを表示！
(hasErrorがfalseの時)
エラーが無い時に表示
======================================
このように、簡単にフラグによって表示したり切り替えたりできます。
次に"繰り返し"を試します。
Vue.jsでは繰り返しは v-for 属性をhtmlコードへ記述します。
[htmlコード記述]部分に以下のコードを張り付けます。
======================================
<div id="disp-3">
<span v-if="hasError">
<ol>
<li v-for="ite in messages">{{ite.message}}</li>
</ol>
</span>
</div>
======================================
[JavaScriptコード記述]部分に以下のコードを張り付けます。
======================================
// id="disp-3"が定義された範囲について、Vue.jsの制御を追加
var vue3 = new Vue({
el: '#disp-3',
data: {
hasError: true,
messages: [
{ message: '入力エラー' },
{ message: '形式エラー' },
{ message: 'サイズエラー' }
]
}
})
======================================
[処理結果を表示]部分に以下のような結果が表示されます。
======================================
- 入力エラー
- 形式エラー
- サイズエラー
======================================
はい、簡単に繰り返しが確認できました。
最後にボタンイベントを行ってみます。
[htmlコード記述]部分に以下のコードを張り付けます。
======================================
<div id="disp-4">
<p>{{ message }}</p>
<button v-on:click="clickButton">PUSH!!!</button>
</div>
======================================
[JavaScriptコード記述]部分に以下のコードを張り付けます。
======================================
// id="disp-4"が定義された範囲について、Vue.jsの制御を追加
var vue4 = new Vue({
el: '#disp-4',
data: {
message : 'まだ押されていない'
},
methods : {
clickButton: function() {
this.message = 'click button!!'
}
}
})
======================================
ボタンを押下するとメッセージが変わったことが確認できたと思います。
このようにVue.jsを使うとデザイナーとコードの分離ができてるため、
デザイナーさんはHTMLやCSSスタイル、プログラマはコードを専任することができようになります。
