iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 29
1
Modern Web

JS讀書筆記系列 第 29

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,就是綁定成功。

螢幕快照 2020-10-14 下午11.11.22

綁定成功後,可以從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。

    螢幕快照 2020-10-14 下午11.20.47

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

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

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


上一篇
JS讀書筆記30天 - Day28 MVVM概念
下一篇
JS讀書筆記30天 - Day30 感想
系列文
JS讀書筆記30

尚未有邦友留言

立即登入留言