Tkinter 화면을 Vue 화면으로 변환

import tkinter as tk

window = tk.Tk()
window.title("사원관리")

label = tk.Label(
    window,
    text="사원관리 프로그램"
)

label.pack()

window.mainloop()

<template>
  <div>
    <h1>
      사원관리 프로그램
    </h1>
  </div>
</template>

label = tk.Label(
    window,
    text="이름"
)

label.pack()

<template>
  <label>
    이름
  </label>
</template>

<p>
  이름
</p>

entry_name = tk.Entry(window)
entry_name.pack()

<input>

name = tk.StringVar()

entry_name = tk.Entry(
    window,
    textvariable=name
)

entry_name.pack()

<script setup>
import { ref } from 'vue'

const name = ref('')
</script>

<template>
  <input v-model="name">
</template>

name = entry_name.get()
print(name)

print(name.get())

console.log(name.value)

def save():
    print("저장")


button = tk.Button(
    window,
    text="저장",
    command=save
)

button.pack()

<script setup>
function save() {
  console.log('저장')
}
</script>

<template>
  <button @click="save">
    저장
  </button>
</template>

import tkinter as tk
from tkinter import messagebox

window = tk.Tk()
window.title("사원등록")

tk.Label(
    window,
    text="이름"
).pack()

entry_name = tk.Entry(window)
entry_name.pack()


def save():
    name = entry_name.get()

    messagebox.showinfo(
        "확인",
        name
    )


tk.Button(
    window,
    text="등록",
    command=save
).pack()

window.mainloop()

<script setup>
import { ref } from 'vue'

const name = ref('')

function save() {
  alert(name.value)
}
</script>

<template>
  <div>

    <label>
      이름
    </label>

    <input v-model="name">

    <button @click="save">
      등록
    </button>

  </div>
</template>

import tkinter as tk

window = tk.Tk()

tk.Label(
    window,
    text="이름"
).pack()

entry_name = tk.Entry(window)
entry_name.pack()

tk.Label(
    window,
    text="전화번호"
).pack()

entry_phone = tk.Entry(window)
entry_phone.pack()

tk.Label(
    window,
    text="부서"
).pack()

entry_department = tk.Entry(window)
entry_department.pack()

window.mainloop()

<script setup>
import { reactive } from 'vue'

const employee = reactive({
  name: '',
  phone: '',
  department: ''
})
</script>

<template>
  <div>

    <p>
      이름 :
      <input
        v-model="employee.name"
      >
    </p>

    <p>
      전화번호 :
      <input
        v-model="employee.phone"
      >
    </p>

    <p>
      부서 :
      <input
        v-model="employee.department"
      >
    </p>

  </div>
</template>

from tkinter import ttk

department = tk.StringVar()

combo = ttk.Combobox(
    window,
    textvariable=department
)

combo["values"] = (
    "개발팀",
    "영업팀",
    "관리팀"
)

combo.pack()

<select
  v-model="employee.department"
>

  <option value="개발팀">
    개발팀
  </option>

  <option value="영업팀">
    영업팀
  </option>

  <option value="관리팀">
    관리팀
  </option>

</select>

text_memo = tk.Text(
    window,
    width=40,
    height=10
)

text_memo.pack()

<textarea
  v-model="employee.memo"
>
</textarea>

const employee = reactive({
  name: '',
  phone: '',
  department: '',
  memo: ''
})

agree = tk.BooleanVar()

check = tk.Checkbutton(
    window,
    text="동의합니다.",
    variable=agree
)

check.pack()

<input
  type="checkbox"
  v-model="agree"
>

동의합니다.

const agree = ref(false)

gender = tk.StringVar()

tk.Radiobutton(
    window,
    text="남",
    variable=gender,
    value="남"
).pack()

tk.Radiobutton(
    window,
    text="여",
    variable=gender,
    value="여"
).pack()

<input
  type="radio"
  value="남"
  v-model="gender"
>
남

<input
  type="radio"
  value="여"
  v-model="gender"
>
여

const gender = ref('')

from tkinter import ttk

tree = ttk.Treeview(
    window,
    columns=(
        "id",
        "name",
        "department"
    ),
    show="headings"
)

tree.heading(
    "id",
    text="번호"
)

tree.heading(
    "name",
    text="이름"
)

tree.heading(
    "department",
    text="부서"
)

tree.pack()

tree.insert(
    "",
    "end",
    values=(
        1,
        "홍길동",
        "개발팀"
    )
)

<script setup>
import { ref } from 'vue'

const employees = ref([
  {
    id: 1,
    name: '홍길동',
    department: '개발팀'
  },
  {
    id: 2,
    name: '김철수',
    department: '영업팀'
  }
])
</script>

<template>

  <table border="1">

    <thead>
      <tr>
        <th>번호</th>
        <th>이름</th>
        <th>부서</th>
      </tr>
    </thead>

    <tbody>

      <tr
        v-for="emp in employees"
        :key="emp.id"
      >

        <td>
          {{ emp.id }}
        </td>

        <td>
          {{ emp.name }}
        </td>

        <td>
          {{ emp.department }}
        </td>

      </tr>

    </tbody>

  </table>

</template>

tree.insert(
    "",
    "end",
    values=(
        3,
        "이영희",
        "관리팀"
    )
)

employees.value.push({
  id: 3,
  name: '이영희',
  department: '관리팀'
})

selected = tree.selection()

tree.delete(
    selected[0]
)

function removeEmployee(id) {

  employees.value =
    employees.value.filter(
      emp => emp.id !== id
    )

}

<button
  @click="
    removeEmployee(emp.id)
  "
>
  삭제
</button>

<script setup>
import EmployeeForm
  from './components/EmployeeForm.vue'

import EmployeeList
  from './components/EmployeeList.vue'
</script>

<template>
  <EmployeeForm />
  <EmployeeList />
</template>

from tkinter import messagebox

messagebox.showinfo(
    "확인",
    "저장되었습니다."
)

alert(
  '저장되었습니다.'
)

result = messagebox.askyesno(
    "확인",
    "삭제하시겠습니까?"
)

const result = confirm(
  '삭제하시겠습니까?'
)

import tkinter as tk
from tkinter import ttk
from tkinter import messagebox

window = tk.Tk()

window.title(
    "사원관리 프로그램"
)


tk.Label(
    window,
    text="이름"
).grid(
    row=0,
    column=0
)

entry_name = tk.Entry(window)

entry_name.grid(
    row=0,
    column=1
)


tk.Label(
    window,
    text="전화번호"
).grid(
    row=1,
    column=0
)

entry_phone = tk.Entry(window)

entry_phone.grid(
    row=1,
    column=1
)


tk.Label(
    window,
    text="부서"
).grid(
    row=2,
    column=0
)

combo_department = ttk.Combobox(
    window,
    values=(
        "개발팀",
        "영업팀",
        "관리팀"
    )
)

combo_department.grid(
    row=2,
    column=1
)


def save():

    name = entry_name.get()
    phone = entry_phone.get()

    department = (
        combo_department.get()
    )

    print(
        name,
        phone,
        department
    )

    messagebox.showinfo(
        "확인",
        "등록되었습니다."
    )


tk.Button(
    window,
    text="등록",
    command=save
).grid(
    row=3,
    column=0,
    columnspan=2
)


window.mainloop()

<script setup>
import { reactive } from 'vue'


const employee = reactive({
  name: '',
  phone: '',
  department: '개발팀'
})


function save() {

  console.log(
    employee.name,
    employee.phone,
    employee.department
  )

  alert(
    '등록되었습니다.'
  )

}
</script>


<template>

  <div>

    <h2>
      사원등록
    </h2>

    <p>
      이름 :

      <input
        v-model="employee.name"
      >
    </p>

    <p>
      전화번호 :

      <input
        v-model="employee.phone"
      >
    </p>

    <p>
      부서 :

      <select
        v-model="employee.department"
      >

        <option value="개발팀">
          개발팀
        </option>

        <option value="영업팀">
          영업팀
        </option>

        <option value="관리팀">
          관리팀
        </option>

      </select>

    </p>

    <button @click="save">
      등록
    </button>

  </div>

</template>

pack()
grid()
place()

button.place(
    x=100,
    y=200
)

<template>
  <div class="form">

    <input>

    <button>
      등록
    </button>

  </div>
</template>

<style scoped>
.form {
  display: flex;
  gap: 10px;
}
</style>

entry_name.get()

entry_name.delete(
    0,
    tk.END
)

tree.insert(...)

tree.delete(...)

employee.name = ''

employees.value.push(
    newEmployee
)