在JSP中使用vue.js

大螳螂q

已于 2023-09-01 16:51:02 修改

阅读量1.6k

点赞数

文章标签： java html vue.js jsp

于 2023-09-01 16:50:14 首次发布

本文链接：https://blog.csdn.net/qq_24902851/article/details/132626968

版权

vue用起来很方便，在jsp中也是可以使用vue的。

如果要写一个组件，需要新建一个js文件，然后再需要用到的地方引用。

比如新定义一个legendMap.js组件

Vue.component('legend-map', {
    template: `
<div style="position: relative;width:100%;height:100%;">

</div>
    `,
    props: {
        
    },
    data() {
        return {
            
        }
    },
    mounted() {
        
    },
    computed: {
        
    },
    methods: {
       

    }
})

然后在jsp页面引入vue.js和组件文件

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <script src="/js/vue.js"></script>
    <script src="/common/legendMap.js"></script>
    <style>

        html,body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

    </style>
</head>
<body>
<div id="div1" style="width:100%;height:100%">
    <div style="width:100%;height:100%">
        <legend-map ></legend-map>
    </div>
</div>
</body>
<script>
    const mapTest2Vue = new Vue({
        el: 'div1',
        data() {
            return {
                
            }
        }
    })
</script>
</html>