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

示例

在目錄是：F:\worksp\vuejs 下，創(chuàng)建一個(gè)文件：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>

使用瀏覽器打開這個(gè)文件，可以看到以下效果 -

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

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

在瀏覽器中打印的"Hello, VueJS !"，是因?yàn)?code><body>中增加了一個(gè)div。

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

我們還在插值中添加了一條消息，即{{}}。這用于與VueJS交互并在瀏覽器中打印數(shù)據(jù)。為了在DOM中獲得消息的值，首先創(chuàng)建一個(gè)vuejs的實(shí)例，如下所示 -

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

在上面的代碼片段中，調(diào)用了Vue實(shí)例，該實(shí)例采用DOM元素的id，即e1:'＃intro'，它是div標(biāo)簽的id。有數(shù)據(jù)并分配一個(gè)值："Hello, VueJS !"的消息。 VueJS與DOM進(jìn)行交互，并使用"Hello, VueJS !"更改DOM {{message}} 中的值。

如果碰巧在控制臺(tái)中更改了消息的值，那么瀏覽器中也會(huì)反映相同的內(nèi)容。例如 -

在上面的控制臺(tái)中，已經(jīng)打印了Vue實(shí)例的vue_det對(duì)象。并用"This is my first use VueJS."字符串更新這個(gè)消息，并且立即在瀏覽器中修改這個(gè)消息，就像上面的截圖一樣。

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

下一篇：VueJS混合