VueJS - 简介

Vue是一个用于构建用户界面的 JavaScript 框架。它的核心部分主要集中在视图层，非常容易理解。我们将在本教程中使用的 Vue 版本是 2.0。

由于 Vue 基本上是为前端开发而构建的，因此我们将在接下来的章节中处理大量 HTML、JavaScript 和 CSS 文件。为了理解细节，让我们从一个简单的例子开始。

在这个例子中，我们将使用vuejs的开发版本。

例子

<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

这是我们使用 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:'#intro'，它是 div 的 id。消息中的数据被分配了值'My first VueJS Task'。VueJS 与 DOM 交互，并使用'My first VueJS Task'更改 DOM {{message}} 中的值。

如果我们碰巧更改了控制台中消息的值，浏览器中也会反映出同样的情况。例如 -

VueJS 有趣

控制台详细信息

VueJS 很有趣

在上面的控制台中，我们打印了 vue_det 对象，它是 Vue 的一个实例。我们正在用“VueJs 很有趣”更新消息，并且浏览器中的消息立即发生更改，如上面的屏幕截图所示。

这只是一个基本示例，展示了 VueJS 与 DOM 的链接，以及我们如何操作它。在接下来的几章中，我们将学习指令、组件、条件循环等。