Vue.js/段階/シンプルにVueクラスを使うだけ

シンプルにブラウザから Vue のライブラリを呼び出して使うだけの段階。

現状のコードがもうあって、それを徐々に置き換えたいという場合や、Vue オブジェクトの挙動を学ぶ勉強の段階はこのスタイルを使うとヨイ

HelloWorld

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorld</title>
    <script src="https://unpkg.com/vue@2.5.17"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        new Vue({
            template: '<p>{{ msg }}</p>',
            data: {
                msg: 'HelloWorld'
            }
        }).$mount('#app');
    </script>
</body>
</html>

head 内の script タグで CDN から Vue のライブラリを引っ張ってきて Vue クラスをつかえる状態にする。そして body 内の script タグ内で Vue オブジェクトを作成する。

ここからは制御が Vue のシステム本体に移って、$mount で指定された要素(今回なら HTML中の id=app の div 要素)を template で指定された記述で取替えに行く。その際に data で指定した値を埋め込んでいる。

javascript/vuejs/stage/simple_use_vue_class/start.txt · 最終更新: 2018-11-17 20:47 by ore

文書の先頭へ

Vue.js/段階/シンプルにVueクラスを使うだけ

menu

書いてる野郎

Vue.js/段階/シンプルにVueクラスを使うだけ

HelloWorld