Vue.js/ファイラーっぽいUIを作ってみる/030_Vueオブジェクトを使う

前回の試作 HTML の要素を元ににした Vue オブジェクトを生成する。 body の閉じタグの直前に script タグを用意して、その中にこのように書き込む

var vm = new Vue({
    el: "#app"
});

Vue のライブラリを CDN から取得しているので Vue のコンストラクタが使えるようになっている。 el でどの画面要素をこの Vue オブジェクトの管理下にするかを決定している。

これが実行されて #app で示される div 要素が Vue の管理下に入るのだが、内容が単なる素の HTML なので Vue 側で単なる HTML と解釈されてそのまま出力される。つまり何も変化しない。

ブラウザで開いてみてエラーが出なければ OK

next: Vue.js/ファイラーっぽいUIを作ってみる/040_データを作る

まとめ

いままでのまとめのコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello</title>
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://unpkg.com/vuex@latest"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li class="folder">
                <h2>aaa</h2>
                <ul>
                    <li class="file">bbb</li>
                    <li class="file">ccc</li>
                    <li class="file">ddd</li>
                </ul>
            </li>
            <li class="file">eee</li>
            <li class="folder">
                <h2>fff</h2>
                <ul>
                    <li class="file">ggg</li>
                    <li class="folder">
                        <h2>hhh</h2>
                        <ul>
                            <li class="file">iii</li>
                            <li class="file">jjj</li>
                        </ul>
                    </li>
                </ul>
             </li>
             <li class="file">kkk</li>
        </ul>
    </div>
    <!-- ■■■■■■■■ 今回はココ ■■■■■■■■ --> 
    <script>
        var vm = new Vue({
            el: "#app"
        });
    </script>
</body>
</html>

javascript/vuejs/create_filer_like_ui/030_use_vue_object.txt · 最終更新: 2018-11-22 13:36 by ore

文書の先頭へ

Vue.js/ファイラーっぽいUIを作ってみる/030_Vueオブジェクトを使う

menu

書いてる野郎

Vue.js/ファイラーっぽいUIを作ってみる/030_Vueオブジェクトを使う

まとめ