Portfolio

현재 Vue는 2버전에서 3로 이동중 .. → 앞으로 Vue3로 진행할 예정

데이터와 DOM이 연결됨 → 반응형(데이터가 바뀌면 화면이 바뀐다)

최신 버전 시작 하기 - CDN 방법

index.html에서 head에 <script src=”https://unpkg.com/vue@next”></script> 코드 추가
CDN 방법은 전역 Vue 개체를 통해 전역 API의 함수(ex. createApp)에 접근할 수 있다

Vue.createApp(옵션).mount(타겟셀렉터)

vue 방식으로 타겟 셀렉터에 렌더링 시키고, 컴포넌트 인스턴스를 반환
옵션 객체에 data메서드, mouted메서드, methods 속성, components 속성 등이 올 수 있다
생성된 애플리케이션의 인스턴스에서 data를 속성으로 접근할 수 있다(ex. vm.counter)

data 메서드가 리턴하는 객체 멤버로 변수를 지정할 수 있다

mounted 훅으로 마운트 될 때(렌더링 될 때) 실행되어야 하는 로직을 지정할 수 있다(인스턴스 반환)

vue.js에서 선언한 변수 등을 html에서 이중 중괄호({{ }}) 안에서 사용해서 보간 처리 할 수 있다


...
<script src="https://unpkg.com/vue@next"></script> //vue 시작하기
</head>
<body>
    <div id="app">
        {{counter}} //vue에서 선언된 data 사용하기
    </div>
    <script>
        const app = { //컴포넌트
            data() { //데이터를 반환하는 메서드
                return { //객체 형태로 반환
                    counter:0
                }
            },
            mounted() { //mount되면 실행되는 메서드(선택)
                setInterval(()=> {
                    this.counter += 1 //화살표 함수여야 함 -> this는 변수 app을 가리킴
                }, 1000)
            }
        }

        const vm = Vue.createApp(app) //vue 애플리케이션 생성
									.mount('#app') //html 요소에 연결하기(체이닝 방식) => 인스턴스 생성
    </script>
</body>

디렉티브 (v-)

셀렉터 속성에 v-bind: 를 붙여서 값을 데이터로 취급할 수 있다.

붙으면 값은 js로 읽힐 수 있다
vue의 data 메서드에 선언된 변수를 중괄호 두번 필요 없이 바로 쓸 수 있음
ex) v-bind:class=”{ 클래스명: true }”이면 해당 클래스명이 적용 된다

ex2) v-bind:fruit-name=”name”

셀렉터 속성에 v-on:으로 method 역시 붙일 수 있다

앞서, vue.js에서 methods라는 속성으로 메서드들을 선언할 수 있다
이렇게 선언한 메서드들은 v-on:자스이벤트이름=”메서드이름” 등으로 사용할 수 있다

ex) v-on:click, v-on:scroll, v-on:dragstart


<body>
	<style>
        .orange{ //orange 클래스에 스타일 적용
            color: orange
        }
    </style>
    <div id="app">
        <div v-bind:class="{ orange: active }">{{counter}}</div> //active 값에 따라 orange 클래스명이 추가
        <button v-on:click="increase">Click me!</button> //button의 click 함수 값으로 increase 메서드
    </div>
    <script>
        const app = {
            data() {
                return {
                    counter: 0,
                    active: true //data에 리턴 값에 active 속성 추가
                }
            },
            methods: { //methods라는 속성에서 메서드를 선언 가능
                increase() { //counter를 1 증가하는 메서드
                    this.counter += 1
                }
            }
        }

        const vm = Vue.createApp(app).mount('#app')
    </script>
</body>

v-if="값" ⇒ 값이 true이면 해당 셀렉터 요소를 출력한다


<div id="app">
        <div v-if="active">짜잔</div> //디렉티브
        <button v-on:click="toggle">Click me!</button>
    </div>
    <script>
        const app = {
            data() {
                return {
                    active: true
                }
            },
            methods: {
                toggle() {
                    this.active = !this.active
                }
            }
        }

        const vm = Vue.createApp(app).mount('#app')
    </script>

v-for=”요소 in 배열등” 형태로 배열 등을 반복문을 돌린 후에, 해당 태그의 자식에서는 {{요소}}로, 자식 속성 등의 값으로는 “요소” 요소를 쓸 수 있다

배열에는 script에서 data로 선언한 것이 오고, 요소의 이름은 아무거나 올 수 있다


<div id="app">
        <ul v-for="fruit in fruits">
            <li>
                {{fruit}}
            </li>
        </ul>
    </div>
    <script>
        const app = {
            data() {
                return {
                    fruits: ['apple', 'banana', 'kiwi']
                }
            }
        }

        const vm = Vue.createApp(app).mount('#app')
    </script>

v-model 디렉티브 : 양식에 대한 입력과 앱 상태를 양방향으로 바인딩

ex) input 요소의 값으로 변수 데이터를 넣었을 때, 데이터를 수정하면 input 요소의 값이 같이 수정되고 역으로도 영향을 끼침

컴포넌트

App의 객체 멤버로 components를 둘 수 있고, 값을 객체 형태로 받고 컴포넌트를 멤버로 둔다

컴포넌트 객체: 멤버 template에서 render하고 싶은 html코드, 멤버 props에서 전달받은 props

script에서 선언된 components를 꺽쇠로 html 코드에서 쓸 수 있다

주의) js에서는 components와 props 이름을 카멜 케이스로, html에서는 대시 케이스로 받음. (뷰가 알아서 변환하여 매칭 해줌)


<div id="app">
        <ul v-for="name in fruits">
            <fruit-item v-bind:fruit-name="name"></fruit-item>
        </ul>
    </div>
    <script>
        const FruitItem = {
            props: ['fruitName'],
            template: "<li>{{fruitName}}</li>"
        }
            
        const app = {
            components: {
                FruitItem
            },
            data() {
                return {
                    fruits: ['apple', 'banana', 'kiwi']
                }
            }
        }

        const vm = Vue.createApp(app).mount('#app')
    </script>

live server 확장 프로그램으로 바로 서버를 시작할 수 있다.(저장 시 자동 새로고침)

코드 우클릭 후 Open with live server 클릭

script의 전역 변수의 이름을 개발자 도구 콘솔에 입력하면, 해당 변수 정보를 확인할 수 있다

counter는 app.counter로 접근, 변경할 수 있다

함수에 따른 this

일반 function 함수 ⇒ 함수가 호출되는 위치에서 정의
화살표 함수 ⇒ 함수가 선언되는 위치에서 정의

보통은 화살표 함수를 써서 변수를 사용할 수 있게 함

Vue 시작하기 + 미리보기

디렉티브 (v-)

컴포넌트