Enviar pesquisa
Carregar
Vue.js 基礎 + Vue CLI の使い方
•
1 gostou
•
2,537 visualizações
Kei Yagi
Seguir
勉強資料に作ったVue.jsの基礎領域(インスタンス内オプション、ディレクティブ、コンポーネント)とVue CLIの使い方、参考情報について
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 63
Baixar agora
Baixar para ler offline
Recomendados
SolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみよう
Shinsuke Sugaya
これがCassandra
これがCassandra
Takehiro Torigaki
Java8でRDBMS作ったよ
Java8でRDBMS作ったよ
なおき きしだ
Yahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれから
Yahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれから
Yahoo!デベロッパーネットワーク
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計
sairoutine
Vue入門
Vue入門
Takeo Noda
Amazon DynamoDBの紹介と東急ハンズでの活用について
Amazon DynamoDBの紹介と東急ハンズでの活用について
Taiji INOUE
DeNAの大規模ライブ配信基盤を支える技術
DeNAの大規模ライブ配信基盤を支える技術
DeNA
Recomendados
SolrとElasticsearchを比べてみよう
SolrとElasticsearchを比べてみよう
Shinsuke Sugaya
これがCassandra
これがCassandra
Takehiro Torigaki
Java8でRDBMS作ったよ
Java8でRDBMS作ったよ
なおき きしだ
Yahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれから
Yahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれから
Yahoo!デベロッパーネットワーク
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計
sairoutine
Vue入門
Vue入門
Takeo Noda
Amazon DynamoDBの紹介と東急ハンズでの活用について
Amazon DynamoDBの紹介と東急ハンズでの活用について
Taiji INOUE
DeNAの大規模ライブ配信基盤を支える技術
DeNAの大規模ライブ配信基盤を支える技術
DeNA
コンテナ環境でJavaイメージを小さくする方法!
コンテナ環境でJavaイメージを小さくする方法!
オラクルエンジニア通信
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
虎の穴 開発室
ドメイン駆動設計 本格入門
ドメイン駆動設計 本格入門
増田 亨
AWS Lambdaを紐解く
AWS Lambdaを紐解く
Keisuke Nishitani
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
Takuya Takaseki
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
分散システムについて語らせてくれ
分散システムについて語らせてくれ
Kumazaki Hiroki
知っているようで知らないPAMのお話
知っているようで知らないPAMのお話
Serverworks Co.,Ltd.
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
infinite_loop
インフラエンジニアのためのcassandra入門
インフラエンジニアのためのcassandra入門
Akihiro Kuwano
Zaim 500万ユーザに向けて〜Aurora 編〜
Zaim 500万ユーザに向けて〜Aurora 編〜
Wataru Nishimoto
NetflixにおけるPresto/Spark活用事例
NetflixにおけるPresto/Spark活用事例
Amazon Web Services Japan
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Ryo Nakamaru
高速な倍精度指数関数expの実装
高速な倍精度指数関数expの実装
MITSUNARI Shigeo
【第20回セキュリティ共有勉強会】Amazon FSx for Windows File Serverをセキュリティ観点で試してみたお話
【第20回セキュリティ共有勉強会】Amazon FSx for Windows File Serverをセキュリティ観点で試してみたお話
Hibino Hisashi
入門 Kubeflow ~Kubernetesで機械学習をはじめるために~ (NTT Tech Conference #4 講演資料)
入門 Kubeflow ~Kubernetesで機械学習をはじめるために~ (NTT Tech Conference #4 講演資料)
NTT DATA Technology & Innovation
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
AWS Black Belt Online Seminar 2017 Amazon Athena
AWS Black Belt Online Seminar 2017 Amazon Athena
Amazon Web Services Japan
Ormとの付き合い方
Ormとの付き合い方
豊明 尾古
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
Masahiko Jinno
20200304 vuejs
20200304 vuejs
yamamotomsc
Vue Router + Vuex
Vue Router + Vuex
Kei Yagi
Mais conteúdo relacionado
Mais procurados
コンテナ環境でJavaイメージを小さくする方法!
コンテナ環境でJavaイメージを小さくする方法!
オラクルエンジニア通信
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
虎の穴 開発室
ドメイン駆動設計 本格入門
ドメイン駆動設計 本格入門
増田 亨
AWS Lambdaを紐解く
AWS Lambdaを紐解く
Keisuke Nishitani
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
Takuya Takaseki
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
分散システムについて語らせてくれ
分散システムについて語らせてくれ
Kumazaki Hiroki
知っているようで知らないPAMのお話
知っているようで知らないPAMのお話
Serverworks Co.,Ltd.
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
infinite_loop
インフラエンジニアのためのcassandra入門
インフラエンジニアのためのcassandra入門
Akihiro Kuwano
Zaim 500万ユーザに向けて〜Aurora 編〜
Zaim 500万ユーザに向けて〜Aurora 編〜
Wataru Nishimoto
NetflixにおけるPresto/Spark活用事例
NetflixにおけるPresto/Spark活用事例
Amazon Web Services Japan
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Ryo Nakamaru
高速な倍精度指数関数expの実装
高速な倍精度指数関数expの実装
MITSUNARI Shigeo
【第20回セキュリティ共有勉強会】Amazon FSx for Windows File Serverをセキュリティ観点で試してみたお話
【第20回セキュリティ共有勉強会】Amazon FSx for Windows File Serverをセキュリティ観点で試してみたお話
Hibino Hisashi
入門 Kubeflow ~Kubernetesで機械学習をはじめるために~ (NTT Tech Conference #4 講演資料)
入門 Kubeflow ~Kubernetesで機械学習をはじめるために~ (NTT Tech Conference #4 講演資料)
NTT DATA Technology & Innovation
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
AWS Black Belt Online Seminar 2017 Amazon Athena
AWS Black Belt Online Seminar 2017 Amazon Athena
Amazon Web Services Japan
Ormとの付き合い方
Ormとの付き合い方
豊明 尾古
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
Masahiko Jinno
Mais procurados
(20)
コンテナ環境でJavaイメージを小さくする方法!
コンテナ環境でJavaイメージを小さくする方法!
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
Deno Deployと組み合わせるのに Upstashをおすすめしたい.pdf
ドメイン駆動設計 本格入門
ドメイン駆動設計 本格入門
AWS Lambdaを紐解く
AWS Lambdaを紐解く
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
VPCのアウトバウンド通信を制御するためにおさえておきたい設計ポイント
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
分散システムについて語らせてくれ
分散システムについて語らせてくれ
知っているようで知らないPAMのお話
知っているようで知らないPAMのお話
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
インフラエンジニアのためのcassandra入門
インフラエンジニアのためのcassandra入門
Zaim 500万ユーザに向けて〜Aurora 編〜
Zaim 500万ユーザに向けて〜Aurora 編〜
NetflixにおけるPresto/Spark活用事例
NetflixにおけるPresto/Spark活用事例
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
高速な倍精度指数関数expの実装
高速な倍精度指数関数expの実装
【第20回セキュリティ共有勉強会】Amazon FSx for Windows File Serverをセキュリティ観点で試してみたお話
【第20回セキュリティ共有勉強会】Amazon FSx for Windows File Serverをセキュリティ観点で試してみたお話
入門 Kubeflow ~Kubernetesで機械学習をはじめるために~ (NTT Tech Conference #4 講演資料)
入門 Kubeflow ~Kubernetesで機械学習をはじめるために~ (NTT Tech Conference #4 講演資料)
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
AWS Black Belt Online Seminar 2017 Amazon Athena
AWS Black Belt Online Seminar 2017 Amazon Athena
Ormとの付き合い方
Ormとの付き合い方
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
Semelhante a Vue.js 基礎 + Vue CLI の使い方
20200304 vuejs
20200304 vuejs
yamamotomsc
Vue Router + Vuex
Vue Router + Vuex
Kei Yagi
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
健人 井関
はじめてのVue.js
はじめてのVue.js
Kei Yagi
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Eucen Stew
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
20111204 WebBroser Control Tips for Windows Phone
20111204 WebBroser Control Tips for Windows Phone
Kenji Wada
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
Yuichi Sakuraba
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Kei Yagi
Ruby on Rails3 Tutorial Chapter2
Ruby on Rails3 Tutorial Chapter2
Sea Mountain
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
20091030cakephphandson 01
20091030cakephphandson 01
Yusuke Ando
Rails3.1rc4を試してみた
Rails3.1rc4を試してみた
Takahiro Hidaka
ASP.NET MVC 1.0
ASP.NET MVC 1.0
Shinpei Ohtani
Vue.js で XSS
Vue.js で XSS
tobaru_yuta
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
Using Windows Azure
Using Windows Azure
Shinji Tanaka
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
WordPress widget api
WordPress widget api
Takami Kazuya
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
Semelhante a Vue.js 基礎 + Vue CLI の使い方
(20)
20200304 vuejs
20200304 vuejs
Vue Router + Vuex
Vue Router + Vuex
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
はじめてのVue.js
はじめてのVue.js
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
20111204 WebBroser Control Tips for Windows Phone
20111204 WebBroser Control Tips for Windows Phone
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Ruby on Rails3 Tutorial Chapter2
Ruby on Rails3 Tutorial Chapter2
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
20091030cakephphandson 01
20091030cakephphandson 01
Rails3.1rc4を試してみた
Rails3.1rc4を試してみた
ASP.NET MVC 1.0
ASP.NET MVC 1.0
Vue.js で XSS
Vue.js で XSS
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Using Windows Azure
Using Windows Azure
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
WordPress widget api
WordPress widget api
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Mais de Kei Yagi
Vue.js Outline
Vue.js Outline
Kei Yagi
GPUインスタンシングとAnimation Texture Baker
GPUインスタンシングとAnimation Texture Baker
Kei Yagi
iOS11について本気出して考えてみた
iOS11について本気出して考えてみた
Kei Yagi
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
Structure synth
Structure synth
Kei Yagi
Context free
Context free
Kei Yagi
Mais de Kei Yagi
(7)
Vue.js Outline
Vue.js Outline
GPUインスタンシングとAnimation Texture Baker
GPUインスタンシングとAnimation Texture Baker
iOS11について本気出して考えてみた
iOS11について本気出して考えてみた
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Structure synth
Structure synth
Context free
Context free
Vue.js 基礎 + Vue CLI の使い方
1.
Vue.js 基礎 +
Vue CLI の使い⽅
2.
Agenda 1. Outline 2. Basic
Syntax 3. Directives 4. Components 5. Vue CLI 6. Appendix
3.
1. Outline
4.
About Vue.js 2014 年に
Evan You ⽒が開発した UI フレームワーク。 先⾏してFacebook が開発した React の影響を受けているとされ、 その特徴から関連ライブラリ(React Router / Redux / Next、Vue Router / Vuex / Nuxt etc)とも類似したものがあります。 現在 Vue のバージョンは2.5.22。
5.
Vue.js in 2018 ・Vue
CLI のバージョンが3系にメジャーアップデート ・Nuxt.js のバージョンが2系にメジャーアップデート ・Vue.js の Github スター数が React を超えた (React: 120,147, Vue: 125,474) ※2019/1/19時点 ・11⽉⽇本初の Vue.js カンファレンス「Vue Fes Japan」が開催 ・Vue Fes Japan で Evan You が来⽇、Vue のメジャーバージョン3 を2019年にリリース予定と発表(別セッションで Nuxt.js 開発者 のSébastien ChopinがNuxtでもバージョン3に対応するとも)
6.
Features about Vue.js (1)
リアクティブな更新 (2) 仮想 DOM (3) コンポーネント志向 (4) 扱いやすさ (5) プログレッシブフレームワーク (6) ⽇本語対応 ※ React と Vue の関係性より、(1)~(3) の特徴は共通。
7.
Setup (1) Download https://jp.vuejs.org/v2/guide/installation.html#lt-script-gt-%E7%9B%B4%E6%8E%A5%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF
8.
Setup (2) CDN https://jp.vuejs.org/v2/guide/installation.html#CDN
9.
Setup (3) Build tools
(webpack, etc…) 関連パッケージをインストールし、gulp や webpack 等のツールで、Vue で 作ったコンポーネントをまとめることができます。 1からカスタマイズする点や作るプロダクトによって設定が変わってくる点、 今回は Vue CLI / Nuxt で進めることから割愛。
10.
Setup (4) Scaffolding Tools Vue
には、Vue CLI (後述)と Nuxt といった優れたツールがあり、 それを使うと開発環境の⼟台を秒で作ることができます (パッケージを追加インストールすることも可能)。 https://cli.vuejs.org/ https://nuxtjs.org/
11.
2. Basic Syntax
12.
2. Basic Syntax (1)
instance (2) data (3) lifecycle (4) computed (5) watch (6) methods
13.
2. Basic Syntax (1)
instance new Vue({ … // ここにオプション追加 }) // Vueインスタンスのマウント指定 new Vue({ el: ‘#app’ // id=“app”の要素にマウント }) Vue 関数で新しい Vue インスタンスを作成することで起動 「ルート Vue インスタンス」と呼ばれ、インスタンス内で要素・コンポーネン トを⼊れ⼦にしてアプリケーションを構築します。 https://jp.vuejs.org/v2/guide/instance.html JS
14.
2. Basic Syntax (1)
instance (備考) Linux で外部の記憶媒体( CD-ROM ドライブや USB 等)を追加することを「マウン ト」といいます。 今回でいうマウントも上述のように、 [html の DOM ツリー]に[ Vue で作ったもの]を組み込む というニュアンスで覚えてもらうと良いと思います。 マウント (つなぎこむ) Vue アプリケーション
15.
2. Basic Syntax (2)
data (1/2) new Vue({ el: ‘#app’, // data プロパティにある情報がリアクティブに変更 data(){ return { message: ‘Hello, Vue.js’ } } }) 上記では、message というキーを data (状態)に登録し、 初期値を ’Hello, Vue.js’ にしています。 これにより、message の値が更新されるとそれに紐づく表⽰側も更新されます。 https://jp.vuejs.org/v2/guide/instance.html#%E3%83%87%E3%83%BC%E3%82%BF%E3%81%A8%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89 React やったことある⼈なら、 state と同じようなもの JS
16.
2. Basic Syntax (2)
data (2/2) <div id=“app”> <p> {{ message /* message の更新でこの部分が反映 */ }} </p> <p> {{ 1 + 3 + 10 /* ⼆重中括弧では JS の式が使⽤可 */ }} </p> <p> {{ message === ‘Hi’ ? ‘Thank you!’ : ‘Good Bye’ /* ⼆重中括弧で if ⽂が使えないため、三項演算⼦で対応 */ }} </p> </div> HTML https://jp.vuejs.org/v2/guide/instance.html#%E3%83%87%E3%83%BC%E3%82%BF%E3%81%A8%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89
17.
2. Basic Syntax (2)
data (備考) Vue では表⽰(⾒た⽬)と状態と分けた記述になっており、状態が更新されるとそ れに紐づいて表⽰される部分も更新が反映されます。 これまで普通にJSで書こうとすると、 const message = document.getElementById(‘message’) // テキスト要素取得 message.textContent = ‘Hello, Vue.js’ // テキスト要素の⽂⾔変更 といった冗⻑な記述がリアクティブな更新により不要になります。 表 ⽰ 状 態 更新! ⾃動的に反映
18.
2. Basic Syntax (3)
lifecycle Vue インスタンスおよび後述するコンポーネントには、 ⾃⾝の⽣成からマウント・更新・破棄に対するイベントを 有しています(ライフサイクルイベント)。 そのイベントをフックして関数等の処理を実⾏することが できます。 例: URL から直接アクセスされた場合、リダイレクトさせる https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0 ⼈の⼀⽣みたい React にも componentDidMount 等 同様のイベントがあります
19.
2. Basic Syntax (4)
computed (1/2) new Vue({ el: ‘#app’, data(){ return { message: ‘Hello, Vue.js’ }}, // 状態に依存し、更新に伴い計算するプロパティを登録 computed: { reversedMessage(){ return this.message.split(‘’).reverse().join(‘’) } } }) message の値が更新されると、算出プロパティに登録されたプロパティ内で使⽤ しているmessageも更新、reversedMessage プロパティが再計算されます。 ⼆重中括弧の中に直接書いても良いが記述を冗⻑にしたくない、 更新されるまで現在の値をキャッシュして使う時にこちらを使います。 JS プロパティ名を指定 ここでは ‘reversedMessage’として登録 インスタンス内で定義したプロパティ (data等)はthis.[プロパティ名]で参照 https://jp.vuejs.org/v2/guide/computed.html#%E7%AE%97%E5%87%BA%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3
20.
2. Basic Syntax (4)
computed (2/2) <div id=“app”> <p> {{ message }} </p> <p> {{ reversedMessage /* 算出プロパティの値を出⼒ */ }} </p> </div> https://jp.vuejs.org/v2/guide/computed.html#%E7%AE%97%E5%87%BA%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3 HTML
21.
2. Basic Syntax (5)
watch new Vue({ … // リアクティブに変更するプロパティの監視を指定 watch: { message(after, before){ console.log(after, before) // 変更を検知して定義した関数を実⾏するのも OK } } }) message の変更を受け取って何かしらの⼀連の処理を⾏う際に使⽤。 算出プロパティは「値を返す(プロパティ)」⼀⽅、 変更を検知してリアクティブでない変数の値を更新する、 関数を実⾏するなどで使⽤。 https://jp.vuejs.org/v2/guide/computed.html#%E3%82%A6%E3%82%A9%E3%83%83%E3%83%81%E3%83%A3 監視対象のプロパティ名を指定 ここでは ‘message’を監視 2つの引数が受け取れ、 第⼀引数は [変更後の値] 第⼆引数は [変更前の値] JS
22.
2. Basic Syntax (6)
methods new Vue({ … // インスタンス内で実⾏するメソッド(関数)を定義 methods: { log(params){ console.log(params) } } }) 先述したライフサイクルイベントにフックして実⾏したり、 後述するボタンクリック等の UI イベントのコールバックとして使⽤したり、 処理を分割し、メソッドからメソッドへつなげて実⾏することも可能。 https://jp.vuejs.org/v2/guide/events.html#%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%8F%E3%83%B3%E3%83%89%E3%83%A9 Vue インスタンス内では this.log(…) で実⾏ JS
23.
3. Directives
24.
3. Directives (1) v-on (2)
v-bind (3) v-if (4) v-show (5) v-for (6) v-model 「ディレクティブ」という、html 側に記述 することで、要素のイベント登録や表⽰⾮表 ⽰などを簡易かつ明⽰化する機能。
25.
3. Directives (1) v-on <div
id=“app”> <p> {{ message }} </p> <button v-on:click=“reversedMessage”>Reverse </button> <!— 以下のように ’v-on:’ を ’@’ に略すことも OK —> <button @:click=“reversedMessage”>Reverse </button> </div> https://jp.vuejs.org/v2/guide/events.html HTML 先述の methods に登録したメソッド(関数)を html 側から実⾏させる場合、 上記のように ’v-on:(イベント名)=“(メソッド名)”’ を該当要素に追記すると、 イベントに対応してメソッドを紐付けることが可能になります。
26.
3. Directives (2) v-bind <div
id=“app”> <p v-bind:style=“textStyle”> {{ message }} </p> <!— 以下のように ’v-bind:’ を ’:’ に略すことも OK —> <p :style=“textStyle”> {{ message }} </p> </div> https://jp.vuejs.org/v2/guide/class-and-style.html HTML id や class、style、data-xxx等の html 要素に付与する属性値を Vue インスタンスのデータ変更に応じて動的に変更する時に使⽤。 ‘v-bind:(属性名)=“(プロパティ名)”’という形で記述。 属性値の部分は⼆重中括弧と同じ様に JS の式が使⽤できます。
27.
(3) v-if <div id=“app”> <div
class=“modal” v-if=“modalType === 1”> … </div> <!— if ⽂のように’else-v-if’ /‘v-else’ で条件振り分けも可能 —> <div class=“modal” else-v-if=“modalType === 2”>…</div> <div class=“modal” v-else>…</div> </div> https://jp.vuejs.org/v2/guide/conditional.html#v-if HTML ‘v-if=“(論理式)”’ を使うことで、true の場合は表⽰状態、 false の場合は html から⾮表⽰になります。 処理としては[描画し直す]ことになり、要素内で設定した情報も⾮表⽰して再表 ⽰するとリセットされるので注意。 3. Directives
28.
(4) v-show <div id=“app”> <div
class=“modal” v-show=“noError”> … </div> <!— v-if ⽂のような ’else-v-if’ /‘v-else’ が使えない —> <div class=“error” v-show=“!noError”>…</div> </div> https://jp.vuejs.org/v2/guide/conditional.html#v-show HTML ‘v-show=“(論理式)”’ を使うと、css による表⽰⾮表⽰を⾏ってくれます。 false の場合は 該当要素にインラインスタイルで ‘display: none’ がセット。 css による表⽰切り替えなので、要素内で設定した情報も維持されます。 3. Directives
29.
(5) v-for (1/2) <div
id=“app”> <ul> <!— ’v-for’ が配列・オブジェクト個数分繰り返し出⼒ —> <li v-for=“item in itemArray” :key=“item.id”> {{ item.txt }} </li> </ul> </div> HTML ‘v-for=“(個別変数) in (配列/オブジェクト)”’ で、該当箇所を繰り返し出⼒すること ができます。’v-if’ を組み合わせることで繰り返し出⼒のうち該当する条件の要素 を⾮表⽰にすることもできます。 3. Directives https://jp.vuejs.org/v2/guide/list.html
30.
new Vue({ data(){ return { itemArray:
[ { id: 1, txt: ‘aaaaaaaa’ }, { id: 2, txt: ‘bbbbbbbb’ }, … ] } } }) https://jp.vuejs.org/v2/guide/list.html JS (5) v-for (2/2) 3. Directives
31.
(6) v-model (1/2) <div
id=“app”> <input v-model=“input”> <p> {{ input }} </p> <textarea v-model=“textarea”></textarea> <p> {{ textarea }} </p> <input type=“checkbox” value=“Queen” v-model=“checkbox”> <p> {{ checkbox }} </p> </div> HTML ‘v-model=“(プロパティ名)”’ を input, textarea, checkbox 等のフォーム要素に付与す ると、⼊⼒値で状態を更新してくれます。 3. Directives https://jp.vuejs.org/v2/guide/forms.html
32.
new Vue({ data(){ return { input:
‘’, textarea: ‘’, checkbox: [] } } }) JS (6) v-model (2/2) 3. Directives https://jp.vuejs.org/v2/guide/forms.html
33.
4. Component
34.
4. Component (1) component (2)
prop (3) emit
35.
4. Component Web コンテンツでは、レイアウトからヘッダー・フッター、ボタン等
UI と様々 な要素で構成されています。そうした⾃⼰完結かつ再利⽤可能なものを「コン ポーネント」といいます (コンポーネントは名前付きの再利⽤可能な Vue インス タンス)。それにより別ページ・サイトへの流⽤から、コンポーネント別に分業 開発するチーム開発にも向いています。 Vue にはコンポーネントを作る上で3つのアプローチがあります。 https://jp.vuejs.org/v2/guide/index.html#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E3%82%88%E3%82%8B%E6%A7%8B%E6%88%90
36.
Vue.Component( ‘button-container’, // コンポーネント名 { data(){
return { count : 0 } }, // 以下、上記コンポーネント名を使うと表⽰される内容 template: ` <button @click=“count++”>Count Up</button> ` } ) JS (1) component - global (1/2) 4. Component https://jp.vuejs.org/v2/guide/components-registration.html#%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E7%99%BB%E9%8C%B2 Vue.Component((コンポーネント名), {オプション}) でコンポーネントをグローバル 登録することができ、ネストされたコンポーネント内でも呼び出すことができま す。第⼆引数のオプションは、ルート Vue インスタンスで使ったオプションが使 えます(data, computed, lifecycle, methods等)
37.
4. Component (1) component
- global (2/2) <div id=“app”> <!— 開始・閉じタグを書いた箇所に出⼒されます —> <button-container></button-container> <!— もしくは空要素タグ(例: <img />)のような書き⽅でも OK —> <button-container /> </div> HTML https://jp.vuejs.org/v2/guide/components-registration.html#%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E7%99%BB%E9%8C%B2
38.
const ButtonContainer =
{ template: ` <button>This is Button Container Component</button> ` } new Vue({ … components: { ButtonContainer } }) JS (1) component - local 4. Component https://jp.vuejs.org/v2/guide/components-registration.html#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%99%BB%E9%8C%B2 コンポーネントをローカル登録(個別のコンポーネントで呼び出せる)する場合、 コンポーネントを定義する変数(上記の’ButtonContainer’)を作成し、’components’ オプションにその変数を指定したら使えるようになります。
39.
<template> <!— html でコンポーネントの構造
—> </template> <style> /* css による⾒た⽬ */ </style> <script> // コンポーネントの状態、メソッド等記述 export default { … } </script> VUE (1) component - single file components 4. Component https://jp.vuejs.org/v2/guide/single-file-components.html .vue 拡張⼦で上記のように html/css/js をセットにしたコンポーネントとして作成 できます(単⼀ファイルコンポーネント)。ただし、Download / CDN では上記ファ イルを扱えず、webpack 等のビルド環境あるいは Vue CLI / Nuxt のようなツール が必要になります。
40.
(1) component (備考) 4.
Component const Container = { template: ` // コンポーネントは1つのルート要素であること <div class=“header”> <h2>⾒出しだよ</h2> <p> テキストだよ</p> </div> // これはNG (2つのルート要素になっている) // <h2>⾒出しだよ</h2><p>テキストだよ</p> `, } JS
41.
const ButtonContainer =
{ props: [‘num’], template: `<button>{{ num }}</button>` } new Vue({ data(){ return { count: 10 } }, template: `<button-container v-bind:num=“count” />` }) JS (2) props 4. Component https://jp.vuejs.org/v2/guide/components-props.html 親コンポーネントで ’[属性名]=“値”’ (v-bind:[属性名]にすることで動的に値を渡せ ます)を指定し、⼦コンポーネントに ‘props: [‘属性名’ ,…]’プロパティを使うこと で、親から⼦コンポーネントに値を渡すことができます。
42.
const ButtonContainer =
{ template: `<button @click=“$emit(‘UP’)”>Fire!</button>`, // 以下のようにメソッド経由で emit するのも OK methods: { up(){ this.$emit(‘UP’) } } } new Vue({ …, template: `<button-container @UP=“countUp” />` }) JS (3) emit 4. Component https://jp.vuejs.org/v2/guide/components-custom-events.html ⼦から親コンポーネントに知らせる場合、⼦コンポーネントで ’@click=“$emit(‘(カスタムイベント名)’)”’ とクリックするとカスタムイベントとし て親に通知することができます(クリック以外も OK)。 親は ‘@(カスタムイベント名)=“…”’のように受け取ってメソッドを実⾏できます。
43.
5. Vue CLI
44.
About Vue CLI Vue
アプリケーションの開発環境をサクッと作れるツール。 2018 年 8 ⽉にバージョン3にアップデート、以下の機能が追加。 - プラグインシステム - GUI 機能 https://cli.vuejs.org/
45.
Install ⿊い画⾯よりパッケージマネージャ(npm あるいは yarn)
で ’@vue/cli’ をグローバルインストールします。 完了後、vue コマンドが使えるようになります。 https://cli.vuejs.org/ # npm でインストール npm install -g @vue/cli # yarn でインストール yarn global add @vue/cli # Version 確認 vue —version # 3.3.0 SH
46.
# ‘vue create
[プロジェクト名]’ でプロジェクト作成開始 vue create hello-world # ‘default(babel + eslint)’ あるいは⼿動追加(‘Manually …’)かを選択 # 使⽤するパッケージマネージャを選択(Yarn or NPM) # 現在のディレクトリで以下コマンドを実⾏したら完了(NPM 使⽤時) cd hello-world npm run serve Create a Project 対話形式で Vue のフロントエンド環境が作れます。 ⼿動追加の場合、選択項⽬によって詳細設定を⾏います。 (Vue Router を追加した場合、history modeを使うかどうか等) https://cli.vuejs.org/guide/creating-a-project.html#vue-create SH
47.
# GUIモードでプロジェクトを作成 vue ui Create
a Project via GUI (1/2) コマンドラインによる対話形式でプロジェクトを作ったのに対 し、’vue ui’ コマンドを実⾏するとブラウザが⽴ち上がり、 GUIベースでプロジェクトの作成を⾏うことができます。 https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui SH
48.
Create a Project
via GUI (2/2) https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui 画⾯は違いますが、コマンドラインと同じフローで設定を進めて いくことができます。
49.
6. Appendix
50.
6. Appendix (1) v-html (2)
v-cloak (3) ref (4) custom directive (5) transition (6) slot +αなディレクティブ他
51.
(1) v-html <div id=“app”> <!— Vue
インスタンスの記述 data(){ text: ‘No. <strong>1</strong>’ } —> <p v-html=“text”></p> </div> https://jp.vuejs.org/v2/api/#v-html HTML ‘v-html=“(プロパティ名)”’ を該当要素に付与すると、 プロパティ名に対する値が html タグで書かれているとタグとして認識してくれ ます(通常はタグと認識せず⽂字列として認識)。 XSSにさらされる可能性があります。 6. Appendix
52.
(2) v-cloak <style> [v-cloak]{ display: none; } </style> <div
id=“app”> <p v-cloak> {{ message }} </p> </div> https://jp.vuejs.org/v2/api/#v-cloak HTML ロードするタイミングによって、描画される前に⼆重中括弧部分が表⽰されるこ とがあります。 ‘v-cloak”’ は Vue インスタンスがコンパイルされるまで残存するディレクティブ で、このディレクティブに対しcssで⾮表⽰にすると上述が解消されます。 6. Appendix
53.
(3) ref <div id=“app”> <!— Vue
インスタンスの記述 mounted(){ console.log(this.$refs.txt) } —> <p ref=“txt”>ダミーテキスト</p> </div> https://jp.vuejs.org/v2/api/index.html#ref HTML html側で ‘ref=“(参照名)”’ を付与した要素を、Vue インスタンス内で ’this.$refs.(参 照名)’ によって取得することができます。 document.getElementBy(…) と通常の JS でも要素を取得することもできます(コン ポーネントによって実⾏タイミングを変える必要があります) 6. Appendix
54.
(4) custom directive https://jp.vuejs.org/v2/api/index.html#ref カスタムディレクティブとは、v-if
等の標準組み込みのディレクティブとは別 に、’Vue.directive(…)’ でディレクティブを⾃作することができます(v-xxx)。 上記だとʼv-customʼを付与した要素に対し、 6. Appendix Vue.directive( // ディレクティブ名(以下だとプレフィックス付で ’v-custom’) ‘custom’, // コンポーネントのライフサイクルにフックして実⾏ { inserted(el, binding, vnode, oldValue){ // el : ディレクティブを付与している要素 // binding: ディレクティブに渡された値等のパラメータ // vnode: 仮想ノード // oldVnode: 以前の仮想ノード(更新系ライフサイクルのみ使⽤) }}) JS コンポーネントのグローバ ル登録のように、 Vue.XXX(‘定義名’, {設定パラ メー})と記述
55.
(5) transition (1/2) <style> .fade-enter-active,
fade-leave-active { transition: all 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> <div id=“app”> <transition name=“fade”> <div class=“modal” v-show=“noError”>…</div> </transition> </div> https://jp.vuejs.org/v2/guide/transitions.html HTML [v-if / v-show / 要素の動的追加・削除] に更新時アニメーションをさせる場合、上 記のように html 側で ‘<transition name=“(トランジション名)”></transition>’ で該 当エリアを囲み、cssアニメーションで制御することができます。 name指定があれば’(トランジション名)-’のプレフィックスがつきます。 4. Appendix transitionタグに name 属性がなければ、 ‘.v-enter’と ’v-’がプレフィックスになります。
56.
(5) transition (2/2) https://jp.vuejs.org/v2/guide/transitions.html 4.
Appendix name 属性にトランジション名をセットしていると、上図プレフィックスの ’v-’ が ’(トランジション名)-’ になります。 Enter は要素の挿⼊、Leave は要素削除で、トランジションの開始・最中・終了 にクラスが付与されます。
57.
(6) slot https://jp.vuejs.org/v2/guide/conditional.html#v-show コンポーネントのバリエーションが増え(ラベル違いや要素の有無)、props で条 件出し分けする等でコンポーネントの表⽰が複雑化する恐れがあります。slot
を 使うことで、親コンポーネントから挿⼊したいデータを⼊れ⼦にすることで表⽰ することができます。 4. Appendix const ButtonContainer = { // 親コンポーネントから挿⼊可能な箇所を slot タグで指定 template: `<button><slot></slot></button>`, } new Vue({ …, // 以下、⼦コンポーネントに⼊れ⼦で記述した情報が slot に展開 template: `<button-container>ボタンですよー</button-container>` }) JS
58.
6 + α.
Appendix of Appendix
59.
vue-devtools Chrome Developer Tools
の Vue 版のようなもの。 Chrome/Firefox の拡張機能、Electron ベースで配布。 (1) ⾒ているサイトが Vue.js で作られているか (2) コンポーネント向けのインスペクタ (3) Vuex の状態管理 (4) data 等のプロパティの確認・修正 ただし、開発⽤ Vue.js で (1)~(4) を確認できるが、 本番⽤ Vue.js や圧縮された状態では (2)~(4) の確認ができません。 https://github.com/vuejs/vue-devtools
60.
Codesandbox ローカルでなくオンラインで簡単に動作確認したい場合、 Codesandbox で vue-cli
が使えます。 Github アカウントでサインアップでき、エディタ上で npm パッケージ もインストールできたりとローカル環境のセットアップが不要。 https://codesandbox.io/
61.
Vue.js 参考サンプル・事例① (公式
examples) https://jp.vuejs.org/v2/examples/index.html
62.
Vue.js 参考サンプル・事例② (Vue.js
Examples) https://vuejsexamples.com/
63.
Vue.js 参考サンプル・事例③ (made
with vue.js) https://madewithvuejs.com/
Baixar agora