Help us understand the problem. What is going on with this article?

はじめてのVue.js

はじめてこういう記事を書くのでお手柔らかにお願いします!!!

今回はVue.jsを使ってHelloWorldの出力までしていきましょう!!
今後回数を重ねてもっと深堀りしていく記事を書いていきますのでよろしくお願いします!

1. Vue.jsを使ってみよう!

Vue.jsを使うにあたって、scriptタグでライブラリを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

これでVue.jsを使用することができるようになったので、次に進みます!

2. インスタンスを作ろう!

Vueは、Vue関数でVueインスタンスを作成することによって起動されます、これを実行するためには?
JavaScriptの特性として、new演算子を使えばインスタンスを作ることができますのでやってみましょう!

インスタンスが分からないという方はこちら見れば理解できるかも・・・?→https://wa3.i-3-i.info/word1118.html

var vm = new Vue({

})

これで準備ができました!

3.データを作ろう!

先ほどのインスタンス、あれを作る時に引数にオプションを渡すことでデータを定義することができます!

ここでは試しにお決まりの、Hello World!が入ったHelloWorldって名前のデータを定義してみましょう!

var vm = new Vue({
  data:{ HelloWorld: 'Hello World!'}
})

こちらdataオプションというものを使って、インスタンスの中のデータを定義しました!
ほぼ主要のオプションだと思うので是非覚えてください!
data: {プロパティ名: 値}

4.HTMLテンプレートを作ってみよう!

では早速先ほどHelloWorldに格納したHello World!を表示するための準備をしましょう!
その為には、HTMLテンプレートを作る必要があります。
Vue.jsでは({{ }}) ←を使ってインスタンスのデータを参照することができます。
では実際にやってみましょう!

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test">
        <p>{{HelloWorld}}</p>
    </div>
    <script>
        var vm = new Vue({
            data: {
                HelloWorld: 'Hello world!'
            }
        });
    </script>
</body>

これでひとまずHTMLテンプレートの作成は終了です。
次にテンプレートとインスタンスを紐付けしていく方法を紹介します!

5.テンプレートとインスタンスを紐付けよう!

先ほどの順序でやったのに、あれ?HelloWorld!表示されないんだけど・・・ってなったと思います。
それは何故かというとテンプレートとインスタンスがくっついてなかったからなんです!バグやミスではありません!

そもそも、Vueの処理って、Vインスタンスを作ってどの要素と繋げるか(このことをマウントと呼ぶ)をしないと始まりません。
このマウントするためのオプションがel(elementの略)で指定した要素がマウントの対象になるわけです。
elを使ってHelloWorld!を表示させていきましょう~

var vm = new Vue({
            el: '#test',
            data: {
                HelloWorld: 'Hello world!'
            }
        });

このようにしたらブラウザを更新して確認してみてください!
HelloWorld!と表示されているはずです。

またこのelオプションはCSS、セレクタ、DOM要素を指定することができます。今回はidのtestを持つ要素を指定しました!

6.最後に

ここまでお疲れさまでした!
拙いかもしれませんが、できる限り分かりやすいように書いてみました!
こうして自分でアウトプットすることで頭に残る感覚がありますね・・・!
これを機にこれからもQiitaの執筆をしていきたいと思います´▽`

ここまで読んでいただきありがとうございました!:relaxed:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした