Vue.js開発入門 > Chapter 1 Vue.jsって何

05 まとめ

Vue.jsの基本的な使い方

  • hello.html
      1
      2
      3
      4
      5
      6
      7
      8
      9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
    
    <!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>
  1. vue.jsを読み込む。
    (ここではCDNのリンクを張っている)
  2. Vue.jsとつながる要素を作る。
    (<div id="app">の部分)
  3. scriptタグでVueインスタンスを作る。
    (new Vue()の部分)
  4. Vueインスタンスで表示データを用意する。
    (プロパティ data: の部分)
  5. データと表示をつなげる。
    (appという名前でつなげている部分。<div id="app">とel: "#app"で同じ「app」という名前を指定)



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


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-08-10 (土) 12:11:22 (13d)