[기초]#6 Vue js 기초 문법

vue 버전 4.5.12

 

1.데이터 표시

<!--html 코드 -->
<template>
	<div id="app">
	1. 호랑이 : {{animal}} <br>
	2. 호랑이 (v-text) : <p v-text="animal"></p>
	3. 호랑이 (v-html) : <p v-html="animal"></p>
	</div>
</template>

<script> 
export default{ 
  data() {
    return {
      animal : "<h1>Tiger</h1>",
    }
  }
}
</script>

결과

 

 

2. html 폼 타입 지정

<template>
  <div id="app">
    <a :href='url'>naver</a><br>
    <input :type='type1'><br>
    <input v-bind:type='type2'><br>
  </div>
</template>

<script> 
  export default{ 
    data() {
      return {
        type1 : 'text',
        type2 : 'checkbox',
        url : 'https://www.naver.com'
      }
    }
  }
</script>

결과

 

3. 클래스 지정

<template>
  <div id="app">
     <p v-bind:class='class1'> 클래스 하나지정 </p>
    <p v-bind:class='[class1,class2]'> 다중 클래스 지정</p>
  </div>
</template>

<script> 
  export default{ 
    data() {
      return {
        class1:'Class1',
        class2:'Class2'
      }
    }
  }
</script>

결과

 

4. html 입력 폼 생성 및 데이터 바인딩

<template>
    <div id="app">
        <input v-model="input_value">
        input 입력 내용 : {{input_value}}<br><br>

        <textarea v-model="textarea_value"></textarea>
        textarea 입력내용 : {{textarea_value}}<br><br>

        <input type="checkbox" v-model="checkbox_value" value="checkbox1">
        <input type="checkbox" v-model="checkbox_value" value="checkbox2">
        <input type="checkbox" v-model="checkbox_value" value="checkbox3">
        checkbox 선택 value : {{checkbox_value}}<br><br>


        <input type="checkbox" v-model="checkbox_check" value="checkbox0">
        checkbox 선택여부 : {{checkbox_check}}<br><br>

        <input type="radio" v-model="radio_value" value="radio1">
        <input type="radio" v-model="radio_value" value="radio2">
        <input type="radio" v-model="radio_value" value="radio3">
        radio value : {{radio_value}}<br><br>

        <select v-model="select_value">
            <option selected>default</option>
            <option>value1</option>
            <option>value2</option>
        </select>
        select value : {{select_value}}<br><br>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                input_value: '코끼리',
                textarea_value: 'textarea입니다',
                checkbox_value: [],
                checkbox_check: false,
                radio_value: '',
                select_value: ''
            }
        }
    }

</script>

결과

 

 

5. 메소드 생성

<template>
    <div id="app">
        <button v-on:click="countUp"> 1씩 증가</button>
        <p>{{count}}</p>
        <button :disabled="click" v-on:click="oneClick">한 번만 클릭가능</button>
        <br><br>
        <button v-on:click="alertClick">알림창 </button>
    </div>
</template>
  
<script> 
    export default{ 
        data() {
            return {
                count:0,
                click:false
            }
        },
        methods :{
            countUp(){
                this.count++;
            },
            oneClick(){
                this.click=true;
            },
            alertClick(){
                alert("OK");
            }
        }
    }
</script>

 

결과

6. 조건문 사용

<template>
    <div id="app">
  
        <button v-bind:disabled="Case1" v-on:click="case1Click">case1</button>
        <button v-bind:disabled="Case2" v-on:click="case2Click">case2</button>
        <button v-bind:disabled="Case3" v-on:click="case3Click">case3</button>
  
  
        <p v-if="Case1">Case1 </p>
        <p v-else-if="Case2">Case2 </p>
        <p v-else>Case3 </p>
  
    </div>
</template>
  
<script> 
export default{ 
    data() {
    return {
        Case1 :false,
        Case2 :false,
        Case3 :false
    }
    },
    methods :{
    case1Click(){
        this.Case1 = true;
        this.Case2 = false;
        this.Case3 = false;
    },
    case2Click(){
        this.Case1 = false;
        this.Case2 = true;
        this.Case3 = false;
    },
    case3Click(){
        this.Case1 = false;
        this.Case2 = false;
        this.Case3 = true;
    }
    }
}

</script>

결과

 

7. 반복문을 통한 배열 출력

2.2.0 이상에서 v-for는 :key를 적어줘야 한다고 함.

적지 않으면

element in iteration expect to have v-bind key

에러가 남 

<template>
    <div id="app">
  
        <p v-for="pick in arr" v-bind:key="pick">{{pick}}</p>
        
        <p v-for="(key,value) in obj" v-bind:key="key"> {{key}} : {{value}}</p>
        
        <p v-for="(item) in objArr" v-bind:key="item.name"> {{item.name}}, {{item.age}}, {{item.job}}</p>
        
        <input type="text" v-model="textValue">
        <button v-on:click="push(textValue)">저장</button><br>
        배열 내용 : {{pushArr}}
  
    </div>
</template>
  
  <script> 
    export default{ 
      data() {
        return {
         arr : ['짜장','짬뽕','탕수육'],
         obj: {'a':'1','b':'2','c':'3'},
         objArr : [{'name' : 'park', 'age' : '13','job':'student'},{'name' : 'lee', 'age' : '30', 'job' : 'teacher'}],
         pushArr : [],
         textValue :''
        }
      },
      methods :{
        push(textValue){
          this.pushArr.push(textValue);
        }
      }
    }
  
  </script>
  
  <style>

결과

 

8. computed (데이터 변화 감지)

onchange와 메소드를 간편하게 결합시켜놓은 기능같다.

** 함수 내부의 프로퍼티가 변경되면 실행됨

** computed의 함수들은 항상 return 값이 있어야 함 

** 같은 기능을 하는 watch는 반환값이 없어도 됨.

 

<template>
  <div id="app">
    <input v-model.number="price" type="number">원 X 
    <input v-model.number="count" type="number">개
    <p> 합계 {{sum}}원 </p>
    <p> 세금포함 {{taxIncluded}} 원</p><br><br>
  </div>
</template>

<script>
export default{ 
  data() {
    return {
      price: 100,
      count:1
    }
  },

  computed:{
    sum:function(){
      return this.price * this.count;
    },
    taxIncluded:function(){
      return this.sum*1.08;
    }
  }
}
</script>

결과

 

수식어

1) .lazy

입력 이벤트가 끝난 뒤 입력과 데이터를 동기화 함.

입력중일 땐 동기화가 안 된다는 말.

<template>
  <div id="app">
   <input v-model.number="message" type="number">
    message is : {{ message }}
  </div>
</template>

<script>
export default{ 
  data() {
    return {
      message: 0
    }
  }
}
</script>

2)  .trim

input을 자동으로 trim

<input v-model.trim="message" >
 message is : {{ message }}

3) .number

사용자 입력이 자동으로 숫자로 형변환 된다고 함.

type="number"를 사용하는 경우에도 HTML 입력 엘리먼트의 값은 항상 문자열을 반환하기 때문에 이것은 종종 유용하게 사용할 수 있습니다.  라고 함

 

<input v-model.number="message" type="number">
message is : {{ message }}