Recommended
More Related Content
What's hot
What's hot (20)
Similar to Vue.js入門
Similar to Vue.js入門 (20)
More from Takuya Sato
Vue.js入門
- 7. リアクティブ・プログラミング Reactive＝反応的な データの変更がそのままViewにすぐ同期される 普通：data = 1; view.setData(data); リアクティブ：data = 1; // この時点でviewにはもう反映 されている ビジネスロジックが、ModelとViewの対応を知らなくて も良い
- 10. 1.0での変更点 新記法v-foo:barの追加 NG : <div v-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>
- 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>
- 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!'); } } });
- 22. リスト表示 <ul> <li v-for="item in items">{{ item.value }}</li> </ul> new Vue({ data: { items: [ { value: 1}, { value: 2} ]} });
- 23. リスト表示 v-for でループ式を指定すると、それの中身が繰り返され て展開される v-for="one in list" 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> new Vue({ data: { first_name: 'sato', last_name: 'takuya' }, computed: { full_name: function() { return last_name + ' ' + first_name; } } });
- 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制御も可能
- 34. 入力欄Aが特定値の場合入力欄Bを表示 <select v-model="type"> <option value="user">ユーザー</option> <option value="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); } } });