VueJS - Introduction

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

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

在本例中，我們將使用vuejs的開發版本。

Example

<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>

Output

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

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

在正文中添加了一個div，用於在瀏覽器中列印「我的第一個VueJS任務」。

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

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

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

在上面的代碼片段中，我們調用的是Vue實例，該實例採用了DOM元素的id，即e1:「35; intro」，它是div的id。消息中有數據，該數據分配了值「我的第一個VueJS任務」。VueJS與DOM交互，並使用「我的第一個VueJS任務」更改DOM{{message}}中的值。

如果我們碰巧在控制台中更改了消息的值，瀏覽器中也會反映同樣的情況。例如−

Console Details

在上面的控制台中，我們列印了vue_det對象，它是vue的一個實例。我們正在用「VueJs is interest」更新消息，正如上面的螢幕截圖所示，瀏覽器中的內容也會立即更改。

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

極客書

VueJS 介紹

Example

Output

Console Details