Vue的使用（下载vue.min.js+创建测试用的项目+Vue实例创建）-优快云博客

本文介绍了Vue的基础知识，包括Vue的渐进式特性，如何下载vue.min.js，创建测试项目VueTest，以及Vue实例的创建和测试。在测试项目中，详细阐述了设置项目路径、配置JRE、添加Server Runtime等步骤，并展示了Vue实例在vue01.html中的应用。

官网：https://vuejs.org/

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