Download as PDF, PPTX
![リスト表示
<ul>
<li v-for="item in items">{{ item.value }}</li>
</ul>
new Vue({
data: { items: [
{ value: 1},
{ value: 2}
]}
});](https://image.slidesharecdn.com/vuejs-151027040526-lva1-app6892/85/Vue-js-22-320.jpg)
![Mustache記法
ますたっしゅ？
様々な言語に移植されているメジャーなテンプレートエ
ンジン
Vue.js 管理下のDOMでこの記法を使うと、Modelの変数
をその位置に表示することができる
{{ }} が他のテンプレートエンジンの記法と被る時は
Vue.config.delimiters = ['{%', '%}']; のようにして変更す
ることが可能
ただしVue.jsの初期化が完了するまでは{{ message }} のよ
うな表示がそのまま画面に表示されてしまうため、可能
な限りv-text等を使うのが良い
1.0になって使える場面が減った](https://image.slidesharecdn.com/vuejs-151027040526-lva1-app6892/85/Vue-js-24-320.jpg)
Vue.js入門
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. リアクティブ・プログラミング Reactive＝反応的な データの変更がそのままViewにすぐ同期される 普通：data = 1;view.setData(data); リアクティブ：data = 1; // この時点でviewにはもう反映 されている ビジネスロジックが、ModelとViewの対応を知らなくて も良い
- 8.
- 9.
- 10. 1.0での変更点 新記法v-foo:barの追加 NG : <divv-on="click: doThis, keyup: doThat"> OK : <div v-on:click="doThis" v- on:keyup="doThat"> Mustache記法がVue.jsのプロパテイ下で使えなくなった NG : <component is="{{view}}"></component> OK : <component v-bind:is="view"></component> OK : <a href="{{baseURL}}/abc"></a>
- 11.
- 12. 1.0での変更点 checkboxを１つのv-modelで扱えるようになった ↑の場合、checkedNamesはArrayであること <input type="checkbox" value="Jack"v-model="checkedNames"> <input type="checkbox" value="John" v-model="checkedNames"> <input type="checkbox" value="Mike" v-model="checkedNames">
- 13. 1.0での変更点 v-elseの追加 直前のv-ifやv-showに対するelseを実行できる <div v-if="Math.random() >0.5"> Sorry </div> <div v-else> Not sorry </div>
- 14.
- 15.
- 16. 基本 <div id="view">ここがVue.js管理領域</div> <script src="vue.js"></script> <script> new Vue({ el: '#view' }); < /script>
- 17. 基本 new Vue(); で作成されたオブジェクトがViewModel elプロパティで、DOMのどの領域をVue.jsの管理領域に するか決める（＝View） 管理外の領域に対しては何もしない
- 18. データバインディング <div v-text="message"></div> new Vue({ data:{ message: 'hello!' } });
- 19. データバインディング data プロパティがModel そのものになる ただしちょっと癖がある data.messageに何かを指定すると、 v-text="message" の 領域の中身が即座に書き換えられる
- 20. イベントの取得 <button @click="submit">決定</button> new Vue({ methods:{ submit: function() { alert('hello!'); } } });
- 21.
- 22. リスト表示 <ul> <li v-for="item initems">{{ item.value }}</li> </ul> new Vue({ data: { items: [ { value: 1}, { value: 2} ]} });
- 23. リスト表示 v-for でループ式を指定すると、それの中身が繰り返され て展開される v-for="one inlist" orderも指定できる リストへのデータの追加は、 $set や$remove で行う必要 がある 普通に追加すると変更がViewに通知されない はまりやすいポイント
- 24. Mustache記法 ますたっしゅ？ 様々な言語に移植されているメジャーなテンプレートエ ンジン Vue.js 管理下のDOMでこの記法を使うと、Modelの変数 をその位置に表示することができる {{ }}が他のテンプレートエンジンの記法と被る時は Vue.config.delimiters = ['{%', '%}']; のようにして変更す ることが可能 ただしVue.jsの初期化が完了するまでは{{ message }} のよ うな表示がそのまま画面に表示されてしまうため、可能 な限りv-text等を使うのが良い 1.0になって使える場面が減った
- 25. フォーム <input type="text" v-model="name"/> <button @click="hello"></button> new Vue({ data: { name: null }, // 省略可 methods: { hello: function() { alert('hello ' + this.name); } } });
- 26. フォーム v-model で、フォーム要素のvalueの値へのバインディン グができる < select>もv-modelで HTMLにnumber プロパティがあると数値型になる
- 27. フィルタ <div v-text="message |uppercase"></div> | で繋ぐと、フィルタメソッドが実行されて表示される 組み込みのフィルタは多くないが、自作は簡単なので、 複雑なフィルタも作成できる
- 28. inline expressions <div v-text=”last_name+ ' ' + first_name”></div> v-textやテンプレート等の中で簡単な演算ができる 難しいことをしたい場合はcomputed propertiesで
- 29. computed properies <div v-text="full_name"></div> newVue({ data: { first_name: 'sato', last_name: 'takuya' }, computed: { full_name: function() { return last_name + ' ' + first_name; } } });
- 30.
- 31. 表示制御 <div v-show="isVisible">show!</div> new Vue({ data:{ isVisible: false } });
- 32. 表示制御 v-show の中身がtrue と判定される場合のみに表示する falseの場合はdisplay: none にする v-if の場合は要素が削除される CSSのアニメーション制御も可能 CSSのクラスやHTMLのプロパティのON/OFF制御も可能
- 33.
- 34. 入力欄Aが特定値の場合入力欄Bを表示 <select v-model="type"> <option value="user">ユーザー</option> <optionvalue="admin">管理者</option> </select> <div v-show="type == 'admin'"> <h3>管理者限定の設定</h3> <p>管理者ID : <input type="text"></p> </div>
- 35. 金額を入力すると消費税込の値を表示 <p>金額 <input type="text"v-model="price" number></p> <p>税込 : <span v-text="priceWithTax"></span></p> new Vue({ computed: { priceWithTax: function() { return Math.floor(price * 1.08); } } });
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.