Vue是用于构建用户界面的JavaScript框架。它的核心部分主要集中在视图层，并且非常容易理解。我们将在本教程中使用的Vue版本是2.0。
由于Vue基本上是为前端开发而构建的，因此在接下来的章节中，我们将处理许多HTML，JavaScript和CSS文件。为了理解细节，让我们从一个简单的例子开始。
在此示例中，我们将使用vuejs的开发版本。
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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>输出数据：
My first VueJS Task
这是我们使用VueJS创建的第一个应用程序。如上述代码所示，我们在.html文件的开头包含了vue.js。
<script type = "text/javascript" src = "js/vue.js"></script>
正文中添加了一个div，该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。消息中的数据分配了值“我的第一个VueJS Task”。VueJS与DOM交互，并通过“我的第一个VueJS Task”更改DOM {{message}}中的值。
如果我们碰巧在控制台中更改了消息的值，则该值也会反映在浏览器中。例如：
控制台详细信息
在上面的控制台中，我们打印了vue_det对象，该对象是Vue的实例。我们正在使用“ VueJs有趣”更新消息，并且如上图所示，在浏览器中也立即进行了更改。
这只是一个基本示例，显示了VueJS与DOM的链接以及我们如何操作它。在接下来的几章中，我们将学习指令，组件，条件循环等。