前へ

次へ

Vue.js の使用を開始する

完了

Vue.js の使用を開始するには、フレームワークをインストールし、Vue アプリを作成した後、それをページに登録する必要があります。 登録により、アプリの使用方法をページに指示します。

それでは、始めましょう。

Vue.js をページに追加する

Vue.js をアプリケーションに追加するには、いくつかの方法があります。 このモジュールでは、script 要素を追加して、コンテンツ配信ネットワーク (CDN) から Vue をインポートします。 CDN を使用することにより、既存のアプリケーションを書き換えることなく Vue を追加できます。

CDN を使用して Vue をページに追加するには、次の script 要素をページに追加します。

<script src="https://unpkg.com/vue@next"></script>

この要素は、src ディレクティブで参照されるスクリプト ファイルを実行するようにブラウザーに指示します。 スクリプトが実行されると、Vue API を使用できるようになります。

アプリを作成する

すべての Vue.js アプリケーションは、アプリ オブジェクトの作成から始まります。 アプリは、アプリケーションで使用されるすべてのデータおよびメソッドの中心的な場所です。 アプリ オブジェクトはいくつかの規則に従いますが、基本的には JavaScript オブジェクトです。

Vue アプリを作成するには、メソッド createApp() を呼び出します。

const App = Vue.createApp({
    // methods and content go here
});

データの追加

アプリを作成したので、アプリにより多くの機能を与えるプロパティを追加できます。 ほとんどのアプリで使用される重要なメソッドが data() です。 Vue.js では、このメソッドを使用して、アプリケーションで使用できるようにするために必要なすべての情報にアクセスします。

Note

このモジュールでは全体を通して、data() メソッドを使用します。

data() によって返されるオブジェクト内のプロパティはすべて動的です。 Vue.js は、すべての値の変更を自動的に検出します。 その後、表示の適切な部分を、更新された情報で更新します。

データ オブジェクトを作成する

Vue.js は、data() メソッドを呼び出します。 Vue.js では、戻り値として、JavaScript オブジェクトを想定しています。

次の例では、返されるオブジェクトに、プロパティ firstName と lastName が含まれています。

// a sample app object
const App = Vue.createApp({
    data() {
        return {
            firstName: 'Christopher',
            lastName: 'Harrison'
        };
    }
});

この時点で、データは、ユーザーに表示できるように公開されます。

アプリをマウントする

作成されたアプリ オブジェクトを Vue.js で使用できるようにするには、そのオブジェクトを "マウント" する必要があります。 アプリをマウントすることにより、アプリが制御するページの部分を指示し、情報や HTML を表示できるようにします。

アプリケーションをマウントするには、通常の HTML 要素の id を参照します。

<!-- the HTML element which will host our app -->
<div id='app'>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>

実行時には、id= 'app' 要素の内容が、Vue.js アプリケーションの内容に置き換えられます。

データの表示

データをページに表示するには、{{ }} 構文を使用します。これは、"ハンドルバー" とも呼ばれます。 {{ }} 構文内では、表示する情報にアクセスするために必要な任意の JavaScript コードを指定できます。

先ほど作成した data() 関数は、オブジェクトを返します。 オブジェクトは Vue.js によって自動的に使用できるようになるため、data() を呼び出す必要はありません。

名を表示する場合、構文 {{ firstName }} を使用できます。 次の例は、lastName と firstName を表示できる完全なアプリケーションを示しています。

<!-- the HTML element which will host our app -->
<div id='app'>
    {{ lastName }}, {{ firstName }}
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>

Note

{{ }} 構文は、Vue で制御される要素内でのみ機能します。 この構文は、コンポーネント内、または Vue によってマウントされた HTML 要素内のいずれかで機能します。

続行