LogoMark.png

Vue.js

Vue.js

https://jp.vuejs.org/


Vue.jsとは、Webアプリケーションにおけるフロントエンド(インターフェイス部分)の構築を容易にする JavaScriptフレームワークです。高機能な SPA(Single-page Application)を、シンプルなコードで記述できることから、近年注目を集めています。

Vue.js は MVVM(Model-View-ViewModel)型のフレームワークで、Vue内に用意したデータ(Model)とHTMLで表示する要素(View)をどのように関係づけるのか(ViewModel)を記述するものです。

一言でいうと

データを作り、表示要素を用意し、それらの関係づけを設定する

というのが、Vue.js による開発作業の基本形です。

Vue.js の 主な機能


どうやって使うの?

HTML の <head> 以下の記述(CDNで接続)をするだけで使えます。

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


事例1:文字列の表示

<!DOCTYPE html>
<html>
<head>
  <title>Sample Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <h1>Vue.js First Sample</h1>
  <div id="app">
   {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>


事例2:マウスホバーで日時を表示

以下、変更部分のコードのみ記載します

(書きかけです)




PAGES

GUIDE

DATA

Last-modified: 2019-07-05 (金) 20:51:23