Introduction

์ถ”์„ ์—ฐํœด ์ดํ‹€์€ ํ‘น์‰ฌ๊ณ  ๋‚จ์€ ๊ธฐ๊ฐ„ ๋™์•ˆ์€ scss๊ณต๋ถ€ + ์œ ํŠœ๋ธŒ ๋ฉ”์ธ ๋ ˆ์ด์•„์›ƒ ํด๋ก  ๊ณผ์ œ๋ฅผ ์ง„ํ–‰ํ–ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ์ด๋ฒˆ์ฃผ๋ถ€ํ„ฐ๋Š” ๋“œ๋””์–ด Vue ํ•™์Šต ์‹œ๊ฐ„!!! ์ฒ˜์Œ์œผ๋กœ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์ด๋ผ ๊ธฐ๋Œ€๊ฐ€ ๋œ๋‹ค.
์—ด์‹ฌํžˆ ๋ฐฐ์›Œ์„œ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•ด๋ณผ ์˜ˆ์ •์ด๋‹ค.


์˜ค๋Š˜ ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šด ๊ฒƒ

  1. ํด๋ž˜์Šค์™€ ์Šคํƒ€์ผ ๋ฐ”์ธ๋”ฉ
  2. ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง
  3. ๋ฆฌ์Šคํฌ ๋ Œ๋”๋ง
  4. ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง
  5. ํผ ์ž…๋ ฅ ๋ฐ”์ธ๋”ฉ

์˜ค๋Š˜์€ Vue.js์˜ ๋‹จ๋ฐฉํ–ฅ, ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ๊ณผ ํผ ์ž…๋ ฅ ๋ฐ”์ธ๋”ฉ์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด๋ณผ ์˜ˆ์ •์ด๋‹ค.


๐Ÿ’ซ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ

  • ๋‘ ๋ฐ์ดํ„ฐ ํ˜น์€ ์ •๋ณด์˜ ์†Œ์Šค๋ฅผ ๋ชจ๋‘ ์ผ์น˜์‹œํ‚ค๋Š” ๊ธฐ๋ฒ•
  • ํ™”๋ฉด์— ๋ณด์ด๋Š” ๋ฐ์ดํ„ฐ์™€ ๋ธŒ๋ผ์šฐ์ € ๋ฉ”๋ชจ๋ฆฌ์— ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ผ์น˜์‹œํ‚ค๋Š” ๊ธฐ๋ฒ•

๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ

  • data ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ •๋ณด๋ฅผ v-bind ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ html ์ฝ”๋“œ ๋‚ด๋กœ ๋ฐ”์ธ๋”ฉํ•˜์—ฌ ํ™”๋ฉด์— ๋ Œ๋”๋งํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ฐ’์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ด ๋ฐฉ์‹์€ Vue ์ธ์Šคํ„ด์Šค -> Template์™€ ๊ฐ™์ด ํ•œ ๋ฐฉํ–ฅ์œผ๋กœ ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.
<body>
    <div id="app">
      <input type="text" :value="msg" />
      <h1>{{msg}}</h1>
    </div>
    <script>
      const App = {
        data() {
          return {
            msg: 'hello Vue!',
          };
        },
      };
      const vm = Vue.createApp(App).mount('#app');
    </script>
  </body>

์œ„ ์ฝ”๋“œ์™€ ๊ฐ™์€ ์ƒํ™ฉ์—์„œ ๋ฐ์ดํ„ฐ๋Š” ํ•œ๋ฐฉํ–ฅ์œผ๋กœ๋งŒ ํ๋ฅด๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— input ํƒœ๊ทธ์˜ ๊ฐ’์„ ๋ณ€๊ฒฝํ•ด๋„ ํ™”๋ฉด์—๋Š” ์•„๋ฌด๋Ÿฐ ๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚˜์ง€ ์•Š๋Š”๋‹ค

์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ

  • Vue ์ธ์Šคํ„ด์Šค -> Template, Template -> Vue ์ธ์Šคํ„ด์Šค ์–‘๋ฐฉํ–ฅ ๋ชจ๋‘ ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ
  • ์ฆ‰, input ํƒœ๊ทธ์— ๊ฐ’์„ ์ž…๋ ฅํ•˜๋ฉด ๋ณ€๊ฒฝ๋œ ๊ฐ’์ด ํ™”๋ฉด์— ๋ Œ๋”๋ง ๋˜๋Š” ๋ฐฉ์‹

Vue์—์„œ๋Š” ์ด๋ฒคํŠธ์™€ v-model ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ํ†ตํ•ด ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค

์ด๋Ÿฌํ•œ ์–‘๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ์„ ํผ ์ž…๋ ฅ ๋ฐ”์ธ๋”ฉ์—์„œ ํ™•์ธํ•ด ๋ณผ ์ˆ˜ ์žˆ๋‹ค.


ํผ ์ž…๋ ฅ ๋ฐ”์ธ๋”ฉ

input, textarea, select ๋“ฑ ๋‹ค์–‘ํ•œ ์š”์†Œ์—์„œ ์ ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

1. input ์ด๋ฒคํŠธ ํ™œ์šฉ

<body>
    <div id="app">
      <input type="text" :value="msg" @input="msg = $event.target.value" />
      <h1>{{msg}}</h1>
    </div>
    <script>
      const App = {
        data() {
          return {
            msg: 'hello Vue!',
          };
        },
      };
      const vm = Vue.createApp(App).mount('#app');
    </script>
  </body>

์œ„์™€ ๊ฐ™์ด input ์ด๋ฒคํŠธ๋ฅผ ํ™œ์šฉํ•ด $event.target์— ์ง์ ‘ ์ ‘๊ทผํ•˜์—ฌ msg๋ฅผ ๋ณ€๊ฒฝํ•ด ์ค„ ์ˆ˜ ์žˆ๋‹ค.

์ฃผ์˜ํ•  ์ ์€, ํ•œ๊ธ€์˜ ๊ฒฝ์šฐ v-model ๋””๋ ‰ํ‹ฐ๋ธŒ ์‚ฌ์šฉ ์‹œ ์‹ค์‹œ๊ฐ„ ๋ฐ˜์˜์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค. ๋”ฐ๋ผ์„œ ํ•œ๊ธ€ ์ž…๋ ฅ ์‹œ์—๋Š” input ์ด๋ฒคํŠธ๋ฅผ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค

2. v-model ๋””๋ ‰ํ‹ฐ๋ธŒ ํ™œ์šฉ

input ์š”์†Œ ์ ์šฉ ์˜ˆ์ œ

  • text
<body>
    <div id="app">
      <input type="text" v-model="msg" />
      <h1>{{msg}}</h1>
    </div>
    <script>
      const App = {
        data() {
          return {
            msg: 'hello Vue!',
          };
        },
      };
      const vm = Vue.createApp(App).mount('#app');
    </script>
  </body>
  • radio
<body>
    <div id="app">
      <input v-model="picked" type="radio" value="daseul" />
      <input v-model="picked" type="radio" value="leon" />
      <input v-model="picked" type="radio" value="lia" />
    </div>
    <script>
      const App = {
        data() {
          return {
            picked: '',
          };
        },
        watch: {
          picked(newValue) {
            console.log(newValue);
          },
        },
      };
      const vm = Vue.createApp(App).mount('#app');
    </script>
  </body>

select ์š”์†Œ ์ ์šฉ ์˜ˆ์ œ

<body>
    <div id="app">
      <select v-model="selected">
        <option value="">ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•˜์„ธ์š”!</option>
        <option v-for="fruit in fruits" :key="fruit.value" :value="fruit.value">
          {{fruit.text}}
        </option>
      </select>
    </div>
    <script>
      const App = {
        data() {
          return {
            selected: '',
            fruits: [
              { text: '์‚ฌ๊ณผ', value: 'apple' },
              { text: '๋ฐ”๋‚˜๋‚˜', value: 'banana' },
              { text: '์ฒด๋ฆฌ', value: 'cherry' },
            ],
          };
        },
        watch: {
          selected(newValue) {
            console.log(newValue);
          },
        },
      };
      const vm = Vue.createApp(App).mount('#app');
    </script>
  </body>

Comment

๋ฐ”๋‹๋ผ JS๋กœ ์ปดํฌ๋„ŒํŠธ, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง, ์ƒํƒœ ๊ด€๋ฆฌ ๋“ฑ์„ ๋ฐฐ์šฐ๊ณ ๋‚˜๋‹ˆ Vue๋ฅผ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ์ˆ˜์›”ํ•œ ๊ฒƒ ๊ฐ™๋‹ค.
๋ฐฐ์› ๋˜ ๋‚ด์šฉ๋“ค์„ ํ•˜๋‚˜ํ•˜๋‚˜ ๋ณต์Šตํ•˜๋ฉฐ Vue์— ์ž˜ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋…ธ๋ ฅํ•ด์•ผ๊ฒ ๋‹ค.
์ด๋ฒˆ์ฃผ๋„ ํž˜๋‚ด๋ณด์ž..!!!!!

profile
์ธ์ƒ์€ ์šฉ๊ธฐ์˜ ์–‘์— ๋”ฐ๋ผ ์ค„์–ด๋“ค๊ฑฐ๋‚˜, ๋Š˜์–ด๋‚œ๋‹ค

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