Vue 기본문법

FrontEnd

Vue 기본문법

NandaNanda 2024. 6. 27. 06:31

회사 프로젝트 중 필요한 Vue문법을 잘 설명한 블로그가 있어 글 남긴다.

https://cjw-awdsd.tistory.com/33

중간에 오타가 있는데, 아래에서 v-bind

5. 입력 폼 연결

v-bind

v-bind를 통해 input에서 입력한 값을 프로퍼티에 저장가능하다. 다양한 예제를 아래와 같이 다 입력해놨다.

  <body>
    <h2>입력한 문자열을 표시하는 예제</h2>
    <div id="app">
      <!--v-model을 사용해 프로퍼티에 값을 input값으로 저장가능-->
      <input v-model="input_model" placeholder="이름">
      <p>input model : {{input_model}}</p>

      <!--lazy는 input의 포커스를 다른곳으로 이동할 때 프로퍼티에 저장하는 기능-->
      <input v-model.lazy="input_model2">
      <p>input lazy model : {{input_model2}}</p>

      <!--textarea에서도 v-model 사용가능-->
      <textarea v-model="textarea_model"></textarea>
      <p>textarea model : {{textarea_model}}</p>

      <!--checkbox에서 사용 예제 저장된 프로퍼티를 v-bind를 통해 로직 실행가능-->
      <input type="checkbox" v-model="checkbox_model" value="awd">
      <button v-bind:disabled="checkbox_model === false">disabledd</button>
      <p>checkbox model : {{checkbox_model}}</p>

      <!--프로퍼티를 배열로 선언하면 value값을 저장-->
      <input type="checkbox" v-model="checkbox_model2" value="test1">
      <input type="checkbox" v-model="checkbox_model2" value="test2">
      <p>checkbox model : {{checkbox_model2}}</p>

      <!--라디오 프로퍼티 저장-->
      <input type="radio" v-model="radio_model" value="test1">
      <input type="radio" v-model="radio_model" value="test2">
      <input type="radio" v-model="radio_model" value="test3">
      <p>radio model : {{radio_model}}</p>

      <!--select 프로퍼티 저장-->
      <select v-model="select_model">
        <option>test1</option>
        <option>test2</option>
      </select>
      <p>select model : {{select_model}}</p>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          input_model:'',
          input_model2:'',
          textarea_model:'',
          checkbox_model:false,
          checkbox_model2:[],
          radio_model:'',
          select_model:''
        }
      })
    </script>
  </body>