Vue.js 2

Min·2021년 3월 15일
0

Vue

목록 보기
1/1

Vue.js 2

코지 코더님의 강의를 수강후 정리한 내용입니다.
Vue 공식문서

1. 뷰 인스턴스 생성하기

  • VSCode의 Vetur 익스텐션
  • Script에 CDN 추가하는 방법 사용
<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  {{ name }} // '데이터'
</div>
<script>
  new Vue({
	el: '#app'
    data: {
      name: '데이터'
    }
})
</script>

2. 뷰 데이터(data)와 메소드(methods)

<div id="app">
  {{ nextYear('Hi') }} // 'Hi 철수 10'
</div>
<script>
  new Vue({
	el: '#app'
    data: {
      person: {
        name: '철수',
        age: '10'
      }
    },
    methods: {
      nextYear(greeting) {
        return greeting + this.person.name + this.person.age
      },
      otherMethod() {
        this.nextYear()
      }
    }
})
</script>

3. 데이터 바인딩(Data Binding)

:type='type' === v-bind:type='type'

<div id="app">
  <input :type='type' :value='inputData'>
  <a :href='link('path')'>구글링크</a>  
</div>
<script>
  new Vue({
	el: '#app'
    data: {
      inputData: 'hello',
      type: 'number',
      link: 'https://www.google.com/'
    },
    methods: {
      googleLink(path) {
        return this.link + path
      }
    }
})
</script>

4. 이벤트(Events)

이벤트 : 어떤 사건이 발생했을 때 어떤 것을 할 것인지
@click === v-on:click
form 태그는 submit을 했을 때 페이지를 리로드 한다.
공식문서의 '이벤트 핸들링 -> 참고

<div id="app">
  <form v-on:submit.prevent='submit'>
    <input type='text'><br>
    <button type='submit'>Submit</button>
  </form>
</div>
<script>
  new Vue({
	el: '#app'
    data: {
      
    },
    methods: {
        submit() {
          alert('Submitted!')
          console.log('hello')
        }
    }
})
</script>

5. 데이터 양방향 바인딩(Data Two Way Binding-v-model)

주석 처리된 코드와 같은 역할을 한다.

<div id="app">
  <form v-on:submit.prevent='submit'>
    // <input type='text' :value='text' @keyup='updateText'><br>
    <input type='text' v-model='text'><br>
    {{ text }}<br>
    <button type='submit'>Submit</button>
  </form>
</div>
<script>
  new Vue({
	el: '#app'
    data: {
      text: 'text'
    },
    methods: {
        submit() {
          alert('Submitted!')
          console.log('hello')
        },
        // updateText(event) {
        //   this.text = event.target.value
        // }
    }
})
</script>

6. Computed 속성

{{ 자바스크립트 문법 }}
Computed에서 하나의 로직을 처리하므로 중복제거의 효과가 있다.

methods : 함수 형식으로 사용(캐싱X)
-> 함수를 사용하려고 할때마다 계산

computed : 변수 형식으로 사용(캐싱O)
-> 처음에 한번 계산 후 저장된 값을 사용

아래 코드는 computed(reverseMessage())에서 '헬로우'를 먼저 저장하지만
click 이벤트가 실행되며 changeMessage()에서 '안녕하세요'로 덮어쓴다.

<div id="app">
  <button @click='changeMessage'>클릭</button>
  {{ reverseMessage }} // '요세하녕안'
</div>
<script>
  new Vue({
	el: '#app'
    data: {
      message: '헬로우'
    },
    methods: {
        changeMessage() {
          this.message = '안녕하세요'
        }
    },
    computed: {
      reverseMessage() {
        return this.message.split('').reverse().join('')
      }
    }
})
</script>

7. Watch 속성

Computed 속성을 사용할 수 없을 때 Watch 속성을 사용하는 것이 좋다.
Watch 속성은 newVal와 oldVal를 파라미터로 받는다.

<div id="app">
  {{ message }}
  <button @click='changeMessage'>클릭</button><br>
  {{ updated }}
</div>
<script>
  new Vue({
	el: '#app'
    data: {
      message: '헬로우',
      updated: '아니요'  
    },
    methods: {
        changeMessage() {
          this.message = '안녕하세요'
        }
    },
    computed: {
      reverseMessage() {
        return this.message.split('').reverse().join('')
      }
    },
    watch: {
      message(newVal, oldVal) {
        console.log(newVal, oldVal) // 요세하녕안 네
        this.updated = '네'
      }
    }  
})
</script>

8. 클래스 & 스타일 바인딩

  1. 클래스 바인딩
<style>
  .red {
    color: red
  }
  font-bold {
    font-weight: bold
  }
</style>

<div id="app">
  <div :class='{ red: isRed, 'font-bold': isBold}'>헬로우</div>
  <button @click='update'>클릭</button>
</div>
<script>
  new Vue({
	el: '#app'
    data: {
      isRed: false,
      isBold: false  
    },
    methods: {
        update() {
          this.isRed = !this.isRed
          this.isBold = !this.isBold
        }
    }
})
</script>
profile
slowly but surely

10개의 댓글

comment-user-thumbnail
2025년 2월 5일

https://treba-mebli.com.ua/ru/matrasy_rus/matrasy-ortopedicheskie
https://treba-mebli.com.ua/ru/modulna-stinka-dlya-vitalni-gerbor-selin-nimfeya-alba-bilij-glyanets-grb-1924-ru
https://treba-mebli.com.ua/ru/tumba-pod-televizor-everest-nordik-tv-1500-belyj-dub-kraft-zolotoj-evr-5541-ru
https://treba-mebli.com.ua/ru/Ofisnaya_mebel_rus/tumba_ofisnaya_ru
https://treba-mebli.com.ua/ru/shkaf-penal-zakrytyj-everest-briz-15-venge-dub-molochnyj-evr-2267-ru
https://treba-mebli.com.ua/ru/stenka-everest-briz-penal-15-uglovoj-shkaf-shku-14-penal-18-sonoma-tryufel-evr-2244-ru
https://treba-mebli.com.ua/ru/shkaf-kupe-doros-siti-24-venge-3-dsp-208h60h240-42001002-ru
https://treba-mebli.com.ua/ru/tumba-pid-televizor-gerbor-kristina-rtv2s-120-bilij-bilij-glyanets-grb-1967-ru
https://treba-mebli.com.ua/ru/krovati_ru/odnospalnaya-krovat-s-yaschikami-everest-sonata-800-dub-sonoma-belyj-evr-2109-ru
https://treba-mebli.com.ua/ru/Garnitury_v_gostinuyu_rus
https://treba-mebli.com.ua/ru/komod-everest-na-8-yaschikov-miks-5-roliki-sonoma-belyj-evr-2055-ru
https://treba-mebli.com.ua/shkaf-trehdvernyj-everest-shl-3-lajt-dub-sonoma-evr-4677-ru-uk
https://treba-mebli.com.ua/detskaya-stenka-everest-sonata-komplekt-4-modulnaya-5-elementov-venge-temnyj-belyj-evr-2584-ru-uk
https://treba-mebli.com.ua/blog-ua/mebli-dlya-ditej-ta-pidlitkiv-komfort-bezpeka-stil
https://treba-mebli.com.ua/ru/kuhnya-modulna-everest-eko-nabor-6-yasen-shimo-temnyj-shimo-svetlyj-2-3-m-evr-2936-ru
https://treba-mebli.com.ua/matrasy_ukr/matraci-ortopedichni
https://treba-mebli.com.ua/kutovi-divani-ua
https://treba-mebli.com.ua/ru/krovat-gorka-cherdak-so-shkafom-i-stolom-everest-sonoma-tryufel-evr-2101-ru
https://treba-mebli.com.ua/ru/jurnalnii_stol_rus/stol-gurnalnyj-everest-sonata-sg-910-dlya-gostinoj-dub-kraft-belyj-evr-2709-ru
https://treba-mebli.com.ua/ru/blog-ru/shkaf-osnovnye-kriterii-vybora
https://treba-mebli.com.ua/ru/komodi-ta-tumbi_rus/komodi_rus/komod-everest-na-4-yaschika-briz-k-5-teleskopicheskie-70h38h72-5-venge-dub-molochnyj-evr-2490-ru
https://treba-mebli.com.ua/ru/komod-dlya-veschej-everest-na-5-yaschikov-sonata-3-dub-sonoma-belyj-evr-2031-ru
https://treba-mebli.com.ua/komodi-ta-tumbi_ukr/Pufy_ukr
https://treba-mebli.com.ua/ru/Kollektsii_rus/Kollektsiya_Briz_rus
https://treba-mebli.com.ua/ru/matrasy_rus/matras-highfoam-bluemarine-balena-160h200-sm-evr-5391-ru
https://treba-mebli.com.ua/ru/Ofisnaya_mebel_rus/tumba_ofisnaya_ru/tumba-doros-t3-dub-evok-belyj-dsp-43h42h66-4-41901068-ru
https://treba-mebli.com.ua/ru/blog-ru/stilnye-televizionnye-tumby-dlja-vashej-gostinoj
https://treba-mebli.com.ua/ru/Tumby_prikrovatnyye_rus
https://treba-mebli.com.ua/ru/blog-ru/vybiraem-mebel-v-malenkuju-komnatu
https://treba-mebli.com.ua/ru/shafa-kupe-dvodverna-z-dzerkalom-gerbor-mario-180-dub-sonoma-grb-1880-ru
https://treba-mebli.com.ua/ru/Shkafy_i_penaly_rus/Shkafy_kupe_rus/shafa-kupe-trohdverna-z-dzerkalom-gerbor-mario-220-dub-sonoma-grb-1882-ru
https://treba-mebli.com.ua/ru/krovati_ru/odnospalnaya-krovat-s-yaschikami-everest-sonata-800-venge-temnyj-belyj-evr-2108-ru
https://treba-mebli.com.ua/ru/divan_andro_rus/prjamye-divany-ru
https://treba-mebli.com.ua/ru/shafa-rozpashna-s-polkami-doros-promo-90h48h204-sm-belyj-drs-011201-ru
https://treba-mebli.com.ua/ru/odnospalnaya-krovat-everest-sonata-900-venge-temnyj-dub-kraft-zolotoj-evr-2112-ru
https://treba-mebli.com.ua/ru/shkaf-penal-uglovoj-everest-briz-18-venge-dub-molochnyj-evr-2287-ru
https://treba-mebli.com.ua/ru/shkaf-penal-zakrytyj-everest-sonata-dub-sonoma-belyj-evr-2275-ru
https://treba-mebli.com.ua/ru/tumba-dlya-obuvi-everest-nordik-800-80h32h113-sm-belyj-dub-kraft-zolotoj-evr-5547-ru
https://treba-mebli.com.ua/ru/matras-highfoam-largo-lite-90h200-sm-evr-5014-ru
https://treba-mebli.com.ua/ru/mini-divan-andro-ismart-teal-148h105-sm-biryuzovij-148ut-ru
https://treba-mebli.com.ua/ru/komplekt-modulnij-v-spalnyu-gerbor-shantal-n100021-dub-sanremo-svitlij-grb-1236-ru
https://treba-mebli.com.ua/ru/blog-ru/kak-vybrat-idealnyj-tualetnyj-stolik
https://treba-mebli.com.ua/ru/tryumo-1-komplekt-dlya-spalni-3-elementa-everest-venge-dub-molochnyj-evr-2459-ru
https://treba-mebli.com.ua/ru/shkaf-kupe-everest-sonata-1800-dvuhdvernyj-180h60h217-dub-sonoma-belyj-evr-2398-ru
https://treba-mebli.com.ua/ru/shkaf-kupe-everest-sonata-1400-dvuhdvernyj-140h60h217-venge-temnyj-dub-kraft-zolotoj-evr-2396-ru
https://treba-mebli.com.ua/uglovye-divany-ru
https://treba-mebli.com.ua/ru/Ofisnaya_mebel_rus/tumba-ofisnaya-otkrytaya-everest-sonata-venge-temnyj-belyj-evr-2072-ru
https://treba-mebli.com.ua/ru/krovati_ru/krovati_dvuhyarus_rus?srsltid=AfmBOoppQWzIzZTetTav6lnKR1Lu8IYdmnghnMnziXzISd_9De4o10L8
https://treba-mebli.com.ua/ru/Garnitury_v_spalnyu_rus
https://treba-mebli.com.ua/ru/garnitury_komplekty_rus
https://treba-mebli.com.ua/ru/tumba-prikrovatnaya-everest-liberti-dub-kraft-zolotoj-evr-2073-ru
https://treba-mebli.com.ua/ru/polka-navesnaya-everest-pln-1-lajt-dub-sonoma-evr-4665-ru
https://treba-mebli.com.ua/ru/stol-kompyuternyj-s-nadstavkoj-everest-lira-venge-dub-molochnyj-evr-2171-ru
https://treba-mebli.com.ua/ru/Ofisnaya_mebel_rus
https://treba-mebli.com.ua/kuhni_ukr/furnitura-1
https://treba-mebli.com.ua/ru/shafa-rozpashna-z-yaschikami-vmk-brv-kristina-szf2d2s-bilij-bilij-glyanets-grb-1796-ru
https://treba-mebli.com.ua/ru/modulna-stinka-dlya-vitalni-vmk-brv-arktika-nimfeya-alba-bilij-glyanets-grb-1897-ru
https://treba-mebli.com.ua/ru/komodi-ta-tumbi_rus/pufy_rus/myagkij-puf-andro-ismart-solar03-60h80h47-begevyj-60sbg-ru
https://treba-mebli.com.ua/ru/tumba-ofisna-z-dvertsyatami-gerbor-ofis-lajn-reg-2d-114-dub-sonoma-grb-1460-ru
https://treba-mebli.com.ua/ru/ofisnaya_mebel_rus/tumba-ofisnaya-otkrytaya-everest-sonata-dub-sonoma-belyj-evr-2070-ru
https://treba-mebli.com.ua/ru/stilnye-televizionnye-tumby-dlja-vashej-gostinoj
https://treba-mebli.com.ua/ru/krovati_ru/krovati_LDSP_rus/dvuspalnaya-krovat-everest-astoriya-s-dvumya-yaschikami-160h200-sm-sonoma-tryufel-evr-2489-ru
https://treba-mebli.com.ua/ru/stol-pismennyj-s-nadstrojkoj-everest-sonata-dub-sonoma-belyj-evr-2626-ru
https://treba-mebli.com.ua/ru/tumba-prikrovatnaya-everest-t-1-venge-dub-molochnyj-evr-2078-ru
https://treba-mebli.com.ua/ru/divan_andro_rus/detskie-divany-ru/mini-divan-andro-ismart-cool-grey-166h105-sm-sirij-166pcg-ru

답글 달기
comment-user-thumbnail
2025년 2월 28일

https://mzone.com.ua/vitalnya/komodi-1
https://mzone.com.ua/mebli-v-spalnyu
https://mzone.com.ua/dityacha/komodi-dlya-dityachoyi
https://mzone.com.ua/nabir-mebliv-u-vitalnyu-kentuki-n77795-bilij-alpijskij-vmk-brv-ukrajina
https://mzone.com.ua/vitalnya/divani/mini-divani-u-vitalnyu
https://mzone.com.ua/vitalnya/tumbi-pid-televizor
https://mzone.com.ua/mebli-v-spalnyu/matraci-ortopedichni/bezpruzhinni
https://mzone.com.ua/rozprodazh
https://mzone.com.ua/velikij-komod-everest-z-dvercyatami-ta-yashikom-sonata-7-140h38h94-dub-kraft-bilij-evr-2705
https://mzone.com.ua/ru/prihozhaya/obuvnye-tumby-v-prihozhuyu/s-sidenem-1
https://mzone.com.ua/vitalnya/krisla-rozkladni
https://mzone.com.ua/mebli-v-spalnyu/shafi-dlya-spalnoyi-kimnati/shafi-kupe
https://mzone.com.ua/ru/prihozhaya/shkafy-dlya-prihozhej
https://mzone.com.ua/dityacha
https://mzone.com.ua/shafka-german-sfk2d912-dub-sterling-vmk-brv-ukrajina
https://mzone.com.ua/vitalnya/shafi-i-penali-u-vitalnyu/shafi-rozpashni-u-vitalnyu
https://mzone.com.ua/peredpokij/shafi-dlya-peredpokoyu/shafi-rozpashni-1
https://mzone.com.ua/ru/prihozhaya/shkafy-dlya-prihozhej/penaly-v-prihozhuyu
https://mzone.com.ua/peredpokij/komplekti-v-peredpokij/malenki
https://mzone.com.ua/vitalnya/divani/divani-v-stili-loft
https://mzone.com.ua/vitalnya/divani/pryami-divani-u-vitalnyu
https://mzone.com.ua/ru/gostinaya/myagkie-pufy-1
https://mzone.com.ua/peredpokij/shafi-dlya-peredpokoyu
https://mzone.com.ua/komod-5-shuhlyad-m-zon-dgeko-300-antratsit-mzn-031018-uk
https://mzone.com.ua/komod-u-vitalnyu-doros-ron-6-120h38h100-sm-grafit-drs-011303-uk
https://mzone.com.ua/shafa-kupe-mario-240-dub-sonoma-gerbor-gerbor-ukrajina
https://mzone.com.ua/peredpokij/shafi-dlya-peredpokoyu/shafi-kupe-v-peredpokij

답글 달기
comment-user-thumbnail
2025년 2월 28일

https://ismart.com.ua/ru/matras-highfoam-noble-platinum-hercules-80h200-sm-evr-5263
https://ismart.com.ua/ru/matras-highfoam-zephyr-lazy-slivki-150h190-sm-evr-5153
https://ismart.com.ua/ru/matras-highfoam-lento-adagio-140h190-sm-evr-5029
https://ismart.com.ua/ru/matrats-ortopedichnij-highfoam-lento-presto-bezpruginnij-80x180-sm-evr-5676-ru
https://ismart.com.ua/ru/matras-highfoam-obeliks-efes-140h200-sm-evr-4958
https://ismart.com.ua/ru/matras-highfoam-keiko-fuji-160h190-sm-evr-5302
https://ismart.com.ua/ru/matras-highfoam-zephyr-lazy-muss-90h200-sm-evr-5441
https://ismart.com.ua/ru/matras-highfoam-largo-super-slim-70h180-sm-evr-5114
https://ismart.com.ua/ru/matras-highfoam-obeliks-lupen-120h190-sm-evr-5087
https://ismart.com.ua/ru/matras-highfoam-noble-aurum-space-140h200-sm-evr-5413
https://ismart.com.ua/ru/matras-highfoam-noble-platinum-comfort-90h200-sm-evr-5339
https://ismart.com.ua/ru/matras-highfoam-noble-argentum-moon-120h200-sm-evr-5427
https://ismart.com.ua/ru/matras-highfoam-lento-adagio-180h200-sm-evr-5034
https://ismart.com.ua/ru/matras-highfoam-zephyr-lazy-muss-90h190-sm-evr-5440
https://ismart.com.ua/ru/matras-highfoam-noble-aurum-space-120h190-sm-evr-5410
https://ismart.com.ua/ru/matras-highfoam-keiko-fuji-120h200-sm-evr-5297?srsltid=AfmBOoqRQuwHh9we7UAcHcDY9xX1SPGaJeOFh0frPeCBw7bzgwGSSgot
https://ismart.com.ua/ru/matras-highfoam-zephyr-lazy-muss-140h190-sm-evr-5444
https://ismart.com.ua/ru/matras-highfoam-zephyr-lazy-muss-80h200-sm-evr-5439
https://ismart.com.ua/ru/matras-highfoam-lento-ritmo-90h200-sm-evr-4929
https://ismart.com.ua/ru/matras-highfoam-obeliks-efes-90h190-sm-evr-4953
https://ismart.com.ua/toper-highfoam-lento-tutti-180x190-sm-evr-5620-uk
https://ismart.com.ua/toper-highfoam-emerald-smart-90h200-sm-evr-5215
https://ismart.com.ua/tonki-na-dyvan
https://ismart.com.ua/ru/matras-highfoam-keiko-yuki-160h190-sm-evr-4971
https://ismart.com.ua/ru/toper-highfoam-lento-tutti-70x190-sm-evr-5612-ru
https://ismart.com.ua/ru/matras-highfoam-zephyr-jelly-120h190-sm-evr-5099
https://ismart.com.ua/ru/kakoi-vybrat-ortopedycheskyi-matras-na-dyvan
https://ismart.com.ua/ru/topper-highfoam-emerald-dream-140h190-sm-evr-5184
https://ismart.com.ua/ru/matras-highfoam-bluemarine-balena-120h190-sm-evr-5386

답글 달기
comment-user-thumbnail
2025년 4월 15일

Curious about your perceived age? Upload your photo and let our advanced AI age detector provide a fascinating estimate. Discover what age our sophisticated face age calculator thinks you look like! https://face-age.org

답글 달기
comment-user-thumbnail
2025년 4월 15일

https://facesymmetry.org Discover your facial symmetry score and embark on a new journey of appreciating the unique harmony of your facial features with our definitive face symmetry test.

답글 달기
comment-user-thumbnail
2025년 4월 15일

Your ultimate fan hub for Discord's new adventure game, The Last Meadow. Find guides, strategies, latest news, community discussions, and exclusive reward information. Join the journey! https://thelastmeadow.org

답글 달기
comment-user-thumbnail
2025년 4월 15일

Get personalized makeup advice and discover what kind of lips do i have with our advanced AI lip shape detector and analyzer. Experience the most accurate lip shape detection online. https://lipshape.org

답글 달기
comment-user-thumbnail
2025년 4월 15일

Finally answer "what is my eye shape?" Get personalized makeup tips and understand your eye characteristics with our advanced Eye Shape AI and precise eye shape analyzer. https://eyeshape.org

답글 달기
comment-user-thumbnail
2025년 4월 15일

JanusPro 7B is a state-of-the-art multimodal AI model that outperforms DALL-E 3 and Stable Diffusion in image generation and understanding tasks. Experience superior performance with GenEval scores of 0.80 compared to DALL-E 3's 0.67. https://janusaipro.com

답글 달기