Vue MasteryのIntro to Vue 2をやってみる~Lesson 1~

commits4 min read読了の目安(約3900字

タイトルそのままです。
今回やってみるのはこちら

※ 動画すぐに始まるので、音量注意!

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を使っています。

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>
    </div>

    <script src="main.js"></script>
</body>
</html>
main.js
var product = 'Socks'

お好みのブラウザ(Chrome推奨)にindex.htmlをドラッグ&ドロップして、表示させてみます。

はい、これで準備完了!

完成形

この動画での完成形はこちら。

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>
main.js
var app = new Vue({
    el: '#app',
    data: {
        product: 'Socks'
    }
})

やったこと

この動画では、下記のことをやりました。

  1. Vue.jsを使えるようにする
  2. main.jsにVueのインスタンスを定義する
  3. index.htmlで、Vueのインスタンスで定義したデータを利用する

1. Vue.jsを使えるようにする

まず最初に、Vue.jsを使えるようにしていきます。

公式ページ からおまじないをコピペしてきます。

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>
     </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を下記のように編集します。

main.js
- var product = 'Socks'
+ var app = new Vue({
+     el: '#app',
+     data: {
+         product: 'Socks'
+     }
+ })

3. index.htmlで、Vueのインスタンスで定義したデータを利用する

次に、index.htmlを下記のように編集します。

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'
    }
})

イメージ的には、

  1. Vueのインスタンスを作る
  2. 1をhtmlの要素を接続する
  3. 接続した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のコードをみるとわけわかんないので、こういった基礎からしっかり抑えていきたいですね!