단일 페이지 vue js 컴포넌트의 UML 클래스 다이어그램을 작성하려면 어떻게 해야 합니까?

단일 페이지 vue js 컴포넌트의 UML 클래스 다이어그램을 작성하려면 어떻게 해야 합니까?

자바 클래스는 UML 클래스 다이어그램을 사용했는데, 이번에는 단일 파일 컴포넌트를 사용하는 웹 어플리케이션을 개발 중입니다.

이 Vue js 컴포넌트의 클래스 다이어그램을 입수하는 방법을 묻고 있습니다.시계와 계산은 어떻습니까?

var vm = new Vue({
  el: '#demo',
  data: {
    message: "xy",
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    }
  },
   computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<p> {{ fullName }}</p>
<p>message: {{ reversedMessage }}</p>
</div>

언급URL : https://stackoverflow.com/questions/56757879/how-can-we-build-a-uml-class-diagram-for-single-page-vue-js-component