建立應用程式的方法

<div id="app">
  {{text}}
</div>

<script>
  var app = new Vue({
    el:'#app',
    data:{
      text:"This is the test sentence."
    }
  });
</script>

第六行程式碼，是專門用在Vue和應用程式綁定的方法。

在這行程式碼寫完後，Vue的應用程式就算生成成功，但在這個階段中，是無法使用的，因為Vue的應用程式在生成後，必須要綁定一個HTML元素，才能真正執行。

綁定HTML元素後（上面程式碼HTML部分），開啟Vue開發者工具，出現Root，就是綁定成功。

綁定成功後，可以從Vue開發者工具修改資料內容，畫面會隨之更動，這也是Vue的最大特色。

注意事項

1. Vue綁定HTML元素時，不一定要ID元素，Class的元素也可以，只是ID較為常用。因為Vue一次只能綁定一個元素，所以如果用Class，理論上可行，但生成了兩個DOM無法同時出現，而ID有獨一性，因此才多用ID。

2. 雖然Vue通常只建立一個應用程式，但也可以生成兩個應用程式。

   <div id="app1">
     {{text}}
   </div>
   <div id="app2">
     {{text}}
   </div>
   
   <script>
     var app1 = new Vue({
       el:'#app1',
       data:{
         text:"This is the test sentence 1."
       }
     });
     var app2 = new Vue({
       el:'#app2',
       data:{
         text:"This is the test sentence 2."
       }
     });
   </script>
   

   若將兩個不同的應用程式同時放入網頁，Vue開發者工具會出現兩個Root。

   

3. Vue的應用程式不可以用巢狀方式建立，巢狀內層的應用程式會無效，也可能會出現錯誤，所以寫HTML部分是不可以寫成像下述程式碼的：

   <div id="app1">
     {{text}}
     <div id="app2">
     	{{text}}
   	</div>
   </div>
   

   只要HTML寫成巢狀，不論Vue的部分如何寫，都不會有執行正確的時候。