VUE文档：https://vuejs.org/v2/guide/
简介
Vue是一个用于构建用户界面的渐进式框架，从一开始就被设计为可逐步采用。核心库只关注于视图层，并且很容易与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全能够支持复杂的单页应用程序。
下载vue.min.js
https://vuejs.org/js/vue.min.js
Ctrl+s出现如下图界面，选择保存位置
创建测试用的项目VueTest
选中项目--右键Maven--update project
选中项目--右键Build path--configure build path。
选中JRE System Library--Edit--修改为本机中已经安装并配置好的jre。
通过点击Add Library，选择Server Runtime
选择Eclipse开发环境已经配置好的tomcat，如下图箭头所示：
设置完成后，如下图
此时，项目的目录结构如下图所示：
选中项目--右键run as--run on server,项目成功启动并可以正常访问，如下图所示：
Vue实例创建和测试
在webapp下新建目录js，将vue.min.js添加到js目录中
在webapp下创建vue01.html，其内容如下：
el：指的是Vue实例挂载的元素节点， DOM 元素中的 id
data：定义Vue实例中需要使用的属性
methods ：定义的函数
{ { }} ：用于输出对象属性和函数返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue01</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="vue_01">
<h1>项目名 : {
{projectname}}</h1>
<h1>文件名 : {
{filename}}</h1>
<h1>{
{abc()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_01',
data: {
projectname: "VueTest",
filename: "vue01.html"
},
methods: {
abc: function() {
return this.projectname +"->"+ this.filename+"，这是第一个例子";
}
}
})
</script>
</body>
</html>部署VueTest项目到tomcat，选中项目--右键run as--run on server，项目成功启动后在浏览器中访问vue01.html
欢迎关注个人微信公众号“我爱编程持之以恒”。
