Contenu connexe
Similaire à Vue.js Outline (20)
Vue.js Outline
- 3. アジェンダ
1. Vue.js について
3. Vue.js の特徴
5. これから Vue.js をはじめるには
2. Vue.js でつくられたもの (⼀例)
🌾 概論によるざっくりイメージをつかんでもらえればとm(_ _)m
4. Vue.js サンプル (カウンターアプリ)
- 5. Google で AngularJS を使⽤した開発に携わった
Evan You ⽒が開発、2014年にリリース。
先⾏して Facebook が開発した UI ライブラリ React に
影響を受けている模様。
現在のバージョンは2.5、
今年メジャーバージョン3にアップデート予定。
https://ja.wikipedia.org/wiki/Vue.js
- 6. 2018年に Github のスター数が React 超え。
https://zendev.com/2018/06/19/react-usage-beating-vue-angular.html
https://qiita.com/a________kaito/items/9e8d86094c3821d0611a
- 17. Vue.js は、3D グラフィック等の視覚的演出・表現や
Web 標準の API を活⽤したライブラリと違い、
View 層 (表⽰系) にフォーカスしたフレームワーク。
Web サイトの⾒た⽬を作るフロントエンド制作にとって、
開発環境や設計を⾒据えた技術選定の⼀つになっています。
React とは記述の違いはあるが⼤部分の特徴が類似。
- 19. ② 仮想 DOM
通常 JS は DOM(htmlの要素を操作する仕組み) に対する更新処理が
低速とされています。
それに対し、仮想DOM は更新差分を検知して該当部分のみ
更新を反映するため描画が⽐較的速い仕組みになっています。
Vue.js はバージョン2系から仮想 DOM を採⽤。
https://qiita.com/risagon/items/019942c60e9c3e6c05a5
- 25. 2. HTML を作成
id=“app”のdiv要素の中で上記のように記述。
Vue には「ディレクティブ」という組み込み機能があります。
今回はクリックイベントを受け取って処理を⾏う、
v-onディレクティブを使います。
⼆重中括弧({{ … }})で囲まれた箇所は、
Vue で定義した状態等を記述、JS の式も使⽤。
v-on:(イベント名)=“関数名”を使って、
クリックしたら countUp/countDown を実⾏。
- 26. 3. JS を作成
new Vue({ …}) という基本構⽂の中に
オプションを追加していきます。
el プロパティで Vue の使⽤範囲を指定
(ここでは id=“app” の要素)。
methods プロパティで、
Vue で使⽤する関数を定義。
ここで html 側に記述した
countUp/countDown を定義します。
状態を data プロパティで管理
ここでは count というキーの値を初期値0に設定。
- 30. ① JS もある程度基礎を固める
Vue.js を扱うにあたり固有の API を主におさえる必要があ
りますが、それだけでは対応しきれない部分が出てきます。
Vue.js も JS ライブラリの⼀つであり、ロジックの組み⽴て
には最低限 JS の基礎を習得しておく必要があります。
とはいえ、まだ基礎⼒がない⽅でも、Vue を勉強しつつ JS
の基礎を固める・JSの基礎を固めながら Vue の練習をする
というように双⽅⾏き来するように勉強していくのも⼿かと
思います。
- 33. ④ サンプル事例から学ぶ
Vue.js で作られた事例を紹介しているサイトや、
公式サイトでも Vue を使ったサンプルが公開されています。
具体的に作りたいもののイメージや、サンプルにあるコード
の書き⽅を学んでいくのも良いです。
・公式サイトサンプル (https://vuejs.org/v2/examples/)
・Vue.js Examples (https://vuejsexamples.com/)
・made with vue.js (https://madewithvuejs.com/)