Vue MasteryのIntro to Vue 2をやってみる~Lesson 1~
タイトルそのままです。
今回やってみるのはこちら。
※ 動画すぐに始まるので、音量注意！
Lesson 1 ~The Vue Instance~
Vueインスタンスを作って体験してみよう！と言った感じです。
事前準備
ファイルの作り方とかは紹介されていないので、こんな感じで準備していきます。
まずは、必要なファイルたちを作っていきます。
# 適当に作業ディレクトリを作成して移動
$ mkdir vue-mastery-lesson1 && cd vue-mastery-lesson1
# 作業に必要なファイルたちを作成
$ touch index.html main.js
# できてるか確認
$ ls
index.html main.js
次に、動画の初めの状態と同じようにコードを書いておきます。
index.htmlとmain.jsどちらも編集していきます。
エディタはなんでもおっけー！
わたしはVS Codeを使っています。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product App</title>
</head>
<body>
<div id="app">
<h1>Product goes here</h1>
</div>
<script src="main.js"></script>
</body>
</html>
var product = 'Socks'
お好みのブラウザ（Chrome推奨）にindex.htmlをドラッグ＆ドロップして、表示させてみます。
はい、これで準備完了！
完成形
この動画での完成形はこちら。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product App</title>
</head>
<body>
<div id="app">
<h1>{{ product }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
product: 'Socks'
}
})
やったこと
この動画では、下記のことをやりました。
- Vue.jsを使えるようにする
- main.jsにVueのインスタンスを定義する
- index.htmlで、Vueのインスタンスで定義したデータを利用する
1. Vue.jsを使えるようにする
まず最初に、Vue.jsを使えるようにしていきます。
公式ページ からおまじないをコピペしてきます。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product App</title>
</head>
<body>
<div id="app">
<h1>Product goes here</h1>
</div>
+ <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
これでVue.jsが使えるようになりました。
2. main.jsにVueのインスタンスを定義する
次に、main.jsを下記のように編集します。
- var product = 'Socks'
+ var app = new Vue({
+ el: '#app',
+ data: {
+ product: 'Socks'
+ }
+ })
3. index.htmlで、Vueのインスタンスで定義したデータを利用する
次に、index.htmlを下記のように編集します。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product App</title>
</head>
<body>
<div id="app">
- <h1>Product goes here</h1>
+ <h1>{{ product }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
そして、index.htmlをブラウザで開くとこのようになります。
何が起こったのか
まずは、javascriptのコードを見てみます。
var app = new Vue({
el: '#app',
data: {
product: 'Socks'
}
})
イメージ的には、
- Vueのインスタンスを作る
- 1をhtmlの要素を接続する
- 接続したhtmlの要素の流し込むデータを定義する
といった感じです。
インスタンスを作成するとき、基本はこの形です。
var app = new Vue()
Vueのインスタンスを作成する際には、引数を渡すことができます。
その引数がこの部分にあたります。
{
el: '#app',
data: {
product: 'Socks'
}
}
これらを紐解いていくと、
el: '#app':html上でid="app"と指定されている要素と接続しますよー、という意味。
data: {product: 'Socks'}: 接続した要素の中の受け口の中では、productという変数に、Socksという値を設定しますよー、という意味。
になります。
それを踏まえてhtmlのid="app"と指定されている箇所を見てみましょう。
<div id="app">
<h1>{{ product }}</h1>
</div>
{{ }}が上の説明で言うところの受け口になります。
その中にproductというものがあるので、それがSocksに置き換えられるので、ブラウザで確認するとSocksという文字が表示されるわけです。
なお、受け口の中では、javascriptが使えます。
なので、
<div id="app">
<h1>{{ product + 'がほしい' }}</h1>
</div>
というように、別の文字列と連結させて表示させることもできます。
いろんなことができそうですね！
まとめ
lesson1ということで、基礎の基礎って感じでした！
初めてVue.jsのコードをみるとわけわかんないので、こういった基礎からしっかり抑えていきたいですね！
Discussion