Vueで「Hello Vue!!」を出力する

はじめに

本記事はVueの初心者を対象に、Vueでどうやって「Hello Vue!!」が出力されているかについて記しました。

また、掌田津耶乃氏の「Vue.js&Nuxt.js 超入門」を参考にしています。

本記事を読んでVueについて深く知りたくなったら是非、手に取って下さい。

Vueの基本的な型

Vue.jsは大きく分けて「出力の部分」「スクリプト」の2か所から成り立っています。

これを「Hello Vue!!」を出力する方法例に見ていきましょう。

ソースコードは以下の通りです。

<!DOCTYPE html>
<html>
    <head>
        <title>My first Vue app</title>
        <script src="https://unpkg.com/vue"></script>
    </head>
 
    <body>
        <h1>Vue.js</h1>
        <div id="app">
             {{ message}} <!--この中にはJsの式もかける -->
        </div>
 
        <script>
            // 連想配列(オブジェクト)
            var data = {
                message: 'hello Vue!'
            }
        
            //インスタンス化
            var app = new Vue({
                el: '#app',
                data: data,
            })
 
        </script>
    </body>
 
</html>

解説

表示(出力)の部分

      <div id="app">
             {{ message}} <!--この中にはJsの式もかける -->
        </div>

上のコードのポイントは2つです。

・[id=”app”]とcssセレクタを宣言している点。
・{{message}}で変数のmessageに値を入れている点。ちなみにこの構文をムスタシェ構文という。(らしい笑)

スクリプト

<script>
            // 連想配列(オブジェクト)
            var data = {
                message: 'hello Vue!'
            }
        
            //インスタンス化
            var app = new Vue({
                el: '#app',
                data: data,
            })
 
  </script>

3行目~5行目:var data ={‥省略‥}:dataという変数にオブジェクトを作っています。

8行目~11行目:var app = new Vue({‥}):Vueオブジェクトのインスタンスを作成しています。

Vueのインスタンス作成

var 変数 = new Vue({オブジェクト})

オブジェクトの中身は以下の形で宣言する。

{el:対象,
data:値(オブジェクト)}

対象:[タグにつけたセレクタ]
値:オブジェクトを配置

3行目~5行目での変数をdataプロパティの値にいれる。このdataプロパティの値をelプロパティで宣言した対象内の変数として使うことができる。

まとめ

今回はVueにて「Hello vue!」を出力する方法について簡単にまとめていきました。

次回はtemplate構文について記していきます。

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping