チュートリアルではじめるVue.js

チュートリアルではじめるVue.js
sh-ogawa

事前にやっておいて欲しいこと
使用するPCでcomposerでLaravelプロジェクトを作成できるようになっている
https://readouble.com/laravel/5.4/ja/installation.html
使用するPCでnpmコマンドが使えるようなっている
https://www.webprofessional.jp/beginners-guide-node-package-manager/

はじめに
Vue.jsに入門したけど、公式チュートリアルでは個人的に内容が足らなかったので、
自分で作りました。
チュートリアルからVue.jsをはじめよう！

基本的にVue.jsのチュートリアルの焼きまわしです。
文章で解説されてもよく判らなかったり、
こういうチュートリアルが欲しかったというのを追記して作成しています。

いつもなら御託を並べるわけだけど、
触った方が早いから、何も言いません。

その威力、チュートリアルで体感せよ！

1.
宣言的レンダリング

以下のコードを写経して
ブラウザで開こう
<!DOCTYPE html>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>

<!DOCTYPE html>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</script>
①
①
②
②

ブラウザのデベロッパーツールで
以下を入力して実行
app.message = ‘ビールがとても飲みたいです。’

ブラウザ上の表示変わりました？

これ、すごくないですか？
今までは、getElementByIdとか、$(‘#hoge’)とか行って、
その要素を取った後に「val(‘ビールがとても飲みたいです。’)」
とかやってたのに、

これ、すごくないですか？
今までは、getElementByIdとか、$(‘#hoge’)とか行って、
その要素を取った後に「val(‘ビールがとても飲みたいです。はい。’)」
とかやってたのに、
って打って実行するだけで画面に描画されてしまいました。

以下の関係にある
<!DOCTYPE html>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</script>
①
①
②
②
③
③

以下の関係にある
<!DOCTYPE html>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</script>
①
①
②
②
③
③
③インスタンスにある
②プロパティの値を
①の要素の該当箇所(②)にセットする

これをしっかりと抑えておけば、
あとはほぼテクニックの話なので、
やればやった分だけできるようになる。

これをしっかりと抑えておけば、
あとはほぼテクニックの話なので、
やればやった分だけできるようになる。
多分ね！

2.
ディレクティブを使う

<!DOCTYPE html>
<div id="app">
<span title="{{ message }}">
マウスのカーソルを合わせてみて
</div>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</script>

マウスオーバーで”Hello Vue!”と表示された人います？

<!DOCTYPE html>
<div id="app">
<span title="{{ message }}">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</script>
属性値に対して、こういうことはできないです

これを解決するためのソリューションが

これを解決するためのソリューションが
ディレクティブ！

<!DOCTYPE html>
<div id="app">
<span v-bind:title="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</script>

今度はマウスオーバーで”Hello Vue!”と表示されたでしょうか？

カーソルの表示変わりました？

<!DOCTYPE html>
<div id="app">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</script>
“v-”で始まる属性は、Vue.jsで使用する属性です。

厳密にはちょっと違うけど、
v-bind:HTML属性
というAPIだと思ってください。

<!DOCTYPE html>
<div id="app">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</script>
Vueの機能を使って、
appインスタンスのmessageプロパティを
HTMLのtitle属性にセットする
ということを表している

APIはAPIリファレンスを見るしかないので、
やりたいことを達成できるものがあるかを調べてみてください。
大抵のものはきっと見つかるはずです。
APIリファレンスは以下で公開されています。
https://jp.vuejs.org/v2/api/

とはいえ、よく使いそうなものは本日扱うので、
丸投げはしないです。ご安心を！

<!DOCTYPE html>
<div id="app">
<span v-if="seen">Now you see me</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
</script>

app.seen = false

ブラウザ上から表示が消えましたよね？
続けて、
app.seen = true
を実行してブラウザに表示させましょう

<!DOCTYPE html>
<div id="app">
<span v-if="seen">Now you see me</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
appインスタンスのseenプロパティがtrueの場合に描画する
falseの場合は、デベロッパーツールで要素を見ると判りますが
、HTMLがコメントアウトされます

ブラウザで開こう<!DOCTYPE html>
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>

<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>
ループはv-forを使う
v-forの中身はPHPの
foreachに似てるので、
親しみやすいのでは？

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
v-on:拾うイベント
処理メソッドを定義

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
メソッドは
methodsセクションに書く

<div id="app">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
</script>

<div id="app">
<ol>
</ol>
</div>
<script>
props: ['todo'],
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
]
}
})
</script>
これがコンポーネント

<div id="app">
<ol>
</ol>
</div>
<script>
props: ['todo'],
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
]
}
})
</script>
コンポーネント化すると
カスタムタグとして使えるようになる

<div id="app">
<ol>
</ol>
</div>
<script>
props: ['todo'],
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
]
}
})
</script>
prop：このコンポーネントが受取る引数
template：実際に書き込むHTML

<div id="app">
<ol>
</ol>
</div>
<script>
props: ['todo'],
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
]
}
})
</script>
引数に渡す変数は、
Vueインスタンスが持っているデータの
名前と被るとエラーになるので注意

ここまでのチュートリアルのように、
ちまちま定義していると辛いし、実際に使用するときはLaravel上での使用になるため、
そこのチュートリアル。

LaravelにはLaravel MIX、中身はwebpackが付いてくるので、
webpackを使ってVue.jsを使うことになります。
Vue.js上のドキュメントでは、「単一コンポーネント」と呼ばれているものです。

ファイルを分割して作ったcssやらjsを、１つのcssファイル、jsファイルに纏められるやつ
。
細かい説明は以下が判りやすいと思ったので参照してください。
https://qiita.com/soarflat/items/28bf799f7e0335b68186
Laravelで使う場合は、webpackを簡単に使えるようにLaravel Mixがある（再掲）
webpack

目標
<!DOCTYPE html>
<div id="app">
<ol>
</ol>
</div>
<script>
props: ['todo'],
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
]
}
})
</script>
最終的に、
この部分を別ファイル化して使います。

[Laravelのプロジェクト作成]
$ composer create-project --prefer-dist laravel/laravel vue-laravel-hands-on
IntelliJか何かで上記で作ったルートディレクトリを開く
準備

準備
実はデフォルトで
単一コンポーネント化されたVueコンポーネントが
付属されている

まぁいきなり作り出す前に、アセットコンパイル（１つのファイルに纏めたりする）が、
ちゃんと動くか確認しよう。
準備

$ npm install
$ npm run dev
準備

$ npm install
$ npm run dev
準備
トーストでSuccessが出ればOK

以下をExample.vueに写経
<template>
<li>{{ todo.text }}</li>
</template>
<script>
export default {
props: ['todo'],
mounted() {
console.log('Component mounted.')
}
}
</script>

require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
app.jsの中身を確認
今回は要らないから削除

bodyタグ以下に下記を記述
<body>
<div id="app">
<example v-for="item in groceryList" :todo="item"></example>
</div>
</body>
<script src="/js/app.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
groceryList: [
]
}
});
</script>
bladeを修正

<body>
<div id="app">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
groceryList: [
]
}
});
</script>
bladeを修正
コンパイルしたjsの読込み

<body>
<div id="app">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
groceryList: [
]
}
});
</script>
bladeを修正
変数などは利用側で定義する

<body>
<div id="app">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
groceryList: [
]
}
});
</script>
bladeを修正
app.js上で定義したコンポーネント名を使う
（普通のコンポーネントと同じ）
[app.js]

<body>
<div id="app">
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
groceryList: [
]
}
});
</script>
bladeを修正
コンポーネントの引数に
利用側の変数をバインドさせる
（普通のコンポーネントと同じ）
[app.js]
[Example.vue]
<template>
<li>{{ todo.text }}</li>
</template>
<script>
export default {
props: ['todo'],
mounted() {
console.log('Component mounted.')
}
}
</script>

$ php artisan serve
ちゃんと動くか試そう
127.0.0.1:8000にアクセスして
リストが表示されればOK

チュートリアルはここまでです。
何か質問あれば言ってください。

これであなたも今日から
「Vue.js完全にマスターした」
って言えるね

チュートリアルではじめるVue.js

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à チュートリアルではじめるVue.js

Similaire à チュートリアルではじめるVue.js (20)

Plus de 小川昌吾

Plus de 小川昌吾 (20)

Dernier

Dernier (6)