VueJS入門程序

Vue是一個用於構建用戶界面的JavaScript框架。其核心部分主要集中在視圖層上，這很容易理解。在本教程中使用的Vue版本是2.0。

由於Vue基本上是爲前端開發而構建的，我們將在即將到來的章節中處理大量的HTML，JavaScript和CSS文件。要了解細節，這裏從一個簡單的例子開始。

在這個例子中，使用的是vuejs的開發版本。首先打開網址( http://vuejs.org/v2/guide/installation.html )下載開發版本，到一個目錄下，例如在編寫本教程時，筆者存儲下載的vue.js文件的目錄是：F:\worksp\vuejs 。

示例

在目錄是：F:\worksp\vuejs 下，創建一個文件：helloworld.html ，代碼如下所示 -

<html>
   <head>
      <title>VueJs HelloWorld</title>
      <script type = "text/javascript" src = "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入門程序

這是我們使用VueJS創建的第一個應用程序。從上面的代碼可以看出，在helloworld.html 文件的開頭添加了vue.js。

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

在瀏覽器中打印的"Hello, VueJS !"，是因爲<body>中增加了一個div。

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

我們還在插值中添加了一條消息，即{{}}。這用於與VueJS交互並在瀏覽器中打印數據。爲了在DOM中獲得消息的值，首先創建一個vuejs的實例，如下所示 -

var vue_det = new Vue({
   el: '#intro',
   data: {
      message: 'Hello, VueJS !'
   }
})

在上面的代碼片段中，調用了Vue實例，該實例採用DOM元素的id，即e1:'＃intro'，它是div標籤的id。有數據並分配一個值："Hello, VueJS !"的消息。 VueJS與DOM進行交互，並使用"Hello, VueJS !"更改DOM {{message}} 中的值。

如果碰巧在控制檯中更改了消息的值，那麼瀏覽器中也會反映相同的內容。例如 -

VueJS入門程序

在上面的控制檯中，已經打印了Vue實例的vue_det對象。並用"This is my first use VueJS."字符串更新這個消息，並且立即在瀏覽器中修改這個消息，就像上面的截圖一樣。

這只是一個基本的例子，顯示了VueJS與DOM的連接，以及如何操縱它。在接下來的幾章中，我們將學習指令，組件，條件循環等。

VueJS教程