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