【アウトプット㊻】-Vue- Vue.jsとは

ぽの

Vue.jsとは

ユーザーインターフェイスを構築するためのプログレッシブフレームワーク。

Vue.jsを使用するメリット

◎他のプログラミング言語と比べて学習コストが低い
◎MMVVMモデル型のため、レスポンスが早い
◎DOMを操作するコード量を減らすことができるため、開発スピードが早くなる

Vue.jsを読み込む方法

◎CDNで読み込む
https://jp.vuejs.org/v2/guide/installation.html

▼HTML

<body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="js/main.js"></script>
</body>

bodyタグの末尾に挿入する
※jsファイルは最後に読み込む

◎NPM

◎直接組み込む

Vueインスタンスの生成

var app= new Vue({

})

この形は決まり文句みたいなもの

ルートテンプレート

HTML ベースのテンプレート構文を使用した、描画部分に関する記述をする

▼HTML

<div id="app">
       
</div>

▼vue.js

let app = new Vue({
  el: "#app",
  data: {
     message: "こんにちは"
   }    
});

Vue. js を動作させるため の オプション を「 オプション 名: 値」 の ハッシュ 形式 で 指定できる。
elは、アプリケーションを紐付ける要素セレクタを指定する。
idがappである要素の配下で、Vue.jsが有効となる。

▼表示結果

無題


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