sce单页面应用vue

本文主要是介绍supSce框架在jsp中进行vue+element-ui的使用。

页面创建

页面和正常的jsp新建页面是一样的,主要是vue和element的引入

element-ui 引入

目前可以通过 unpkg .com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。

 <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.8/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@2.15.8/lib/index.js"></script>

vue.js 引入

同理vue.js的引入也是通过unpkg

<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

实战应用

1.jsp中 引入

vue.js要在element-ui前面引用,因为Element-Ui是基于vue封装的组件库

2.new Vue初始化一个Vue实例

1.el挂载的元素内，都是Vue的作用范围 2.data数据 当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

3.页面上使用

备注：vue和element的引用还可以将对应的文件下载到本地然后进行调用，本文主要是针对CDN引入进行介绍