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

05 まとめ

Vue.jsの基本的な使い方

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