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创建的第一个应用程序.如上面的代码所示，我们在.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:'我的第一个VueJS任务'
}
})在上面的代码片段中，我们调用Vue实例，它获取DOM元素的id，即e1:'#intro'，它是div的id.有消息的数据被赋予值'我的第一个VueJS任务'. VueJS与DOM交互并使用'我的第一个VueJS任务'更改DOM {{message}}中的值.
如果我们碰巧更改了值控制台中的消息，同样会反映在浏览器中.例如 :
在上面的控制台中，我们打印了vue_det对象，是Vue的一个实例.我们正在用"VueJs很有趣"来更新消息，并且在浏览器中立即更改了消息，如上面的屏幕截图所示.
这只是一个基本的示例显示了VueJS与DOM的链接，以及我们如何操作它.在接下来的几章中，我们将学习指令，组件，条件循环等.
