JS读书笔记30天 - Day29 Vue的起手式——建立应用程序

建立应用程序的方法

<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的部分如何写，都不会有执行正确的时候。