메리

싱글 파일 컴포넌트 방식으로 연습하였음

vue 버전 4.5.12

1. 데이터 표시

<template> <!--html 코드 -->
	<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>Monkey</h1>",
    }
  }
}
</script>

2. html 폼 타입 지정

<template> <!--html 코드 -->
  <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> <!--html 코드 -->
  <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> <!--html 코드 -->
  <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> <!--html 코드 -->
  <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> <!--html 코드 -->
  <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> <!--html 코드 -->
  <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

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

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

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

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 }}

참고링크