見出し画像

Vue3 チュートリアル１

プログラマー

Vueインスタンスの作成

Vueアプリケーションは、インスタンスを作成することで起動されます。
作成方法は、Vue2では「new Vue()」で作成していましたが、Vue3では「Vue.createApp()」を使用して作成するようになりました。

createAppメソッドの構文は以下です。

[構文]
Vue.createApp({
    name: value, ・・・
}).mount(el)

name： プロパティ名　　value： 値
el：Vue.jsを適用する要素

プロパティには様々なオプションを設定可能です。

今回、HTMLに文字列を描画する方法を学ぶためにdataオプションを使用しましょう。dataオプションは、テンプレート（HTML）から参照できる値を格納したオブジェクト（データオブジェクト）を返却するように実装します。

data() {
    return { 
          message1 : "メッセージ１",
          message2 : "メッセージ２",
    }
}

返却されたデータオブジェクトがテンプレートのどの要素と紐づけられるかは、mountメソッドにid属性やclass属性を指定して紐づけます。

HTMLの作成

テンプレートをまずは用意しておきます。

[hello.html]

<!DOCTYPE html>
<html lang="jp">
<head>
   <meta charset="UTF-8">
   <title>tutorial</title>
   <script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></script>
</head>
<body>
   <div id="app">
       // 「１」
   </div>
   <script type="text/javascript" src="hello.js"></script>
</body>
</html>

文字列の描画

Vue.jsでは、JavaScriptのデータをHTMLに文字列として描画したい場合
マスタッシュ構文　か　v-textディレクティブ　を使用します。

マスタッシュ構文

Vue.jsの基本的なテキスト展開方法です。
データオブジェクトのプロパティ名を {{ }} で囲んで {{ プロパティ名 }} の形でHTMLに埋め込むと値を出力できます。 
hello.htmlのコードは、テンプレートの「1」に埋め込みましょう。

[hello.js]

Vue.createApp({
   data() {
       return {
           message: "Hello、Vue.js！"
       }
   }
}).mount("#app")
[hello.html]

<div id="app">
   <p>{{ message }}</p>
</div>

画像2

またマスタッシュ構文は、任意のJavascript式を表すことも可能です。
例えば、以下の内容はいずれも有効なマスタッシュ構文となります。

[hello.js]

Vue.createApp({
   data() {
       return {
           value: 4
       }
   }
}).mount("#app")
<div id="app">
   <p>{{ 2 + 3 }}</p>
   <p>{{ value + 4 }}</p>
   <p>{{ Math.abs(-10) }}</p>
</div>

画像4

ディレクティブ

「v-」から始まる属性のことで、Vue.jsに指示を出すのに使用します。

v-textディレクティブ
文字列を描画する際に使用されますが、簡易的に書けて可読性の高いマスタッシュ構文が一般的に使用されるため、あまり使われないです。

[hello.js]

Vue.createApp({
   data() {
       return {
           message: "Hello、Vue.js！"
       }
   }
}).mount("#app")
[hello.html]

<div id="app">
   <p v-text="message"></p>
</div>

画像2

その他のディレクティブ

v-preディレクティブ
マスタッシュ構文の式を無効化します。
そのため設定されてる値ではなく {{ ・・・ }} がそのまま出力されます。

[hello.js]

Vue.createApp({
   data() {
       return {
           message: "Hello、Vue.js！"
       }
   }
}).mount("#app")
[hello.html]

<div id="app">
   <p v-pre="message"></p>
</div>

画像5

v-htmlディレクティブ
HTMLのマークアップ言語を文字列として表示するのではなく、HTMLとしてページに表示させる場合はv-htmlディレクティブを使用します。
ただし、クロスサイトスクリプティング脆弱性の原因ともなるので、よく考えて使用しましょう。

クロスサイトスクリプティングとは、利用者が入力した内容を表示するような構成のWebサイトに存在する欠陥を悪用して、攻撃者が用意した悪意のあるスクリプトを利用者の元に送り込んで実行させる攻撃手法。
引用：IT用語辞典
[hello.js]

Vue.createApp({
   data() {
       return {
           message: "<a href='http://yahoo.co.jp'></a>"
       }
   }
}).mount("#app")
[hello.html]

<div id="app">
   <p v-html="message"></p>
</div>

画像6

v-bindディレクティブ
HTMLタグの属性に対してマスタッシュ構文を埋め込むことは出来ません。
属性にデータオブジェクトを埋め込む場合は、v-bindを使用します。

[hello.js]

Vue.createApp({
   data() {
     return {
       url: "http://yahoo.co.jp"
     }
   }
}).mount("#app")
[hello.html]

// これは出来ません
<div id="app">
   <a href={{ url }}></p>
</div>

// v-bindを使用した場合
<div id="app">
   <a v-bind:href="url"></p>
</div>

また、v-bindはよく使用されることから省略形が用意されています。

<div id="app">
   <a :href="url"></p>
</div>

「：」のみでv-bindの省略形としています。

問題１

HTMLと出力内容に合うJavascriptを作成してください。

HTMLの出力箇所

<div id="app">
   <p>{{message}}</p>
   <p>{{count}}</p>
   <p>{{user.lastName}}</p>
   <p>{{user.firstName}}</p>
   <p>{{user.prefecture}}</p>
   <p>{{colors[0\]}}</p>
   <p>{{colors[1]}}</p>
   <p>{{colors[2]}}</p>
</div>

出力内容

画像4

答え

Vue.createApp({
   data() {
     return {
       message: 'Hello Vue.js!',
       count: 0,
       user: {
           lastName: 'Yamada',
           firstName: 'Taro',
           prefecture: 'Tokyo'
       },
       colors: ['Red', 'Green', 'Blue']
     }
   }
}).mount("#app")

問題２

データオブジェクトにGoogleのURL（https://www.google.co.jp/）を設定し、HTMLからGoogleのホームにアンカータグを利用して遷移できるようにロジックを組んでみましょう。

この記事が気に入ったらサポートをしてみませんか？