세 번째 수업. 210227

# 데이터의 흐름

(1) 상위(Root) → 하위 방향으로 데이터 넘기기 : props 를 사용하여 전달

(2) 하위 → 상위 방향으로 데이터 넘기기 : event 를 발생하거나, Vue 에서는 API 의 형식으로 전달

​

# jQuery 사용해보기

→ mounted 단계 이후에만 사용 가능하다. (DOM 에 접근이 가능해야 하기 때문)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- CDN -->

<h1 class='h1-btn'>...</h1>
...
$('.h1-btn').on({
  click: function() {
    alert('jQuery Click Event!')
  },
  focusin: function() {
    console.log('jQuery focusin Event!');
  },
  mouseenter: function() {
    console.log('jQuery mouseenter Event!');
  }
});

# click: function() {...} 방식을 리터럴 함수 (= 익명함수)라고 부른다.

​

위 jQuery를 Vue 안에서 사용한 예제를 보자.

const header = new Vue({
            el: '#header',
            data: {
                msg: 'A Data Message of Vue Instance',
                dynamicMsg: '수정?',
                number: 100
            },
            methods: {
...
            mounted: function() {
                console.log('LifeCycle: mouted > jQuery 사용 가능');

                let that = this;
                
                $('.h1-btn').on({
                    click: function() {
                        alert('jQuery Click Event!');
                        console.log(that.number);
                        // console.log(that.number); // 이렇게 접근하면 NaN 이 나옴
                    },
                    focusin: function() {
                        console.log('jQuery focusin Event!');
                    },
                    mouseenter: function() {
                        console.log('jQuery mouseenter Event!');
                    },
                    mouseleave: function() {
                        console.log('jQueyr mouseleave Event!');
                    }
                });
            },
...

근데 이때 $('.h1-btn').on({...}) 안에서 header 객체의 number 을 출력하기 위해 this.number 로 접근하면 NaN 이 나온다.

왜냐면 ${ } 이용해서 jQuery 안에서 this 를 사용하면 header 를 가리키는게 아니라 $('.h1-btn') 버튼 자체로 인식하기 때문이다.

따라서 위 부분에서 let that = this; 를 통해 that 에 header 를 잠시 담아두고 jQuery 내부에서 that.number 를 통해 접근해야한다.

 

Directive: v-if

 

<h2 v-if='a'>조건문(v-if)이 참(True)인 경우</h2>
<h2 v-if='b'>조건문(v-if)이 거짓(False)인 경우</h2>
...
const obj = new Vue({
        el: '#app',
        data: {
            a: true,
            b: false,
...

 

Directive: v-if ~ v-else-if ~ v-else

 

        <div class="if-box">
            <ol>
                <li v-if='choice1'>A</li>
                <li v-else-if='choice2'>B</li>
                <li v-else>C</li>
            </ol>
        </div>
...
    const obj = new Vue({
        el: '#app',
        data: {
            a: true,
            b: false,
...
            choice1: false,
            choice2: true
        },

 

Directive: v-bind

 

<h3><a v-bind:href="url2" v-bind:title='urltitle'>Vue.js 바로가기</a></h3>
<img v-bind:src='imageUrl' v-bind:alt='imgalt' v-bind:title='imgtitle'>
// v-bind: 는 그냥 : 로도 생략이 가능하다
// <img :src='imageUrl' :alt='imgalt' :title='imgtitle'>
<h2>오늘의 날짜 : {{ currentDate }}</h2>
<h2>오늘의 날짜 : {{ currentDate.getFullYear() }} {{ currentDate.getMonth() + 1 }} {{ currentDate.getDate() }} {{ currentDate.getDay() }}</h2>
...
    const obj = new Vue({
        el: '#app',
        data: {
            a: true,
            b: false,
            url2: 'https://vuejs.org/',
            imageUrl: './image/ha.jpeg',
            imgalt: 'Alternative Text',
            urltitle: 'vuejs 바로가기',
            imgtitle: 'imgtitle',
            currentDate: new Date(),
...

<img v-bind:src='imageUrl' v-bind:alt='imgalt' v-bind:title='imgtitle'>
<img :src='imageUrl' :alt='imgalt' :title='imgtitle'>

v-bind: 는 그냥 : 로도 생략이 가능하다

 

 

Directive: v-model

 

# selectBox 예제

        <select name="Alphabet" id="Alphabet" v-model='select'>
            <option value="">옵션을 선택하세요.</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
        </select>
        <h3>선택 옵션 : {{ select }}</h3>
...
        data: {
            a: true,
            b: false,
            ...
            currentDate: new Date(),
            select: '',

 

# checkBox 예제

        <h2>체크박스 model</h2>
        <div class="check-box">
            <input type="checkbox" id="chk1" value="Check 1" v-model="chk"><label for="chk1">Check 1</label>
            <input type="checkbox" id="chk2" value="Check 2" v-model="chk"><label for="chk2">Check 2</label>
            <input type="checkbox" id="chk3" value="Check 3" v-model="chk"><label for="chk3">Check 3</label>
            <input type="checkbox" id="chk4" value="Check 4" v-model="chk"><label for="chk4">Check 4</label>
            <input type="checkbox" id="chk5" value="Check 5" v-model="chk"><label for="chk5">Check 5</label>
        </div>
        <h2>체크된 옵션 : {{ chk }}</h2>
...
    const obj = new Vue({
        el: '#app',
        data: {
            a: true,
            b: false,
...
            select: '',
            chk: [] // 배열로 해주어야 값이 누적
        },

 

 

# radioButton 예제

        <h2>RadioButton model</h2>
        <div class="radio-box">
            <input type="radio" name="radio" id="radio1" value="Female" v-model="radio"><label for="radio1">Female</label>
            <input type="radio" name="radio" id="radio2" value="Male" v-model="radio"><label for="radio2">Male</label>
            <input type="radio" name="radio" id="radio3" value="Androgynous" v-model="radio"><label for="radio3">Androgynous</label>
        </div>
        <h2>체크된 옵션 : {{ radio }}</h2>
...
    const obj = new Vue({
        el: '#app',
        data: {
            a: true,
            b: false,
            ...
            select: '',
            chk: [],
            radio: '',
        },

 

※ label 에서 for 는 반드시 id 로 연동한다.

※ checkbox 는 다수 선택, radiobutton 은 하나만 선택

※ radiobutton 은 name 이 반드시 같아야 하며, checkbox 의 name 은 가급적 다르게 설정한다.

​

# <Input> 을 이용한 응용 v-model

        <h2>입력상자 텍스트를 이용한 응용 v-model</h2>
        <div class="text-box">
            <label for="customerName">입력 : </label>
            <input type="text" name='name' id='customerName' v-model='value' v-on:keyup='eventFn'>
            <h2>입력된 값 : {{ value }}</h2>
            <h3 v-show='x'>값을 입력하세요.</h3>
        </div>
...
    const obj = new Vue({
        el: '#app',
        data: {
            a: true,
            b: false,
            ...
            choice1: false,
            choice2: true,
            value: '',
            x: true
        },
        methods: {
            eventFn: function() {
                this.x = false;
            }
        }
    });

입력 전

 

입력 후

※ keyup : 키 입력 후 발생하는 이벤트