Preface
Tip: thymeleaf is good, but vue is also indispensable:
Maybe after getting used to using vue, most players use scaffolding and vuecli vite to achieve rapid development, but I forgot early on that I can actually use some template engines of springboot to complete the effect of random matching.
1. vue2
1.Introduce static files
You can refer to it first, here we use th to complete the dynamic static resource directory
The following is introduced:
-
assets/jsIn the directory: vue, vue-i18n, vue-router -
assets/plugins/elemetIn the directory: -
assets/staticIn the directory: that is, we wrote it ourselves,
You can first introduce and to complete the simplest component reference function
<!-- ================== BEGIN vue-js ================== -->
<script th:src="|${RES}/js/|"></script>
<script th:src="|${RES}/js/|"></script>
<script th:src="|${RES}/js/|"></script>
<script th:src="|${RES}/plugins/element/|"></script>
<script th:src="|${RES}/plugins/element/locale/|"></script>
<script th:src="|${RES}/plugins/element/locale/|"></script>
<script th:src="|${RES}/static/|"></script>
<script th:src="|${RES}/static/|"></script>
<script th:src="|${RES}/static/|"></script>
<!-- ================== END vue-js ================== -->
Style introduction:
<link th:href="|${RES}/plugins/element/|" rel="external nofollow" rel="stylesheet" />The first line is actually equivalent to
<script src="/assets/js/"></script>
Pay attention to the introduction order, be at the forefront
2. Declare components
We now want to declare a VueHeader component and use it in it, so how to do it?
1. Create a folder, and the th:fragment tag is used here.
For ustemplateSet up aid (vue-header),Then<script> templatebind inside, this is almost the same as the .vue file
<!DOCTYPE html>
<html xmlns:th="">
<div th:fragment="header">
<template >
<div class="app-header app-header-inverse">
Header
</div>
</template>
<script>
const VueHeader = {
template: '#vue-header',
components: {
DtEditor,
},
data() {
return {
activeLang: ''
}
},
created() {},
methods: {
// Switch language changeLang() {
(`Language Switching: ${}`)
=
},
}
}
</script>
</div>
</html>
2. Then add the following code in
Assuming that I am in the pages directory, then write it as follows. The order of introduction is no longer important, and it can also be placed before introduction.
<template th:replace="|/pages/header|::header"></template>
<!-- ================== BEGIN vue-js ================== -->
<script th:src="|${RES}/js/|"></script>
...
3. Then introduce components in
The root instance of vueApp is bound tomiddleidforappElements
// Global method, you can register here(
(_vue, _opts) => {
_vue.prototype.$test = () => {
('test')
}
}
)
const vueApp = new Vue({
el: '#app',
i18n,
router,
components: {
VueHeader
},
data() {
return {
activeLang: '', // data
}
},
methods: {}
})
4. Last use
Because you just introduced the component in the root instance of vueApp, just load the app div
<!-- BEGIN #app -->
<div >
<!-- BEGIN #header -->
<vue-header></vue-header>
<!-- END #header -->
</div>
2. Grammar matching
Calling th data using vue method
as follows:$t()It is the internationalization method of vue,${}It's the data in th
<div class="menu-text" th:v-text="|$t('${}')|"></div>
Similar click events
<a th:@click="| changeActive('${}') |" href="javascript:;" rel="external nofollow" class="menu-link">
<div class="menu-text" th:v-text="|$t('${}')|"></div>
</a>
<a th:v-on:click="|openEditor(${session?.USER})|" >
{{ $t('xxx') }}
</a>
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.