脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Thymeleaf Vue组件化开发

Thymeleaf + Vue组件化开发方式

 更新时间：2023年11月01日 09:47:00   作者：LauSET  
这篇文章主要介绍了Thymeleaf + Vue组件化开发方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

提示：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="external nofollow"  rel="stylesheet" />

第一行其实就相当于

<script src="/assets/js/vue.min.js"></script>

注意引入顺序，vue.min.js 要在最前面

2.声明组件

我们现在想要声明一个 VueHeader 组件然后在 index.html 里用，那么如何去做？

1.在一个文件夹里创建一个 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>

2.然后在 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>
...

3.然后在 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: {}
})

4.最后使用

因为你刚刚是在 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:;" rel="external nofollow"  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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue3项目中配置TypeScript和JavaScript的兼容

    Vue3项目中配置TypeScript和JavaScript的兼容

    在Vue3开发中,常见的使用JavaScript（JS）编写代码,但也会有调整编写语言使用TypeScript（TS）的需求,因此,在Vue3项目设置中兼容TS和JS是刻不容缓的重要任务,
    2023-08-08
  • 在vue+element ui框架里实现lodash的debounce防抖

    在vue+element ui框架里实现lodash的debounce防抖

    今天小编就为大家分享一篇在vue+element ui框架里实现lodash的debounce防抖，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue出现弹出层时禁止底部页面跟随滑动

    Vue出现弹出层时禁止底部页面跟随滑动

    本文主要介绍了Vue出现弹出层时禁止底部页面跟随滑动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue实现动态列表点击各行换色的方法

    vue实现动态列表点击各行换色的方法

    今天小编就为大家分享一篇vue实现动态列表点击各行换色的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue element 表头添加斜线的实现代码

    vue element 表头添加斜线的实现代码

    这篇文章主要介绍了vue element 表头添加斜线的实现代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-11-11
  • vscode jsconfig.json 使用简介

    vscode jsconfig.json 使用简介

    通过jsconfig.json文件定义一个JavaScript项目,目录中是否存在此类文件表示该目录是JavaScript项目的根目录,文件本身可以选择列出属于项目的文件,要从项目中排除的文件以及编译器选项,这篇文章主要介绍了vscode jsconfig.json 使用说明,需要的朋友可以参考下
    2023-09-09
  • 如何在Vue项目中应用TypeScript类

    如何在Vue项目中应用TypeScript类

    与如何在React项目中应用TypeScript类类似在VUE项目中应用typescript，我们需要引入一个库vue-property-decorator，需要的小伙伴可续看下文具体介绍
    2021-09-09
  • vue项目中使用scss详细方法步骤

    vue项目中使用scss详细方法步骤

    这篇文章主要给大家介绍了关于vue项目中使用scss的详细方法步骤,scss是一种css预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性,让css更加简洁、适应性更强,可读性更佳,需要的朋友可以参考下
    2023-11-11
  • Vue2项目中对百度地图的封装使用详解

    Vue2项目中对百度地图的封装使用详解

    近期项目需求相关地图限定使用百度地图,功能比较简单,下面这篇文章主要给大家介绍了关于Vue2项目中对百度地图的封装使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • Vue学习笔记进阶篇之函数化组件解析

    Vue学习笔记进阶篇之函数化组件解析

    本篇文章主要介绍了Vue学习笔记进阶篇之函数化组件探究，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论