상세 컨텐츠

본문 제목

Vue2 기초 익히기(1)

Programming/FrontEnd

by Dal_pang 2023. 1. 3. 19:26

본문

뷰js 기초 익히기 1~10강 내용

Vue2 CDN 링크

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

 

v-bind

=> 스크립트 태그 내에서 작성한 데이터나 메소드 등을 HTML태그에 연결할때 'v-bind:'를 사용.

콜론(':')만 단독으로 사용해도 동일한 역할을 한다.

...
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- Vue2 -->
</head>
<body>
    <div id="app">
        {{ nextYear('안녕하세요') }}
        <input :type="type" :value="inputData">
        <a :href="link">링크이름</a>
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                person: {
                    name: '뇸뇸',
                    age: 28,
                },
                ...
        })
    </script>
...

Event

example1)

<div id="app">
        {{ year }}<br>
        <button v-on:click="plus">더하기</button>
        <button v-on:click="minus">빼기</button>
</div>
<!-- -------- -->   
<script>
 new Vue({
            el:'#app',
            data: {
                year:2023,
            },
            methods:{ /*함수를 작성해 사용가능.*/
                plus(){
                    this.year++;
                },
                minus(){
                    this.year--;
                }
            }
        })
</script>

 

 

example2)

<div id="app">
    <form v-on:submit="submit">
        <input type="text"><br>
        <button type="submit">Submit</button>
    </form>
</div>

<script>
...
	methods:{
		submit(){
                    alert('submitted!');
                },
        }
...

입력후, submit버튼을 누르면 alert창이 뜨고

-> alert창에서 ok누르면 form이 있는 페이지가 자동으로 reload 됨!

 

default값인 reload를 막고 싶으면 '.prevent'등을 사용하여 막을 수 있다.

<form v-on:submit.prevent="submit">
    <input type="text"><br>
    <button type="submit">Submit</button>
</form>

 

https://v2.vuejs.org/v2/guide/events.html#Key-Modifiers

 

Event Handling — Vue.js

Vue.js - The Progressive JavaScript Framework

v2.vuejs.org

v-on : DOM 이벤트를 전달 받아 JavaScript를 실행 시킨다.

 

event Modifier

.stop / .prevent / .capture / .self / .once / .passive
<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form v-on:submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

 

 

데이터 양방향 바인딩

키보드 입력 값이 text input창 밑에 실시간으로 출력 되는 것 처럼 작성하기.

 

'v-on'은 '@'로 대체 가능하다.

HTML

<form v-on:submit.prevent="submit">
    <input type="text" :value="text" @keyup="updateText"><br>
    {{ text }}<br>
    <button type="submit">Submit</button>
</form>

JS

..
updateText(event){
    this.text = event.target.value;
}
..

 

위의 코드는 v-model을 사용하면 간단하게 동일한 역할을 해줌!

 

결론, 양방향 데이터 바인딩에는 v-model을 쓰자!

 

<div id="app">
    <form v-on:submit.prevent="submit">
        <input type="text" v-model="text"><br>
        {{ text }}<br>
        <button type="submit">Submit</button>
    </form>
</div>

Computed 속성

템플릿 내 표현식에 너무 많은 연산을 넣으면 코드가 비대해지고 유지보수가 어렵다.

 

예를들어 HTML DIV태그 내에 다음과 같이 작성 할 수도 있지만,

<div id="app">
   {{ message.split('').reverse().join('') }}
</div>

다음과 같이 script단에서 computed 속성 아래에 만들어 사용할 수 있다.

<div id="app">
   {{ reverseMessage }}
</div>
<script>
new Vue({
    el:'#app',
    data: {/*데이터*/
        message:'Hellowwww',
    },
    methods:{ /*함수.*/

    },
    computed:{
        reverseMessage(){
            return this.message.split('').reverse().join('')
        }
    }
})
</script>

 

※ Computed 속성과 Method 속성 차이? ※

methods를 사용해서 똑같은 동작을 하게 할 수도 있다. ( 단, methods 함수로 사용할 경우 '함수명()'형태로 사용할것. )

computed 함수는 변수를 사용하듯이 함수명만 쓰면 실행 가능.

사실상 실행 결과는 동일해 보임.

 

그렇다면 차이점은?

computed 속성은 캐싱이 된다는 차이가 있다.

즉, computed 속성으로 작성된 메서드는 여러곳에서 사용되는 경우,

값이 바뀌지 않는 한, 한번 실행되면 그 값으로 계속 사용가능 하다는 장점이 있다.

 

Computed 속성엔 한번 실행 -> 캐싱 후 재사용할 함수,

Methods 속성에는 매번 실행 되어야 하는 함수를 사용

 

watch 속성

일반적으로는 Computed 프로퍼티를 사용하지만, 때론 watcher를 꼭 사용해야 할 때가 있다.

데이터 값을 지켜 보다가, 값의 변화가 생길때 그에 대해 반응하는 역할을 해준다.

<div id="app">
    {{ message }}<br>
    <button @click="changeMessage">Click</button><br>
    {{ updated }}
</div>
<script>
    new Vue({
        el:'#app',
        data: {/*데이터*/
            message:'Hellowwww',
            updated:'NO',
        },
        watch:{
            message(newVal, oldVal){
                console.log(newVal, oldVal);
                this.updated='YES';
            }
        }
    })
</script>

클래스 & 스타일 바인딩

<style>
    .red {
        color:red;
    }
    .bold {
        font-weight: bold;
    }
</style>

위의 스타일을 적용 시키기 위해서 다음과 같이 사용 가능.

<div class="red bold">Hello</div>

 

클래스 바인딩 적용하기

- inline 방식

<div :class="{ red:isRed, bold:isBold }">Hello</div>
<button @click="update">Click</button>

=> script에서 스타일 변경 메소드 작성.

<script>
        new Vue({
            el:'#app',
            data: {/*데이터*/
                isRed:false,
                isBold:false
            },
            methods:{ /*함수*/
                update(){
                    this.isRed = !this.isRed;
                    this.isBold = !this.isBold;
                }
            },
        })
    </script>

=> 버튼 클릭시 update()가 실행되면서 스타일 적용 토글이 실행된다.

*** style class 이름이 '-'로 이어진 긴 이름이면, HTML태그 에서 사용할때 "abc-def"와같이 큰따옴표로 감싸서 사용해야한다.

 

- Object를 입력하는 방식

 

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

 

Array Syntax 방식

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

v-if & v-show

HTML태그 내에 if 조건을 걸어 사용 가능.

v-if

<div id="app">
    <div v-if="show">Yes</div>
    <button @click="toggleShow">Toggle</button>
</div>
<script>
    new Vue({
        el:'#app',
        data: {/*데이터*/
            show: true,
        },
        methods:{ /*함수*/
            toggleShow(){
                this.show=!this.show;
            }
        },
    })
</script>

다중 태그에 대해 위와 같은 toggle 작동을 시키려면 template 태그 사용.

<template v-if="number===1">
	<div>1</div>
    	<div>2</div>
	<div>3</div>
</template>

 

 

v-show

v-show 값이 true이면 보여줌.

<div id="app">
    <div v-show="show">Yes</div>
    <button @click="toggle">Toggle</button>
</div>
<script>
    new Vue({
        el:'#app',
        data: {/*데이터*/
            show: false,
        },
        methods:{ /*함수*/
            toggle(){
                this.show=!this.show;
            }
        },
    })
</script>

 

v-if, v-show 차이

> v-if 는 거짓인 경우 렌더링이 되지 않는 반면에, v-show는 일단 display:none 이더라도 렌더링이 됨.

v-if는 참, 거짓 연산때 마다 계속 렌더링이 됨.

때문에, 값을 자주 바꿔야 하는 경우 v-show(초기 렌더링 비용이 높음), 조건이 자주 바뀌지 않으면 v-if(토글 비용이 높음)를 권장.

v-for

<div id="app">
    <div v-for="person in people">
        {{ person.name }} {{ person.age }}
    </div>
</div>

"person in people" 대신, "person of people"로 써도 동일. in, of 동일한 역할.

data: {/*데이터*/
    people:[
        {name:'a', age:20},
        {name:'b', age:21},
        {name:'c', age:22},
        {name:'d', age:23},
        {name:'e', age:24},
    ]
},

 

인덱스 값 필요시

<div v-for="(person,index) in people">
    {{ person.name }} {{ person.age }} {{ index }}
</div>

 

키값 사용시

<div v-for="(person,index) in people" :key="person.id">
    {{ person.name }} {{ person.age }} {{ index }}
</div>

<script>
	{id:1,... }
</script>

 

추가 v-for 사용 방법

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

<!-- -->

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

argument 두개 사용시 => 키, 값

argument 세개 사용시 => 키, 값, 인덱스

 

 

728x90

'Programming Languages > FrontEnd' 카테고리의 다른 글

Vue2 기초 익히기(3) - Vue CLI, Vue Router, SFC, Props, Emit  (0) 2023.01.05
Vue2 기초 익히기(2)  (0) 2023.01.04
Vue Tutorial 따라하기 - Computed Properties  (0) 2022.11.10
Vue Tutorial 따라하기 - Class&Style Binding  (0) 2022.10.15
Vue Tutorial 따라하기 - Event Handling  (0) 2022.10.13

관련글 더보기

티스토리툴바