2024_06_24_월

오늘의 코딩순서

• App.Vue

(01 폴더)

• AppVue2_01
• AppVue3_01

(02 폴더)

• App_setup

---

오늘의 코딩 포인트

• App.Vue

<template>
  <div>
    <button v-on:click="increment">Counter: {{ counter }}</button>
    <!-- v-on: event -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++
    }
  },
  mounted() {
    console.log('컴포넌트가 마운트 되었습니다')
  }
}
</script>
<style lang="scss" scoped></style>

↳ 콘솔창에 npm run dev 작성하고 엔터 >> 나오는 주소 ctrl 누른채로 클릭하면 아래 창이 나옴

---

(01 폴더)

 

• AppVue2_01

<template>
  <div>
    <button v-on:click="increment">Counter: {{ counter }}</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++
    }
  },
  mounted() {
    console.log('컴포넌트가 마운트 되었습니다')
  }
}
</script>
<style lang="scss" scoped></style>

• AppVue3_01

<template>
  <div>
    <button v-on:click="increment">Counter Vue3 : {{ counter }}</button>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
  setup() {
    const counter = ref(0)
    const increment = () => counter.value++
    onMounted(() => {
      console.log('컴포넌트가 마운트 되었음')
    })
    return {
      counter,
      increment
    }
  }
}
</script>
<style lang="scss" scoped></style>

---

(02 폴더)

 

• App_setup

<template>
  <div>
    <p>book.author: {{ book.author }}</p>
    <p>book.title: {{ book.title }}</p>
    <p>author: {{ author }}</p>
    <p>title: {{ title }}</p>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    const book = reactive({
      author: 'Vue3',
      year: '2024',
      title: 'Vue3 기본',
      description: '당신은 이 책을 읽습니다 ;)',
      price: '22000'
    })
    return {
      book
    }
  }
}
</script>
<style lang="scss" scoped></style>  <!-- 화면 디자인 -->

---

Vue 수업교재

01. Vue 설치

• Vue 개념⭐⭐⭐⭐⭐===> 면접에서 정의 질문
• SPA: 하나의 페이지로 애플리케이션을 만듬

 

02. Vue 개념