老项目JSP中如何集成和使用VUE的一些特性
VUE主要开发单页面应用,并且为了做到前后端分离的一个产物。使用VUE开发单页面应用主要使用Vue CLI的脚手架来进行快速开发。教程比较多在此就不啰嗦了。但是往往有些项目不是前后端分离的,一句话系统是拿jsp写的,使用老一套的J2ee,这样的项目中都是直接操作的dom,使用的jQuery等。既然VUE好处挺多那我们可不可以在我们的JSP中使用呢,并且对我们的项目要求改造小,不影响之前的功能呢。下
VUE主要开发单页面应用,并且为了做到前后端分离的一个产物。使用VUE开发单页面应用主要使用Vue CLI的脚手架来进行快速开发。教程比较多在此就不啰嗦了。但是往往有些项目不是前后端分离的,一句话系统是拿jsp写的,使用老一套的J2ee,这样的项目中都是直接操作的dom,使用的jQuery等。既然VUE好处挺多那我们可不可以在我们的JSP中使用呢,并且对我们的项目要求改造小,不影响之前的功能呢。下面我们就介绍一种方法,在做老项目的同志们可以参考下,也欢迎提出更好的方式。
范围:前台jsp
实现:整合vue
效果:可以使用VUE的一些特性
不能实现:不能使用VUE的路由呀、VUEX、打包等等
原生使用:
直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。
1、可以建立一个 引入js和css等的一个jsp,每个页面(jsp)使用的时候直接引入该jsp即可(<%@include file=""%>)。
2、这个jsp的内如为:
全局引入的vue和其它辅助资源如:vue.min.js、axios.min.js等
参考如下:
<script type="text/javascript" charset="utf-8" src="vue.min.js"></script>
<script type="text/javascript" charset="utf-8" src="axios.min.js"></script>
<!--组件-->
<!--工具-->
3、使用方式
var vm = new Vue({});{}里面的东西我就不废话啦。
4、组件使用
Vue.component()写到一个js里面,在使用的时候引入该jsp页面即可。
经过以上步骤就可以简单使用VUE的数据绑定及主键的一些功能了。
如有大家有更好的方式可以讨论一下。
更多推荐
所有评论(0)