문법

👾 v-bind

data에 따라 class이름을 다르게 부여할 때, v-bind를 써서 줄 수 있다.

<div class="state">{{message}}</div> //class 이름이 state
<div v-bind:class="state">{{message}}</div> //class 이름이 data에 있는 state라는 이름의 값이 지정됨

👾 v-if, v-else ...

v-if, v-else, v-else-if를 쓸 땐 같은 형제이면서, 인접해 있어야함

맞게 사용한 예시)

<section>
  <div v-if="test">test가 true인 경우</div>
  <div v-else>test가 true 외 값인 경우</div>
</section>

틀리게 사용한 예시)

<section>
  <div v-if="test">test가 true인 경우</div>
  <div>인접하지 않아서 틀렸지롱</div>
  <div v-else>test가 true 외 값인 경우</div>
</section>

👾 v-show

v-show 안의 값이 true면 보이고, false면 안보임

<section>
  <div v-show="result.length">{{result}}</div>
</section>

v-if는 태그 자체를 조건에 따라 존재유무를 정하는거고(랜더링을 하느냐)
v-show는 조건에따라 false인 경우 display:none만 해주는것 (랜더링은 하고, 보이느냐 마느냐)

👾 v-model

data와 input 값을 연결할 수 있음
아래 예시와 같이 코드를 작성하고 input에 값을 입력하면
div에서 입력한 value값이 보인다!

예시)

<div id="root">
    <form>
        <input v-model="value"/>
        <div>{{value}}</div>
    </form>
</div>
<script>
    const app = new Vue({
        el : "#root",
        data: {
            value: ''
        },
        methods: {}
    })
</script>

👾 ref

vue를 쓰다 보면 element를 찝어야 하는 상황이 생긴다.
아래 예시와 같이 data 처리 후 input에 focus를 해줘야 하는 경우,,?
단순하게 focus 해주기 위함인데 data로 관리하기도 애매해서
그런 상황에서 ref를 써서 셀렉트할 수 있다.

<input ref="email"/>

이렇게 ref에 이름을 지정하고

this.$refs.email.focus();

이런식으로 포커스등의 이벤트를 걸 수 있는데,
주의할 점은

this.$refs.value ='email@domain.com'

이런식으로 element를 셀렉해서 값을 강제로 넣으면 안된다.
(data와 화면의 값이 달라지는 현상이 생김)

아래는 ref의 바른 사용예시!

<div id="root">
    <div>{{first}}곱하기 {{second}}는?</div>
    <form v-on:submit="onSubmitForm">
        <input ref="answer" v-model="value"/>
        <button type="submit">입력</button>
    </form>
    <div id="result">{{result}}</div>
</div>
<script>
    const app = new Vue({
        el : "#root",
        data: {
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random() * 9),
            value: '',
            result: ''
        },
        methods: {
            onSubmitForm(e){
                e.preventDefault();
                if(this.first * this.second === parseInt(this.value)){
                    this.result = '정답! 🎉';
                    this.first = Math.ceil(Math.random() * 9);
                    this.second = Math.ceil(Math.random() * 9);
                    this.value = '';
                    this.$refs.answer.focus();
                }else {
                    this.result = '땡 👻';
                    this.value = '';
                }
            }
        }
    })
</script>

👾 v=""

v-on:click="", v-if="" 등 v문법의 ""안에서 자바스크립트 문법을 사용할 수 있음

예시)

<section>
  <div v-if="route === 'main'">메인화면</div>
  <div v-else-if="route ==='sub'">서브화면</div>
  <div v-else>기본화면</div>
</section>

👾 @, :

-on:click 은 @click 으로,
v-bind:class는 :class로 생략해줄 수 있다.

👾 {{}}

data를 html 내부에서 사용할 때는 중괄호를 두개 써주고 그 안에 변수나 자바스크립트 등을 쓰는데, 아래 예시와 같다

<div id="root">
    <div>첫번째 값{{first}}, 두번째 값{{second}}, 더한 값 {{first + second}}</div>
</div>
<script>
    const app = new Vue({
        el : "#root",
        data: {
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random() * 9)
        },
        methods: {}
    })
</script>