๐Ÿงต Vue.js ์Šคํ„ฐ๋”” 1.

chloeยท2021๋…„ 9์›” 23์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
79/81
post-thumbnail

๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ

JS๋ฐ์ดํ„ฐ๋ฅผ HTML์— ๊ฝ‚์•„๋„ฃ๋Š” ๋ฌธ๋ฒ•

<div>
  //๋ฐ‘์— ์žˆ๋Š” ๋ฐ์ดํ„ฐ HTML์— ๊ฝ‚์•„๋„ฃ๊ณ  ์‹ถ์œผ๋ฉด {{๋ฐ์ดํ„ฐ์ด๋ฆ„}}
  <p>{{price1}}๋งŒ์›</p>
 <h4>{{products[0]}}</h4>
 </div>
<script>
export default{
  name:'APP',
  //๋ฐ์ดํ„ฐ ๋ณด๊ด€ํ•จ๋ถ€ํ„ฐ ์žˆ์–ด์•ผ ํ•จ
  data(){
    return {
      //์—ฌ๊ธฐ์— ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๊ด€ํ•˜๋ฉด ๋œ๋‹ค.
      //๋ฐ์ดํ„ฐ๋Š” object์ž๋ฃŒ๋กœ ์ €์žฅํ•˜๊ธฐ
      price1:30,
      products:[ '์—ญ์‚ผ๋™์›๋ฃธ','์ฒœํ˜ธ๋™์›๋ฃธ','๋งˆํฌ๊ตฌ์›๋ฃธ']
      
    }
  },
  componenets:{
  }
</script>

{{๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ}}ํ•˜๋Š” ์ด์œ ??
1. HTML์— ํ•˜๋“œ์ฝ”๋”ฉํ•ด๋†“์œผ๋ฉด ๋‚˜์ค‘์— ๋ณ€๊ฒฝ์ด ์–ด๋ ค์›€
2.Vue์˜ ์‹ค์‹œ๊ฐ„ ์ž๋™ ๋ Œ๋”๋ง์ด ๋œ๋‹ค.
=>Vue๋Š” data๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด data์™€ ๊ด€๋ จ๋œ HTML์—๋„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ˜์˜์ด ๋œ๋‹ค.
3. ์• ์ดˆ์— ๊ฐ’์ด ๋ฐ”๋€” ์ผ ์—†์œผ๋ฉด ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์•ˆํ•ด๋„ ๋œ๋‹ค.

HTMLํƒœ๊ทธ ์•ˆ์˜ ์†์„ฑ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์€ :์–ด์ฉŒ๊ตฌ
<img :src='์›๋ฃธ๋“ค[0].image' class="room-img">
HTMLํƒœ๊ทธ ์•ˆ์˜ ๋‚ด์šฉ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์€ {{์–ด์ฉŒ๊ตฌ}}
<p>{{์›๋ฃธ๋“ค[0].price}}์›</p>

v-for๋ฐ˜๋ณต๋ฌธ

<div class='menu">
 <a> Home</a>
 <a>Products</a>
 <a>About</a>
 <a>About</a>
 <a>About</a>
//๋ฐ˜๋ณต์ ์ธ HTMLํƒœ๊ทธ ์ถœ๋ชฐ
์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑ. ๋ฐ˜๋ณต๋ฌธ ์“ธ ๋•Œ :key์•ˆ์“ฐ๋ฉด ์—๋Ÿฌ๋‚œ๋‹ค
<a v-for="(a,i) in ๋ฉ”๋‰ด๋“ค" :key="i">Home</a>
</div>
  <div v-for="(a,i) in products" :key='i'>
    <h4>{{products[i]}}</h4>
   </div>
  <script>
export default{
  name:'APP',
  //๋ฐ์ดํ„ฐ ๋ณด๊ด€ํ•จ๋ถ€ํ„ฐ ์žˆ์–ด์•ผ ํ•จ
  data(){
    return {
      //์—ฌ๊ธฐ์— ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๊ด€ํ•˜๋ฉด ๋œ๋‹ค.
      //๋ฐ์ดํ„ฐ๋Š” object์ž๋ฃŒ๋กœ ์ €์žฅํ•˜๊ธฐ
       ๋ฉ”๋‰ด๋“ค:['Home','Shop','About'],
      products:[ '์—ญ์‚ผ๋™์›๋ฃธ','์ฒœํ˜ธ๋™์›๋ฃธ','๋งˆํฌ๊ตฌ์›๋ฃธ']
      
    }
  },
  componenets:{
  }
</script>

์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ

HTMLํด๋ฆญ ์‹œ ์ฝ”๋“œ ์‹คํ–‰ํ•˜๋Š” ๋ฒ•

<div>
  //v-on:click === @click
  //๋ณ€์ˆ˜์— 1๋”ํ•ด์ฃผ์„ธ์š”..
  <button v-on:click="increase">ํ—ˆ์œ„๋งค๋ฌผ์‹ ๊ณ </button> <span>์‹ ๊ณ ์ˆ˜:{{์‹ ๊ณ ์ˆ˜}}</span>
  </div>

  <script>
export default{
  name:'APP',
  data(){
    return {
       ์‹ ๊ณ ์ˆ˜:0,
       ๋ฉ”๋‰ด๋“ค:['Home','Shop','About'],
      products:[ '์—ญ์‚ผ๋™์›๋ฃธ','์ฒœํ˜ธ๋™์›๋ฃธ','๋งˆํฌ๊ตฌ์›๋ฃธ']
      
    }
  },
    // click์•ˆ์— ๋“ค์–ด๊ฐˆ ์ฝ”๋“œ๊ฐ€ ๊ธธ๋ฉด function์œผ๋กœ ์ถ•์•ฝํ•ด ๋„ฃ์œผ๋ฉด ๋จ
  //vue์—์„œ ํ•จ์ˆ˜ ๋งŒ๋“ค๊ณ  ์‹ถ์œผ๋ฉด methods:{ํ•จ์ˆ˜(){}}์•ˆ์— ๋งŒ๋“ค์–ด๋ผ
 
  methods:{
    increase(){
      this.์‹ ๊ณ ์ˆ˜ +=1;
    }
  },
  componenets:{
  }
</script>

์ค‘์š” : vue์—์„œ ํ•จ์ˆ˜๋งŒ๋“ค ๋•Œ ์ฃผ์˜์‚ฌํ•ญ => ํ•จ์ˆ˜ ์•ˆ์—์„œ ๋ฐ์ดํ„ฐ์“ธ ๋•this.๋ฐ์ดํ„ฐ๋ช…

์ฐธ๊ณ :Youtube ์ฝ”๋”ฉ์• ํ”Œ

profile
Front-end Developer ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

0๊ฐœ์˜ ๋Œ“๊ธ€