Vue.js 基礎 + Vue CLI の使い方

Vue.js 基礎 + Vue CLI の使い⽅

Agenda
1. Outline
2. Basic Syntax
3. Directives
4. Components
5. Vue CLI
6. Appendix

About Vue.js
2014 年に Evan You ⽒が開発した UI フレームワーク。
先⾏してFacebook が開発した React の影響を受けているとされ、
その特徴から関連ライブラリ(React Router / Redux / Next、Vue
Router / Vuex / Nuxt etc)とも類似したものがあります。
現在 Vue のバージョンは2.5.22。

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に対応するとも)

Features about Vue.js
(1) リアクティブな更新
(2) 仮想 DOM
(3) コンポーネント志向
(4) 扱いやすさ
(5) プログレッシブフレームワーク
(6) ⽇本語対応
※ React と Vue の関係性より、(1)~(3) の特徴は共通。

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

Setup
(2) CDN
https://jp.vuejs.org/v2/guide/installation.html#CDN

Setup
(3) Build tools (webpack, etc…)
関連パッケージをインストールし、gulp や webpack 等のツールで、Vue で
作ったコンポーネントをまとめることができます。
1からカスタマイズする点や作るプロダクトによって設定が変わってくる点、
今回は Vue CLI / Nuxt で進めることから割愛。

Setup
(4) Scaffolding Tools
Vue には、Vue CLI (後述)と Nuxt といった優れたツールがあり、
それを使うと開発環境の⼟台を秒で作ることができます
(パッケージを追加インストールすることも可能)。
https://cli.vuejs.org/
https://nuxtjs.org/

2. Basic Syntax
(1) instance
(2) data
(3) lifecycle
(4) computed
(5) watch
(6) methods

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

2. Basic Syntax
(1) instance (備考)
Linux で外部の記憶媒体( CD-ROM ドライブや USB 等)を追加することを「マウン
ト」といいます。
今回でいうマウントも上述のように、
[html の DOM ツリー]に[ Vue で作ったもの]を組み込む
というニュアンスで覚えてもらうと良いと思います。
マウント
(つなぎこむ)
Vue
アプリケーション

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

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

2. Basic Syntax
(2) data (備考)
Vue では表⽰(⾒た⽬)と状態と分けた記述になっており、状態が更新されるとそ
れに紐づいて表⽰される部分も更新が反映されます。
これまで普通にJSで書こうとすると、
const message = document.getElementById(‘message’) // テキスト要素取得
message.textContent = ‘Hello, Vue.js’ // テキスト要素の⽂⾔変更
といった冗⻑な記述がリアクティブな更新により不要になります。
表⽰状態
更新！
⾃動的に反映

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 等
同様のイベントがあります

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

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

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

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

3. Directives
(1) v-on
(2) v-bind
(3) v-if
(4) v-show
(5) v-for
(6) v-model
「ディレクティブ」という、html 側に記述
することで、要素のイベント登録や表⽰⾮表
⽰などを簡易かつ明⽰化する機能。

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:(イベント名)=“(メソッド名)”’ を該当要素に追記すると、
イベントに対応してメソッドを紐付けることが可能になります。

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 の式が使⽤できます。

(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

(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

(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

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

(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

new Vue({
data(){
return {
input: ‘’,
textarea: ‘’,
checkbox: []
}
}
})
JS
(6) v-model (2/2)
3. Directives
https://jp.vuejs.org/v2/guide/forms.html

4. Component
(1) component
(2) prop
(3) emit

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

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等)

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

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’
オプションにその変数を指定したら使えるようになります。

<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 のようなツール
が必要になります。

(1) component (備考)
4. Component
const Container = {
template: ` // コンポーネントは1つのルート要素であること
<div class=“header”>
<h2>⾒出しだよ</h2>
<p> テキストだよ</p>
</div>
// これはNG (2つのルート要素になっている)
// <h2>⾒出しだよ</h2><p>テキストだよ</p>
`,
}
JS

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: [‘属性名’ ,…]’プロパティを使うこと
で、親から⼦コンポーネントに値を渡すことができます。

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)。
親は ‘@(カスタムイベント名)=“…”’のように受け取ってメソッドを実⾏できます。

About Vue CLI
Vue アプリケーションの開発環境をサクッと作れるツール。
2018 年 8 ⽉にバージョン3にアップデート、以下の機能が追加。
- プラグインシステム
- GUI 機能

Install
⿊い画⾯よりパッケージマネージャ(npm あるいは yarn) で
’@vue/cli’ をグローバルインストールします。
完了後、vue コマンドが使えるようになります。
# npm でインストール
npm install -g @vue/cli
# yarn でインストール
yarn global add @vue/cli
# Version 確認
vue —version # 3.3.0
SH

# ‘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

# 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

Create a Project via GUI (2/2)
https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui
画⾯は違いますが、コマンドラインと同じフローで設定を進めて
いくことができます。

6. Appendix
(1) v-html
(2) v-cloak
(3) ref
(4) custom directive
(5) transition
(6) slot
+αなディレクティブ他

(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

(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

(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

(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(‘定義名’, {設定パラ
メー})と記述

(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-’がプレフィックスになります。

(5) transition (2/2)
https://jp.vuejs.org/v2/guide/transitions.html
4. Appendix
name 属性にトランジション名をセットしていると、上図プレフィックスの ’v-’
が ’(トランジション名)-’ になります。
Enter は要素の挿⼊、Leave は要素削除で、トランジションの開始・最中・終了
にクラスが付与されます。

(6) slot
https://jp.vuejs.org/v2/guide/conditional.html#v-show
コンポーネントのバリエーションが増え(ラベル違いや要素の有無)、props で条
件出し分けする等でコンポーネントの表⽰が複雑化する恐れがあります。slot を
使うことで、親コンポーネントから挿⼊したいデータを⼊れ⼦にすることで表⽰
することができます。
4. Appendix
// 親コンポーネントから挿⼊可能な箇所を slot タグで指定
template: `<button><slot></slot></button>`,
}
new Vue({
…,
// 以下、⼦コンポーネントに⼊れ⼦で記述した情報が slot に展開
template: `<button-container>ボタンですよー</button-container>`
})
JS

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

Codesandbox
ローカルでなくオンラインで簡単に動作確認したい場合、
Codesandbox で vue-cli が使えます。
Github アカウントでサインアップでき、エディタ上で npm パッケージ
もインストールできたりとローカル環境のセットアップが不要。
https://codesandbox.io/

Vue.js 参考サンプル・事例① (公式 examples)
https://jp.vuejs.org/v2/examples/index.html

Vue.js 参考サンプル・事例② (Vue.js Examples)
https://vuejsexamples.com/

Vue.js 参考サンプル・事例③ (made with vue.js)
https://madewithvuejs.com/

Vue.js 基礎 + Vue CLI の使い方

More Related Content

What's hot

Similar to Vue.js 基礎 + Vue CLI の使い方

More from Kei Yagi

Recently uploaded

Vue.js 基礎 + Vue CLI の使い方