LogoMark.png

Vue.js の変更点


#author("2019-05-09T10:45:34+00:00","default:inoue.ko","inoue.ko")
#author("2020-06-02T10:54:10+09:00;2019-07-05T20:51:23+09:00","default:inoue.ko","inoue.ko")
*Vue.js
https://jp.vuejs.org/

~

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

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

一言でいうと
 データを作り、表示要素を用意し、それらの関係づけを設定する
というのが、Vue.js による開発作業の基本形です。
~

***Vue.js の 主な機能
-{{ data }}:データを表示
-v-bind:要素の属性をデータで指定
-v-model:入力フォームとデータをつなぐ
-v-on:イベントに対応
-v-if:条件分岐
-v-for:繰り返し処理
-computed:計算を実行
-watch:データの変化を監視
-transition:表示・非表示の際にアニメーション
-component:部品にまとめる

~


***どうやって使うの?
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>

-基本的なHTML文書の構造に、Vue の 入門コードを記述しています。
-ページ読み込み後に Vue のスクリプトを動かすため、<script>は</body>の直前に書いています。
-el(element): ページ内に ID定義された要素 #app を指します。
-data: モデル内に定義されたデータを指します。
-要するに 要素 #app に JavaScript が動的に message を書き込んでいます。

~

***事例2:マウスホバーで日時を表示
以下、変更部分のコードのみ記載します
-HTML
 <div id="app">
   <span v-bind:title="message">
     ここに数秒マウスを乗せると、日時が表示されます。
   </span>
 </div>

-Script
 var app = new Vue({
   el: '#app',
   data: {
     message: '日時 ' + new Date().toLocaleString()
   }
 })

~

(書きかけです)

***詳細は、以下の公式サイトをご覧下さい。
-https://jp.vuejs.org/index.html
-https://jp.vuejs.org/v2/guide/index.html

~
~