Vue μΈμŠ€ν„΄μŠ€

vue μΈμŠ€ν„΄μŠ€μ— λŒ€ν•΄μ„œ ν•™μŠ΅ν•©λ‹ˆλ‹€.

단일 파일 μ»΄ν¬λ„ŒνŠΈλ₯Ό ν•™μŠ΅ν•˜κΈ° μ „κΉŒμ§€λŠ” CDN ν˜Ήμ€ JSFIDDLE , CODEPEN둜 μ½”λ“œλ₯Ό μž‘μ„±ν•˜μ—¬ ν¬μŠ€νŒ…ν•©λ‹ˆλ‹€.

VUE CDN : <script src="https://cdn.jsdelivr.net/npm/vue"></script>

πŸ‘‰ μΈμŠ€ν„΄μŠ€ 생성

Vue μΈμŠ€ν„΄μŠ€μ˜ 생성은 Vue앱을 μ‹œμž‘ν•˜κΈ° μœ„ν•΄ ν•„μˆ˜μ μ΄λ©°, μ•±μ˜ μ‹œμž‘μ€ 곧 Vue μΈμŠ€ν„΄μŠ€λ₯Ό λ§Œλ“œλŠ”κ²ƒλΆ€ν„° μ‹œμž‘ν•œλ‹€. κ°„λ‹¨ν•œ ν…œν”Œλ¦Ώ λ Œλ”λ§λΆ€ν„° 데이터 바인딩, μ»΄ν¬λ„ŒνŠΈ λ“± λ§Žμ€ λ™μž‘μ„ ν•œλ‹€. Vue μΈμŠ€ν„΄μŠ€λ₯Ό 생성할 λ•Œ, μ—¬λŸ¬ μ˜΅μ…˜λ“€μ„ 담은 객체λ₯Ό μ „λ‹¬ν•΄μ•Όν•œλ‹€. (ex. element , data , lifecycle)

<!--html-->
<div id="app">
  {{ message }}
</div>
//JS
const app = new Vue({
  el: '#app', // Vue μΈμŠ€ν„΄μŠ€κ°€ μž‘λ™ν•  μ—˜λ¦¬λ¨ΌνŠΈλ₯Ό 지정
  data: {
    message: 'My friend Vue.js'
  }
})

πŸ‘‰ 데이터와 λ©”μ„œλ“œ

데이터(Data)

Vue μΈμŠ€ν„΄μŠ€μ˜ λ°μ΄ν„°λŠ” 화면에 데이터λ₯Ό 좜λ ₯ν•˜κΈ° μœ„ν•΄ μ •μ˜ λ˜μ–΄μ•Ό ν•œλ‹€. String,Number,Array,Object λ“±λ“± μ–΄λ–€ νƒ€μž…μœΌλ‘œλ„ μ •μ˜ κ°€λŠ₯ν•˜λ‹€. λ‹€μŒμ€ μ‚¬μš©λ²•μ΄λ‹€.

new Vue({
  el : '#app',
  data : {
    message : 'Hello Vue , Hello Gaeng!', //String
    price : 99000, // Number
    members : ['CHO','GAENG'], // Array
    userInfo : { // Object
      name : 'gaeng',
      gender : 'man'
    }
  }
})

λ©”μ„œλ“œ(Methods)

μœ„ data 속성에 μ •μ˜λœ λ°μ΄ν„°λŠ” View와 μƒν˜Έμž‘μš©ν•˜λŠ”λ° μ“°μ΄κ±°λ‚˜ Vue μΈμŠ€ν„΄μŠ€ λ‚΄λΆ€μ—μ„œ λ‘œμ§μ„ μ—°μ‚°ν•  λ•Œ μ‚¬μš©λ  수 μžˆλ‹€. λ‹€μŒμ€ λ©”μ„œλ“œλ₯Ό μ •μ˜ν•˜λŠ”λ²•κ³Ό μ‚¬μš©ν•˜λŠ” 법이닀.

<div id="app">
  <button @click="sayHello()">Say Hello!</button>
</div>
new Vue({
  el : '#app',
  data : {
    message : 'Hello Vue , Hello Gaeng!', //String
  },
  methods : {
    sayHello(){
      alert(this.message)
    }
  }
})

html μ½”λ“œ λ‚΄λΆ€μ˜ λ²„νŠΌμ— 이벀트 λ°”μΈλ”©μ΄λΌλŠ” ν…œν”Œλ¦Ώ λ¬Έλ²•μ€‘ν•˜λ‚˜μΈ 클릭 μ΄λ²€νŠΈκ°€ μ—°κ²° λ˜μ–΄μžˆκ³ , 클릭 μ΄λ²€νŠΈκ°€ 이루어 질 경우 ν•΄λ‹Ή κ΅¬λ¬Έμ•ˆμ˜ ν‘œν˜„μ‹μ΄ ν˜ΈμΆœλ˜λŠ” 문법이닀. ν•΄λ‹Ή λ²„νŠΌμ„ ν΄λ¦­ν•˜κ²Œ 되면 sayHello() λ©”μ„œλ“œκ°€ μ‹€ν–‰λ˜κ²Œ λœλ‹€.

πŸ‘‰ κ³„μ‚°λœ 속성(Computed)

ν…œν”Œλ¦Ώ λ‚΄μ—μ„œ μ‚¬μš©ν•˜λŠ” ν‘œν˜„μ‹μ€ 잘λͺ» μ‚¬μš©ν•  경우 가독성이 λ–¨μ–΄μ Έ μœ μ§€λ³΄μˆ˜κ°€ μ–΄λ €μ›Œ 질 수 μžˆλ‹€. λ‹€μŒμ€ μ˜ˆμ‹œμ΄λ‹€.

<div id="app">
  <!--λ¬Έμžμ—΄-->
  <p></p>
  <!--λ¬Έμžμ—΄ μ—­μˆœ-->
  <p>{{ message.split('').reverse().join('') }}</p>
</div>
new Vue({
  el : '#app',
  data : {
    message : 'Hello Vue , Hello Gaeng!' 
  }
})

μœ„ 같은 μ½”λ“œλ“€μ΄ λ§Žμ•„μ§ˆμˆ˜λ‘ μœ μ§€λ³΄μˆ˜κ°€ μ–΄λ €μ›Œμ§ˆ 것이닀. 이럴 경우 method에 μ •μ˜ 해놓고 ν˜ΈμΆœν•˜λŠ”κ²ƒλ„ 쒋은 λ°©λ²•μ΄μ§€λ§Œ, Vue μΈμŠ€ν„΄μŠ€μ˜ κ³„μ‚°λœ 속성(computed)λ₯Ό μ‚¬μš©ν•˜λ©΄ 쒅속성이 μžˆλŠ” 데이터에 따라 μΊμ‹œκ°€ λœλ‹€. 변경에 μž¦μ€ 데이터에 λŒ€ν•΄μ„œλŠ” 더 쒋은 μ„±λŠ₯을 κΈ°λŒ€ν•  수 μžˆλ‹€.

<div id="app">
  <!--λ¬Έμžμ—΄-->
  <p></p>
  <!--λ¬Έμžμ—΄ μ—­μˆœ-->
  <p></p>
</div>
new Vue({
  el : '#app',
  data : {
    message : 'Hello Vue , Hello Gaeng!'
  },
  computed : {
    reverseMessage(){
      return this.message.split('').reverse().join('')
    }
  }
})

πŸ‘‰ κ°μ‹œλœ 속성(Computed)

κ°μ‹œλ„λ‹ˆ 속성은 Vue μΈμŠ€ν„΄μŠ€μ˜ 데이터가 λ³€κ²½λ˜λŠ” μ‹œμ μ„ κ°μ‹œν•΄ λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•˜λŠ” κΈ°λŠ₯이닀. 라이프 사이클이 Vue μΈμŠ€ν„΄μŠ€μ˜ 이벀트λ₯Ό ν›„ν‚Ήν•˜λŠ” 것이라면, κ°μ‹œλœ 속성은 Vue μΈμŠ€ν„΄μŠ€μ˜ λ°μ΄ν„°μ˜ 변경을 ν›„ν‚Ήν•˜λŠ”κ²ƒμ΄λ‹€.

<div id="app">
  <input v-model="search" type="text">
  <!--λ¬Έμžμ—΄-->
  <p></p>
</div>
new Vue({
  el : '#app',
  data : {
    search : ''
  },
  watch : {
    search(value){
      this.$http.get('/search?value='+value)
        .then(response => {
          /* ... */
        })
    }
  }
})

Thanks to

λ„μ„œ Vue.js μ΄μ •λ„λŠ” μ•Œμ•„μ•Όμ§€
Jeong Woo Ahn - Vue.js 2.0 라이프사이클 μ΄ν•΄ν•˜κΈ°


Β© 2019. All rights reserved.