VueJS - 簡介

Vue是一個用於構建使用者介面的JavaScript框架。其核心部分主要關注檢視層，非常易於理解。本教程將使用2.0版本。

由於Vue主要用於前端開發，接下來的章節中我們將處理大量的HTML、JavaScript和CSS檔案。為了理解細節，讓我們從一個簡單的例子開始。

在這個例子中，我們將使用Vue.js的開發版本。

示例

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'My first VueJS Task'
            }
         });
      </script>
   </body>
</html>

輸出

這是我們使用VueJS建立的第一個應用。如上程式碼所示，我們在.html檔案的開頭包含了vue.js。

<script type = "text/javascript" src = "js/vue.js"></script>

在body中添加了一個div，它在瀏覽器中列印“我的第一個VueJS任務”。

<div id = "intro" style = "text-align:center;">
   <h1>{{ message }}</h1>
</div>

我們還在插值中添加了一條訊息，即{{}}。它與VueJS互動並在瀏覽器中列印資料。為了在DOM中獲取訊息的值，我們將建立一個Vue.js例項，如下所示：

var vue_det = new Vue({
   el: '#intro',
   data: {
      message: 'My first VueJS Task'
   }
})

在上段程式碼中，我們呼叫Vue例項，它接收DOM元素的id，即e1:’#intro’，這是div的id。資料包含分配了值“我的第一個VueJS任務”的訊息。VueJS與DOM互動並使用“我的第一個VueJS任務”更改DOM中{{message}}的值。

如果我們在控制檯中更改訊息的值，則更改會立即反映在瀏覽器中。例如：

控制檯詳情

在上圖控制檯中，我們列印了vue_det物件，它是Vue的一個例項。我們將訊息更新為“VueJs很有趣”，更改立即反映在瀏覽器中，如上圖所示。

這只是一個基本的例子，展示了VueJS與DOM的連線以及如何操作它。在接下來的幾章中，我們將學習指令、元件、條件迴圈等。

列印頁面