Introduction-to-Vuejs-Development_1-05 の変更点

追加された行はこの色です。
削除された行はこの色です。
Introduction-to-Vuejs-Development_1-05 へ行く。

#author("2019-08-10T03:51:44+00:00","default:sagasite","sagasite")
[[Vue.js開発入門]] ＞ Chapter 1　Vue.jsって何

*05　まとめ [#cf74bd72]
Vue.jsの基本的な使い方

-hello.html
#code(html){{{
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue.js sample</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p> {{myText}} </p>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                myText: 'Hello, world!'
            }
        })
    </script>
</body>

</html>
}}}

+ vue.jsを読み込む。
（ここではCDNのリンクを張っている）
+Vue.jsとつながる要素を作る。
（<div id="app">の部分）
+scriptタグでVueインスタンスを作る。
（new Vue()の部分）
+Vueインスタンスで表示データを用意する。
（プロパティ data: の部分）
+データと表示をつなげる。
（appという名前でつなげている部分。<div id="app">とel: "#app"で同じ「app」という名前を指定）

~
Vue.jsで作るWebアプリの基本骨格は、こんなパーツで構成されているんですね。
Vue.jsの基本的な使い方はシンプルで、特に複雑なルールではないと思いました。