[컴] 일반적인 html 과 함께 vuejs 사용하기

 vuejs 와 jsp / jinja 와 vuejs / vue /

일반적인 html 과 함께 vuejs 사용하기

<html lang="ko">
<head>
</head>
<body>


<div id="app">
    <boiler-graph period="2016" subtitle="Problem Year"></boiler-graph>
    <boiler-graph period="2019"></boiler-graph>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<script type="text/x-template" id="BoilerGraph">
  <div class="BoilerGraph">your BoilerGraph template at here!</div>
</script>

<script>
    Vue.component('BoilerGraph', {
        template: '#BoilerGraph',
        props: {
            period: {
                type: String,
                default: "0"
            },
            subtitle: {
                type: String,
                default: ""
            },
        } // Your other props need to pass
    });

    new Vue({
        el: '#app',
    })
</script>



</body></html>

See Also

  1. vue.js - How to use x-template to separate out template from Vue Component - Stack Overflow
  2. How to integrate Vue components in normal HTML or JSP file - TechInPlanet

댓글 없음:

댓글 쓰기