Day66 2024.08.26.월 #코딩일기

** 항상 App.vue에 작성해주기

** App.vue에 작성한 후 백업은 그대로 복사해서 해당 폴더에 입력해주고, 이름만 바꿔주기

** devtools는 beta 버전으로 다운받기!!

https://chromewebstore.google.com/detail/vuejs-devtools-beta/ljjemllljcmogpfapbkkighbhhppjdbg

Vue.js devtools (beta) - Chrome 웹 스토어

 

 

 

folder	01
vue	AppVue3_01.vue

<template>
  <div>
    <button v-on:click="increment">Counter: {{ counter }}</button>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'

export default {
  setup() {
    const counter = ref(0)
    const increment = () => {
      counter.value++
      console.log('counter-> ', counter)
    }

    onMounted(() => {
      console.log('컴포넌트가 마운트 되었음!')
    })

    return {
      counter,
      increment
    }
  }
}
</script>

<style lang="scss" scoped></style>

 - App.vue에서 입력해준다.

 - ref -> 객체

 - const -> 상수

 

 

 

 

 

 

 

 

folder	02
vue	App_compositionApi.vue

<template>
  <div>
    <h2>반응형 메시지</h2>
    <p>{{ reactiveMessage }}</p>
    <button v-on:click="addReactiveMessage">addReactiveMessage</button>

    <h2>일반 메시지</h2>
    <p>{{ simpleMessage }}</p>
    <button v-on:click="addSimpleMessage">addSimpleMessage</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    console.log('setup()')
    const reactiveMessage = ref('안녕 reactiveMessage')
    const addReactiveMessage = () => {
      reactiveMessage.value = reactiveMessage.value + '!'
    }

    let simpleMessage = '안녕 simpleMessage'
    const addSimpleMessage = () => {
      simpleMessage = simpleMessage + '!'
    }
    return {
      reactiveMessage,
      simpleMessage,
      addReactiveMessage,
      addSimpleMessage
    }
  }
}
</script>

<style lang="scss" scoped></style>

 

 - App.vue 파일을 복사 붙혀넣기 해서, 02폴더에 넣어준 후 이름을 바꿔서 저장해준다.

 

 - 반응형 message는 ref로 선언, 

   일반형은 let으로 선언 

 

 

 

folder	02
vue	App_reactive.vue

<template>
  <div>
    <button v-on:click="increment">Click {{ state.count }}</button>
    <button v-on:click="incrementDeep">Deep Click {{ state.deep.count }}</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      deep: {
        count: 0
      }
    })

    const increment = () => {
      state.count++
      state.deep.count++
    }

    const incrementDeep = () => {
      state.deep.count++
    }

    return {
      state,
      increment,
      incrementDeep
    }
  }
}
</script>

<style lang="scss" scoped></style>

 -  reactive 함수는 객체 타입만 동작 (number, string, boolean) -> 이럴 때에는 ref로 사용하면 된다.

 

 

 

 

folder	02
vue	App_readOnly.vue

<template>
  <div></div>
</template>

<script>
import { reactive, readonly } from 'vue'

export default {
  setup() {
    const original = reactive({
      count: 0
    })

    const copy = readonly(original)
    original.count++
    // copy.count++

    console.log('original->' + original.count)
    console.log('copy->' + copy.count)

    return {}
  }
}
</script>

<style lang="scss" scoped></style>

 - 연필 표시가 나오면, 값을 마음대로 바꿔줄 수 있다.

 

 

 

 

 

 

folder	02
vue	App_copy.vue

<template>
  <div>
    <p>
      {{ counter }}
    </p>
    <p>
      {{ message }}
    </p>
    <button @click="increment">click!</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const counter = ref(0)
    const increment = () => {
      counter.value++
    }

    const message = ref('Hello Vue3')

    return {
      counter,
      message,
      increment
    }
  }
}
</script>

<style lang="scss" scoped></style>

 

 

 

 

 

 

folder	02
vue	App_tempSyntax

<template>
  <div>
    <h2>보간법</h2>
    <p>{{ message }}</p>
    <p v-once>{{ message }}</p>
    <button v-on:click="message = message + '!'">Click!</button>
    <hr />

    <h2>HTML</h2>
    <p>{{ rawHtml }}</p>
    <p v-html="rawHtml"></p>
    <hr />

    <h2>속성 바인딩</h2>
    <div :title="dynamicTitle">마우스를 올려보세요</div>
    <input type="text" value="홍길동" :disabled="isInputDisabled" />
    <input v-bind="attrs" />
    <hr />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('안녕하세요!')
    const rawHtml = ref('<h1>안녕하세요</h1>')
    const dynamicTitle = ref('안녕하세요!@@@@@!!!')
    const isInputDisabled = ref(true)
    const attrs = ref({
      type: 'text',
      value: 'abc',
      disabled: true
    })

    return {
      message,
      rawHtml,
      dynamicTitle,
      isInputDisabled,
      attrs
    }
  }
}
</script>

<style lang="scss" scoped></style>

View 단

 - {{ }} 이걸 보간법이라고 부른다.

 - v-once -> 변화를 주고 싶지 않을 때!

 - 여기서 v-on:click에 짧으면 로직을 직접 입력해주어도 되고, 아래 export default set up에 함수를 정의해주어도 된다.

 

 - v-html 속성 -> 아래 setup에 정의해둔 ref 안의 html 태그 먹게 해주기 위함!

 - disabled를 true로 해두거나 false로 해두냐에 따라서 값을 고칠 수 있는지 없는지 알 수 있다.

 - 한꺼번에 bindingㅎ ㅏ는 방법 (객체단위로 연결시키는 것)