컴포넌트

<template>
  <h2>
    안녕하세요. Vue 컴포넌트입니다.
  </h2>
</template>

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

<template>
  <h1>Vue 프로그램</h1>

  <Hello />
</template>

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

const count = ref(0)

function increase() {
  count.value++
}
</script>

<template>
  <h2>카운터</h2>

  <p>
    현재 값 : {{ count }}
  </p>

  <button @click="increase">
    증가
  </button>
</template>

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

<template>
  <h1>메인 화면</h1>

  <Counter />
</template>

<template>
  <h1>카운터 프로그램</h1>

  <Counter />
  <Counter />
  <Counter />
</template>

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

const employeeName = '홍길동'
</script>

<template>
  <EmployeeInfo
    :name="employeeName"
  />
</template>

<script setup>
const props = defineProps({
  name: String
})
</script>

<template>
  <h2>사원정보</h2>

  <p>
    이름 : {{ props.name }}
  </p>
</template>

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

const employee = {
  name: '홍길동',
  phone: '010-1111-2222',
  department: '개발팀'
}
</script>

<template>
  <EmployeeInfo
    :name="employee.name"
    :phone="employee.phone"
    :department="employee.department"
  />
</template>

<script setup>
const props = defineProps({
  name: String,
  phone: String,
  department: String
})
</script>

<template>
  <h2>사원정보</h2>

  <p>이름 : {{ props.name }}</p>

  <p>
    전화번호 : {{ props.phone }}
  </p>

  <p>
    부서 : {{ props.department }}
  </p>
</template>

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

const employee = {
  id: 1,
  name: '홍길동',
  phone: '010-1111-2222',
  department: '개발팀'
}
</script>

<template>
  <EmployeeInfo
    :employee="employee"
  />
</template>

<script setup>
const props = defineProps({
  employee: Object
})
</script>

<template>
  <h2>사원정보</h2>

  <p>
    번호 : {{ props.employee.id }}
  </p>

  <p>
    이름 : {{ props.employee.name }}
  </p>

  <p>
    전화번호 :
    {{ props.employee.phone }}
  </p>

  <p>
    부서 :
    {{ props.employee.department }}
  </p>
</template>

<script setup>
const props = defineProps({
  name: String
})

const emit = defineEmits([
  'remove'
])

function removeEmployee() {
  emit('remove')
}
</script>

<template>
  <p>
    {{ props.name }}

    <button @click="removeEmployee">
      삭제
    </button>
  </p>
</template>

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

function remove() {
  alert('사원을 삭제합니다.')
}
</script>

<template>
  <EmployeeItem
    name="홍길동"
    @remove="remove"
  />
</template>

<script setup>
const props = defineProps({
  id: Number,
  name: String
})

const emit = defineEmits([
  'remove'
])

function removeEmployee() {
  emit(
    'remove',
    props.id
  )
}
</script>

<template>
  <p>
    {{ props.id }}.
    {{ props.name }}

    <button @click="removeEmployee">
      삭제
    </button>
  </p>
</template>

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

function remove(id) {
  alert(
    id + '번 사원을 삭제합니다.'
  )
}
</script>

<template>
  <EmployeeItem
    :id="1"
    name="홍길동"
    @remove="remove"
  />
</template>

<script setup>
import { ref } from 'vue'
import EmployeeList from './components/EmployeeList.vue'

const employees = ref([
  {
    id: 1,
    name: '홍길동',
    department: '개발팀'
  },
  {
    id: 2,
    name: '김철수',
    department: '영업팀'
  },
  {
    id: 3,
    name: '이영희',
    department: '관리팀'
  }
])

function removeEmployee(id) {
  employees.value =
    employees.value.filter(
      emp => emp.id !== id
    )
}
</script>

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

  <EmployeeList
    :employees="employees"
    @remove="removeEmployee"
  />
</template>

<script setup>
const props = defineProps({
  employees: Array
})

const emit = defineEmits([
  'remove'
])

function removeEmployee(id) {
  emit('remove', id)
}
</script>

<template>
  <h2>사원목록</h2>

  <p>
    전체 사원 :
    {{ props.employees.length }}명
  </p>

  <table border="1">
    <thead>
      <tr>
        <th>번호</th>
        <th>이름</th>
        <th>부서</th>
        <th>관리</th>
      </tr>
    </thead>

    <tbody>
      <tr
        v-for="emp in props.employees"
        :key="emp.id"
      >
        <td>{{ emp.id }}</td>
        <td>{{ emp.name }}</td>
        <td>{{ emp.department }}</td>

        <td>
          <button
            @click="removeEmployee(emp.id)"
          >
            삭제
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

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

const name = ref('')
const department = ref('개발팀')

const emit = defineEmits([
  'add'
])

function addEmployee() {
  if (name.value === '') {
    alert('이름을 입력하세요.')
    return
  }

  emit('add', {
    name: name.value,
    department: department.value
  })

  name.value = ''
  department.value = '개발팀'
}
</script>

<template>
  <h2>사원 등록</h2>

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

  <p>
    부서 :
    <select
      v-model="department"
    >
      <option>개발팀</option>
      <option>영업팀</option>
      <option>관리팀</option>
    </select>
  </p>

  <button @click="addEmployee">
    등록
  </button>
</template>

<script setup>
import { ref } from 'vue'
import EmployeeForm from './components/EmployeeForm.vue'
import EmployeeList from './components/EmployeeList.vue'

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

let nextId = 3

function addEmployee(employee) {
  employees.value.push({
    id: nextId++,
    name: employee.name,
    department: employee.department
  })
}

function removeEmployee(id) {
  employees.value =
    employees.value.filter(
      emp => emp.id !== id
    )
}
</script>

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

  <EmployeeForm
    @add="addEmployee"
  />

  <hr>

  <EmployeeList
    :employees="employees"
    @remove="removeEmployee"
  />
</template>

EmployeeList.vue
ProductDetail.vue
BoardWrite.vue