Thymeleaf + Vue组件化开发
Thymeleaf 搭配 Vue 完成组件化开发
- 前言
- 一、vue2
- 1.引入静态文件
- 2.声明组件
- 二、语法搭配
- 使用vue方法调用th数据
前言
提示:thymeleaf 固然好,但是 vue 也少不了:
可能 vue 用习惯了之后大部分玩家之后使用脚手架,vuecli vite来实现快速开发,可早早地就忘记了其实还是可以搭配 springboot 的一些模版引擎来完成乱配的效果。
一、vue2
1.引入静态文件
可以先引用 vue.min.js ,这里使用了 th 完成了动态的 静态资源目录
下面引入了 :
assets/js 目录下的:
vue、vue-i18n、vue-router
assets/plugins/elemet 目录下的:
elementui.js
assets/static 目录下的:
也就是我们自己写的 main.js、i18n.js、router.js
你可以先引入 vue.min.js 和 main.js 来完成最简单的组件引用功能
<!-- ================== BEGIN vue-js ================== -->
<script th:src="|${RES}/js/vue.min.js|"></script>
<script th:src="|${RES}/js/vue-i18n.min.js|"></script>
<script th:src="|${RES}/js/vue-router.min.js|"></script>
<script th:src="|${RES}/plugins/element/elementui.js|"></script>
<script th:src="|${RES}/plugins/element/locale/zh-CN.js|"></script>
<script th:src="|${RES}/plugins/element/locale/en.js|"></script>
<script th:src="|${RES}/static/i18n.js|"></script>
<script th:src="|${RES}/static/router.js|"></script>
<script th:src="|${RES}/static/main.js|"></script>
<!-- ================== END vue-js ================== -->
样式引入:<link th:href="|${RES}/plugins/element/elementui.css|" rel="stylesheet" />
第一行其实就相当于 <script src="/assets/js/vue.min.js"></script>
注意引入顺序,vue.min.js 要在最前面
2.声明组件
我们现在想要声明一个 VueHeader 组件然后在 index.html 里用,那么如何去做?
- 在一个文件夹里创建一个 header.html,这里要用到 th:fragment 标签了
给我们的 template
设置一个 id (vue-header)
,然后 <script> template
里绑定,这就已经跟 .vue 文件差不多了
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="header">
<template id="vue-header"><div id="header" class="app-header app-header-inverse">Header</div>
</template>
<script>const VueHeader = {template: '#vue-header',components: {DtEditor,},data() {return {activeLang: ''}},created() {},methods: {// 切换语言changeLang() {console.log(`语言切换: ${this.activeLang}`)i18n.locale = this.activeLang},}}
</script>
</div>
</html>
- 然后在 index.html 加入以下代码
假设我上面那个 header.html 在 pages 目录下,那就写成下面这样,引入的顺序不重要了,也可放在 vue.min.js 引入之前
<template th:replace="|/pages/header|::header"></template><!-- ================== BEGIN vue-js ================== -->
<script th:src="|${RES}/js/vue.min.js|"></script>
...
- 然后在 main.js 里引入组件就可以了
main.js 中的 vueApp 根实例绑定的就是 index.html
中 id
为 app
的元素
// 全局方法,可以在这里注册
Vue.use((_vue, _opts) => {_vue.prototype.$test = () => {console.log('test')}}
)const vueApp = new Vue({el: '#app',i18n,router,components: {VueHeader},data() {return {activeLang: '', // index.html data}},methods: {}
})
- 最后使用
因为你刚刚是在 vueApp 根实例中引入的组件,所以加载 app div 里就可以了
<!-- BEGIN #app -->
<div id="app"><!-- BEGIN #header --><vue-header></vue-header><!-- END #header -->
</div>
二、语法搭配
使用vue方法调用th数据
如下:$t()
是 vue 国际化方法,${menu.name}
是 th 里的数据
<div class="menu-text" th:v-text="|$t('${menu.name}')|"></div>
类似的还有点击事件
<a th:@click="| changeActive('${menu.url}') |" href="javascript:;" class="menu-link"><div class="menu-text" th:v-text="|$t('${menu.name}')|"></div>
</a>
<a th:v-on:click="|openEditor(${session?.USER})|" >{{ $t('xxx') }}
</a>
Thymeleaf + Vue组件化开发相关推荐
- 三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
- Vue组件化开发 - 非常详细,不要错过哦~
源码示例链接:https://pan.baidu.com/s/1NEYDmLl2K7nNa-AKWtJqVA 提取码:2c7a 目标 能够知道组件化开发思想 能够知道组件的注册方式 能够说出组件间的数 ...
- Vue3.x全家桶之Vue组件化开发(二)
✍灬更新说明 更新时间:2022-1-03 更新内容: Vue2.x 更新至 Vue3.x Demo与文件.截图演示齐全 保留了Coderwhy老师Vue2.x的精华部分,添加Vue3.x的内容 在V ...
- 四、Vue组件化开发学习笔记——父子组件通信,父级向子级传值(props),子级向父级传值(自定义事件),slot插槽
一.父子组件的通信 在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
- Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值
一.概述 以脚手架搭建的Vue项目为笔记背景. 如果将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的. 并且在真实开发中,可能会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常 ...
- 【Vue 组件化开发 三】父组件给子组件传递数据、组件通信(父传子、子传父)、父访问子(children、ref)、动态组件(is、component)
目录 一.前言 完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
- Vue——组件化开发DEMO
<template><div><h2>{{messagea}}</h2><button @click="btnClicka"& ...
- vue(9)—— 组件化开发 - webpack(3)
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...
最新文章
- Linux疑难杂症解决方案100篇(二十)-万字长文带你读懂正则表达式(建议收藏)
- 2684亿!阿里CTO张建锋:不是任何一朵云都撑得住双11
- python出现的次数最多的元素_Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算...
- cd rw 多少次_程序员:想知道你每天按了多少次键盘吗?
- contentwindow无法搜索对象_面试官:讲一下Jvm中如何判断对象的生死?
- 文件无刷新上传(swfUpload与uploadify)
- C++知识点(六)数组、指针与字符串导学
- aop注解配置切点 spring_Spring通过自定义注解灵活配置AOP切点
- python 计量经济 35岁 工作_Python在计量经济与统计学中的应用
- 【PAT】B1055 集体照(25 分)
- C语言版数据结构及算法_快速排序
- 《MySQL必知必会》学习笔记——第六章(过滤数据)
- html5游戏 糖果派对,搞怪碰碰球手机版糖果四溅游戏吃机高人来献计
- 新宝资讯上证涨跌比:1131:649
- java 导出word 带图片
- Audio专业名词解析
- 芝麻信用分800+的技巧,get!
- RuntimeException: Method ___ not mocked
- 机器学习_深度学习毕设题目汇总——场景
- 【滤波专题-第3篇】IIR无限冲激响应和FIR有限冲激响应数字滤波器有什么区别?