Vue.jsのサンプルページ

Vue.jsの学習でサンプルページを作ってみました。
何らかのPG言語に取り組んだ事のある人であれば見ただけで理解できるようにします。
都度、ブラッシュアップをかけていきます。

#①Hello World

　vueで作成したオブジェクトをHTMLのマスタッシュタグにテキスト展開します。

- 画面表示
　　<img width="131" alt="vuejs1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264141/3339e368-c858-882a-5705-8ecd58bd80c4.png">

- ソースコード

```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <title>Document</title>
</head>
<body>
    <h1>Vue.js</h1>
    <div id = "app"> 
         {{message}}
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data:{
                message:'hello world'
            }
        })
    </script>
</body>
</html>
```
#②リストの表示内容をボタンで切替
　画面のリストの内容をクリックボタン切り替えます。
　ご参考までにソースに説明を記載しています。　

- 画面表示
　<img width="357" alt="vuejs2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264141/0cb56318-1202-db10-5b14-7bb871a95d2f.png">

- ソースコード

```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Vue.jsのインポート 公式サイト：https://jp.vuejs.org/v2/guide/を参照ください-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <title>Document</title>
    <!--ボタンのCSS-->
    <style type="text/css">
        button.buttonA {
            font-size: 24px;
            background-color: #248;
            color: #fff;
        }
    </style>

</head>
<body style="background-color: #cae4ff;">
    <h1>SAMPLE(Vue.js)</h1>
    <p>サンプルです。こちらは表示されます</p>
    <!--Vue.jsで定義したタグの指定。idで囲まれた部分のうち{{message}}がVue.jsで置き換わります
    　　詳しくはscriptの部分で解説します。-->
    <div id="app">
        <p>サンプルです。appで囲まれた部分が置き換わるのでこちらは表示されません</p>
        {{message}}
    </div>
    <hr>
    <button class = "buttonA" style="width:150px;height:50px"onclick='doAction();'>クリック</button>
    <!--切り替えの為の変数をhiddenで保持　-->
    <input type="hidden" value="0" id="flg1">
</body>

<script>
    /* １．Vue.jsのオブジェクトに設定する変数の定義 */
    var data1 = {
        message : 'Hello Vue!',
        items:['SHINAGAWA','OOSAKI','GOTANDA','MEGURO','YEBISU']
    };
    /* ２．Vue.jsのオブジェクトを定義します。*/
    var app = new Vue({
        /* CSSセレクタで紐付けるタグをIDで設定します。#appのシャープを忘れずに*/
        el:'#app',
        /* ２のオブジェクトのdataに１でつくったdata1を設定します*/
        data:data1,
        /* レンダリング処理　 data1を編集してappタグの中を置き換えます*/
        render:(element)=>{
            /* elementの関数：(タグ名,(属性情報,)表示内容)*/
            var p1 = element ("p",{style:'font-size:20pt;'},data1.message);
            var li1 = data1.items.map(item => element('li',{style:'font-size:24pt;'},item));
            var ol1 =element("ol",li1);
            var div1 =element("div",[p1,ol1]);
            /* appにVNODE（子NODE　message,items）を設定*/
            return div1;
        }
    })

        /*ボタンを押したときのアクション*/
        function doAction() {
        var flg1 = document.getElementById("flg1").value;
        /*hiddenで保持しているフラグを判定条件に利用*/
        if (flg1 == '0'){
            /*変数を変えるだけで画面に反映されます*/
            var newdata = [
                'しながわ','おおさき','ごたんだ','めぐろ','えびす'
            ];
            data1.message = "ひらがな";
            for (n in data1.items){
                data1.items[n] = newdata[n]
            };
            document.getElementById("flg1").value = "1";
        }else{
            /*変数を変えるだけで画面に反映されます*/
            var newdata = ['SHINAGAWA','OOSAKI','GOTANDA','MEGURO','YEBISU'];
            data1.message = "ALPHABET";
            for (n in data1.items){
                data1.items[n] = newdata[n];
            }
            document.getElementById("flg1").value = "0";}
    }
</script>
</html>
```

以上です。