LogoMark.png

Vue.js の変更点

#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>

~


***事例１：文字列の表示
 <!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 を書き込んでいます。

~

***事例２：マウスホバーで日時を表示
以下、変更部分のコードのみ記載します
-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

~
~