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