【쇼로】 Vue + Vuetify로 확인 다이얼로그를 작성해 보았다. 【Vue.js】

Vue 인기가 있습니다.

이전, React + Material-UI로 확인 대화 상자 만들기
모처럼이므로 Vue도 시도해보기로 결정했습니다.
초학자는이 두 가지를 모두 시험해 보면 React/Vue를 부드럽게 마스터 할 수 있습니다.
생각합니다. React도 hooks가 없었다면 위험한 것이 아닐까 생각합니다.



■Vue & Vuetify CommonDialog



CodeSandbox( h tps : // 코데 씨 d 보 x. 이오 )씨로 데모도 준비해 왔습니다.
■DEMO

코드 해설

구성 요소 CommonDialog.vue

<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent max-width="200">
      <v-card justify="center">
        <v-card-title class="headline"></v-card-title>
        <v-row style="width:100%">
          <v-col md="12" align="center">
            <div style="margin-left:15px">{{msg}}</div>
          </v-col>
        </v-row>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" text @click="no()">No</v-btn>
          <v-btn color="green darken-1" text @click="yes()">Yes</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>

  export default {
    props: ['msg','isOpen','doYes','doNo'],
    data () {
      return {
        dialog: false
      }
    },
    watch: {
      isOpen: function (val) {
        this.dialog = val
      }
    },
    methods: {
      yes () {
        this.doYes()
        this.dialog = false
      },
      no () {
        this.doNo()
        this.dialog = false
      }
    }
  }
</script>

구성 요소 배치

:msg ... 메시지

:is-open ... 호출처의 제어 스테이트

:do-yes ... 「확인 Yes」에서의 실행 처리

:do-no ... 「확인 No」로의 클로즈 처리

    <CommonDialog
            :msg="dlg.msg"
            :is-open="dlg.isOpen"
            :do-yes="dlg.doYes"
            :do-no="dlg.doNo"
    />

용법

<template>
  <v-btn text @click="dlg.isOpen=true">do</v-btn>
</template>
<script>
    export default {
        data() {
          return {
            dlg: {
              msg: 'Message',
              isOpen: false,
              doYes: ()=>{
                ...
                this.dlg.isOpen=false
              },
              doNo: ()=>{
                this.dlg.isOpen=false
              }
            }
          }
        }
    }
</script>

소감

React의 컴포넌트와는 정반대의 접근이군요.

Vue는 문턱이 낮고 간단하다고하는 곳부터는이 HTML 베타 쓰기 템플릿의
덕분이라고 생각합니다만, React도 hooks의 등장으로, 거의 난이도는 변하지 않게 되었습니다.

Vue의 특징적인 점은 HTML로 정통 진화 될 수 있습니다.

WEB의 역사를 보면 우선 HTML이 있고 CSS가 나타나 JavaScript가 탄생했습니다.
Vue는 이 3원소를 컴포넌트의 구성 단위로 하고 있는 것입니다.
어디까지나 HTML이 있어, 거기에 이벤트를 추가해 가는 사상입니다.

React가 혁신적인 것은 반대로 그 HTML의 울타리를 개방하기 위해, 뷰를 JSX로 캡슐화했다
HTML로 한 번역입니다. 따라서 뷰의 구성 요소는 JSX이며 HTML이 아닙니다.
그 React 마크의 빙글빙글 하는 놈은 JSX입니다. React는 HTML이 아닙니다.
그렇게 말하면, XML을 HTML로 하는 XSLT라고 하는 것이 있었습니다만, 그 계보일지도 모릅니다.

HTML을 컴포넌트화한다는, 이 극단 당 미래의 사상을 실현하기 위해서
얼마나 많은 시체가 쌓여 있었는지 package.json에 그 역사가 기록되어 있네요.

여기서 각 진화의 열매를 살펴 보겠습니다.
어떤 컴포넌트 A, B, C를 조건에 따라 표시 제어해 봅니다.

Vue

<h2 ...>
    埼玉県人にはそこらへんの草でも食わせておけ
    <A v-if="key === 'A'" />
    <B v-else-if="key === 'B'" />
    <C v-else-if="key === 'C'" />
</h2>

React

const tete = { A:<A/>, B:<B/>, C:<C/> }

<Typography ...>
    Reactか、それ以外か { tete['A'] }
</Typography>