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

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

在此示例中,我们将使用vuejs的开发版本。

这是我们使用VueJS创建的第一个应用程序。如上述代码所示,我们在.html文件的开头包含了vue.js。

正文中添加了一个div,该div在浏览器中显示“我的第一个VueJS任务”。

我们还在插值中添加了一条消息,即{{}}。这将与VueJS交互并在浏览器中打印数据。为了获取DOM中消息的值,我们正在创建vuejs的实例,如下所示:

在上面的代码片段中,我们正在调用Vue实例,该实例采用DOM元素的ID,即e1:’#intro’,它是div的ID。消息中的数据分配了值“我的第一个VueJS Task”。VueJS与DOM交互,并通过“我的第一个VueJS Task”更改DOM {{message}}中的值。

如果我们碰巧在控制台中更改了消息的值,则该值也会反映在浏览器中。例如:

在上面的控制台中,我们打印了vue_det对象,该对象是Vue的实例。我们正在使用“ VueJs有趣”更新消息,并且如上图所示,在浏览器中也立即进行了更改。

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