Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Vue.js入門 Slide 1 Vue.js入門 Slide 2 Vue.js入門 Slide 3 Vue.js入門 Slide 4 Vue.js入門 Slide 5 Vue.js入門 Slide 6 Vue.js入門 Slide 7 Vue.js入門 Slide 8 Vue.js入門 Slide 9 Vue.js入門 Slide 10 Vue.js入門 Slide 11 Vue.js入門 Slide 12 Vue.js入門 Slide 13 Vue.js入門 Slide 14 Vue.js入門 Slide 15 Vue.js入門 Slide 16 Vue.js入門 Slide 17 Vue.js入門 Slide 18 Vue.js入門 Slide 19 Vue.js入門 Slide 20 Vue.js入門 Slide 21 Vue.js入門 Slide 22 Vue.js入門 Slide 23 Vue.js入門 Slide 24 Vue.js入門 Slide 25 Vue.js入門 Slide 26 Vue.js入門 Slide 27 Vue.js入門 Slide 28 Vue.js入門 Slide 29 Vue.js入門 Slide 30 Vue.js入門 Slide 31 Vue.js入門 Slide 32 Vue.js入門 Slide 33 Vue.js入門 Slide 34 Vue.js入門 Slide 35 Vue.js入門 Slide 36 Vue.js入門 Slide 37 Vue.js入門 Slide 38 Vue.js入門 Slide 39 Vue.js入門 Slide 40 Vue.js入門 Slide 41
Upcoming SlideShare
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Next
Download to read offline and view in fullscreen.

34 Likes

Share

Download to read offline

Vue.js入門

Download to read offline

Vue.jsについての紹介と、1.0の変更点について

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Vue.js入門

  1. 1. Vue.js入門(1.0対応) UUUM株式会社 システムユニット 佐藤琢哉
  2. 2. UUUMではエンジニア積極採用中! Web インフラ(AWS) サーバ(PHP) クライアント(HTML/CSS/JS) アプリ(iOS/Android) 詳細は でhttp://www.uuum.jp/recruit/
  3. 3. Vue.jsとは JavaScriptのMVVMフレームワーク 軽量 フルスタックではない
  4. 4. MVVM? Model-View-ViewModel View=UI、つまりHTML Model=データ、JavaScriptのオブジェクト ViewModel=UIとデータを繋ぐ部分、Vue.jsのオブジェ クト
  5. 5. jQueryは何が悪かったのか? プレゼンテーションとロジックが混ざりやすい 手続き型 「データをセットする」という処理を明記しないとい けない どこで何のデータが管理されているのかわからなくなる 表示のロジックを変更したいのか、データに関するロジ ックを変更したいのかがわからない ただし用途を間違えなければ今でも十分使える
  6. 6. MVVMの設計 表示に関することはViewで データに関することはModelで データと表示のつなぎ込みはViewで わかりやすい リアクティブ・プログラミングによる実現
  7. 7. リアクティブ・プログラミング Reactive=反応的な データの変更がそのままViewにすぐ同期される 普通:data = 1; view.setData(data); リアクティブ:data = 1; // この時点でviewにはもう反映 されている ビジネスロジックが、ModelとViewの対応を知らなくて も良い
  8. 8. Vue.jsは何が優れているか 軽量 余計な機能やMVVMと関係ない機能は搭載されていな い ドキュメントも少ないため、学習コストが低い (かつ)拡張性が高い コンポーネントシステム フィルタ mixin ほどほどに使いやすい(重要) 好みとも言える
  9. 9. 1.0での変更点 テンプレート記法の追加 普通のHTML属性に「:」を足すとv-bindに <a :href="someURL"></a> 普通のHTML属性に「@」を足すとv-onに <button @click="onClick"></button>
  10. 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>
  11. 11. 1.0での変更点 stopPropagation()やpreventDefault()が簡単に呼べる <a v-on:click.stop="doThis"></a> <form v-on:submit.prevent></form>
  12. 12. 1.0での変更点 checkboxを1つの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. 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. 14. 1.0での変更点 詳細は http://vuejs.org/2015/10/26/1.0.0-release/ https://github.com/vuejs/vue/releases/tag/1.0.0
  15. 15. 使ってみよう!
  16. 16. 基本 <div id="view">ここがVue.js管理領域</div> <script src="vue.js">< /script> <script> new Vue({ el: '#view' }); < /script>
  17. 17. 基本 new Vue(); で作成されたオブジェクトがViewModel el プロパティで、DOMのどの領域をVue.jsの管理領域に するか決める(=View) 管理外の領域に対しては何もしない
  18. 18. データバインディング <div v-text="message"></div> new Vue({ data: { message: 'hello!' } });
  19. 19. データバインディング data プロパティがModel そのものになる ただしちょっと癖がある data.message に何かを指定すると、 v-text="message" の 領域の中身が即座に書き換えられる
  20. 20. イベントの取得 <button @click="submit">決定</button> new Vue({ methods: { submit: function() { alert('hello!'); } } });
  21. 21. イベントの取得 JSのイベント名の前に@を付けた属性に、実行メソッド を指定 v-on="click: submit"でも可 引数も指定できる それってHTMLにロジック書いてない?関心の分離 (SoC)はどこに行った? Vue.jsの管理メソッドにしかバインドできない ViewModel内からDOM構造っぽいもの(イベントハン ドラ)を排除できる HTMLを見るだけでどこにイベントがあるのかわかる ようになる
  22. 22. リスト表示 <ul> <li v-for="item in items">{{ item.value }}</li> </ul> new Vue({ data: { items: [ { value: 1}, { value: 2} ]} });
  23. 23. リスト表示 v-for でループ式を指定すると、それの中身が繰り返され て展開される v-for="one in list" orderも指定できる リストへのデータの追加は、 $set や$remove で行う必要 がある 普通に追加すると変更がViewに通知されない はまりやすいポイント
  24. 24. Mustache記法 ますたっしゅ? 様々な言語に移植されているメジャーなテンプレートエ ンジン Vue.js 管理下のDOMでこの記法を使うと、Modelの変数 をその位置に表示することができる {{ }} が他のテンプレートエンジンの記法と被る時は Vue.config.delimiters = ['{%', '%}']; のようにして変更す ることが可能 ただしVue.jsの初期化が完了するまでは{{ message }} のよ うな表示がそのまま画面に表示されてしまうため、可能 な限りv-text等を使うのが良い 1.0になって使える場面が減った
  25. 25. フォーム <input type="text" v-model="name" /> <button @click="hello"></button> new Vue({ data: { name: null }, // 省略可 methods: { hello: function() { alert('hello ' + this.name); } } });
  26. 26. フォーム v-model で、フォーム要素のvalueの値へのバインディン グができる < select >もv-modelで HTMLにnumber プロパティがあると数値型になる
  27. 27. フィルタ <div v-text="message | uppercase"></div> | で繋ぐと、フィルタメソッドが実行されて表示される 組み込みのフィルタは多くないが、自作は簡単なので、 複雑なフィルタも作成できる
  28. 28. inline expressions <div v-text=”last_name + ' ' + first_name”></div> v-textやテンプレート等の中で簡単な演算ができる 難しいことをしたい場合はcomputed propertiesで
  29. 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; } } });
  30. 30. コンポーネントシステム Vue.js管理下のHTML内に独自タグを定義することができ る 独自タグの中身は別の箇所のHTMLをはめ込むことがで きる WebComponentsっぽい!(気がする) React.jsっぽい!(そうか?) 何回も使うようなHTML集合をコンポーネントとして汎 用化することができる
  31. 31. 表示制御 <div v-show="isVisible">show!</div> new Vue({ data: { isVisible: false } });
  32. 32. 表示制御 v-show の中身がtrue と判定される場合のみに表示する false の場合はdisplay: none にする v-if の場合は要素が削除される CSSのアニメーション制御も可能 CSSのクラスやHTMLのプロパティのON/OFF制御も可能
  33. 33. 実践例 管理画面に適用するとすぐ使える 例えば、入力欄Aが特定の値の場合のみ入力欄Bを表示 する 例えば、金額を入力すると即座に消費税込みの金額を 表示する
  34. 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. 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. 36. 管理画面で使う ほとんどJavaScriptを書く必要がない Vue.jsの組み込み機能だけで表示非表示の制御ができ る ちょっとした編集値の表示もすぐできる 入力数が可変のフォームを作るのも簡単 v-forとリストの組み合わせ
  37. 37. 複雑なことをする場合 Browserify等を使ってモジュール化しよう 通信は搭載されていないので他のライブラリを使おう 公式でvue-resource コンポーネントが用意されている jQueryでもいい テストを書こう プレゼンテーションとロジックが分離されているので 書きやすいはず
  38. 38. Vue.jsを使う上で避けたいこと Vue.js内でDOMの書き換えを直接書く ほとんどの場合で必要ない ドラッグ&ドロップ等で必要になることはあるが、な るべくcomponent化などで最小限にすべき
  39. 39. Vue.jsを使う上で避けたいこと methodsを書きすぎる methods=Controllerに近い テストのしやすさを考える 通信が入る部分などはPromiseを使いうまく分離する methodsが太り過ぎる場合は外部に逃す
  40. 40. Vue.jsを使う上で避けたいこと Vue.js管理外のDOMを操作する 管理されている箇所以外を操作してしまうと、何が何 だかわからなくなる そもそも直接書き換えが入っている時点で駄目 画面内に複数のVue.js領域がある場合、それらは個別のも のとして扱う 連携が必要な場合はコンポーネントで
  41. 41. まとめ Vue.jsは特に管理画面などで強力 Vue.jsを使っても書き方によっては汚くなる 画面表示に関するロジックはMVVMを意識しよう
  • KazukiNarusawa

    Feb. 11, 2020
  • TKozakai

    Feb. 11, 2020
  • fghanawa

    May. 2, 2019
  • karokarokaron

    Apr. 20, 2019
  • HongAnh232

    May. 16, 2018
  • haruyafujimoto

    Apr. 26, 2018
  • kazumatanimura

    Nov. 5, 2017
  • shunkudou5

    Oct. 25, 2017
  • SadaoShibuya

    Aug. 29, 2017
  • fnobi

    Feb. 6, 2017
  • chichi1091

    Jan. 30, 2017
  • syuichitsuji

    Jan. 26, 2017
  • ssuser65de2b

    Jan. 9, 2017
  • KaitoHiga

    Dec. 1, 2016
  • linamatsumoto7

    Nov. 20, 2016
  • ssuser505193

    Oct. 24, 2016
  • saicologic

    Sep. 23, 2016
  • ssuser450ae1

    May. 10, 2016
  • tacarz

    Apr. 21, 2016
  • ssuserd3923a

    Apr. 12, 2016

Vue.jsについての紹介と、1.0の変更点について

Views

Total views

17,757

On Slideshare

0

From embeds

0

Number of embeds

2,567

Actions

Downloads

29

Shares

0

Comments

0

Likes

34

×