vue是一个用于构建用户界面的javascript框架。 其核心部分主要集中在视图层上，这很容易理解。在本教程中使用的vue版本是2.0。
由于vue基本上是为前端开发而构建的，我们将在即将到来的章节中处理大量的html，javascript和css文件。 要了解细节，这里从一个简单的例子开始。
在这个例子中，使用的是vuejs的开发版本。首先打开网址( http://vuejs.org/v2/guide/installation.html )下载开发版本，到一个目录下，例如在编写本教程时，笔者存储下载的vue.js文件的目录是：f:\worksp\vuejs 。
示例
在目录是：f:\worksp\vuejs 下，创建一个文件：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>
使用浏览器打开这个文件，可以看到以下效果 -
这是我们使用vuejs创建的第一个应用程序。从上面的代码可以看出，在helloworld.html 文件的开头添加了vue.js。
<script type = "text/javascript" src = "vue.js"></script>
在浏览器中打印的"hello, vuejs !"，是因为<body>中增加了一个div。
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
我们还在插值中添加了一条消息，即{{}}。 这用于与vuejs交互并在浏览器中打印数据。 为了在dom中获得消息的值，首先创建一个vuejs的实例，如下所示 -
var vue_det = new vue({
el: '#intro',
data: {
message: 'hello, vuejs !'
}
})
在上面的代码片段中，调用了vue实例，该实例采用dom元素的id，即e1:'＃intro'，它是div标签的id。有数据并分配一个值："hello, vuejs !"的消息。 vuejs与dom进行交互，并使用"hello, vuejs !"更改dom {{message}} 中的值。
如果碰巧在控制台中更改了消息的值，那么浏览器中也会反映相同的内容。 例如 -
在上面的控制台中，已经打印了vue实例的vue_det对象。并用"this is my first use vuejs."字符串更新这个消息，并且立即在浏览器中修改这个消息，就像上面的截图一样。
这只是一个基本的例子，显示了vuejs与dom的连接，以及如何操纵它。 在接下来的几章中，我们将学习指令，组件，条件循环等。
