체인의정석

Vue.js 시작하기 본문

개발/frontend

Vue.js 시작하기

체인의정석 2020. 6. 17. 18:07
728x90
반응형

https://kr.vuejs.org/v2/guide/index.html

 

시작하기 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

뷰는 공식 사이트가 잘 나와있다고 해서 공식 사이트를 보고 연습합니다.

 

먼저 새로운 프로젝트이니 깃허브에 공간을 하나 만들어주고 read me 와 gitignore를 깔아줍니다.

https://github.com/hynki95/vue_basic

 

hynki95/vue_basic

뷰 공식 사이트 예제 공부. Contribute to hynki95/vue_basic development by creating an account on GitHub.

github.com

 

1. vue의 cdn

 

다음과 같이 2가지 종류의 cdn이 있습니다. node.js와 사용할 경우 vue-cli 모듈을 다운받아서도 실행이 가능하다고 합니다.

 

    <!-- 개발버전, 도움되는 콘솔 경고를 포함. -->

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

 

<!-- 상용버전, 속도와 용량이 최적화됨. -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 개발버전, 도움되는 콘솔 경고를 포함. -->

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

</head>

<body>

    <div id="app">

        {{ message }}

    </div>

</body>

<script>

    var app = new Vue({

  el: '#app',

  data: {

    message: '안녕하세요 Vue!'

  }

})

</script>

</html>

다음과 같이 코드를 작성할 경우

아래와 같이 페이지가 작성됨을 확인할 수 있습니다.

이는 데이터와 dom이 연결된 것이라고 합니다.

f12를 누르고 개발자 도구를 열어보면 다음과 같이 message라는 데이터에 다른 값을 넣으면 웹페이지에서의 데이터가 똑같이 바뀜을 확인할 수 있습니다.

 

2. V-bind 

디렉티브 - 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어 있으며 사용자가 집작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 기본적으로 "이 요소의 title 속성을 Vue 인스턴스의 message속성으로 최신상태를 유지합니다."

<div id="app-2">
<span v-bind:title="message"> 내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다! </span>
</div>

var app2 = new Vue({
 el: '#app-2',
 data: { message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다' }
})

다음과 같이 title 속성을 넣어둘 수 있습니다.

 

 

3. 조건문과 반복문

seen은 요소를 디스플레이 할지 말지를 정해주는 역할을 합니다.

 

다음과 같이 seen의 값에 따라서 디스플레이가 될지 안될지를 정하는 부분은 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여줍니다. Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때 자동으로 트랜지션 효과를 적용할 수 있습니다. 

 

몇가지 디렉티브 예시를 통해서 이를 이해해 보겠습니다.

v-for 디렉티브는 배열의 데이터를 바인딩하여 todo 목록을 표시하는데 사용할 수 있습니다.

<div id="app-4">
    <ol>
     <li v-for="todo in todos"> {{ todo.text }} </li>
    </ol>
</div>
var app4 = new Vue({
    el: '#app-4',
    data: { todos: [ { text: 'JavaScript 배우기' }, { text: 'Vue 배우기' }, { text: '무언가 멋진 것을 만들기' } ] }
})

app4.todos.push({ text: 'New item' })

를 하게 되면 Todo 목록에 새 항목이 동적으로 추가가 됩니다.

 

4. 사용자 입력 핸들링

사용자가 앱과 상호작용할 수 있게 하는 방법은 v-on을 사용하는 것입니다.

이를 이용해서 메소드를 호출하는 이벤트 리스너를 추가 할 수 있습니다.

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
var app5 = new Vue({
    el: '#app-5',
    data: { message: '안녕하세요! Vue.js!' },
    methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') }
} })

메세지를 띄어쓰기로 한글자씩 split 한 후 reverse로 순서를 바꾸고 나서 마지막으로 띄어쓰기로 join을 하여서 뒤집힌 글자로 만드는데 성공하였다.

 

이렇게 되면 DOM을 직접적으로 건드리지 않고 앱의 상태만을 업데이트 하게 된다. 모든 DOM조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춘다. Vue는 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공합니다.

 

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
var app6 = new Vue({
      el: '#app-6',
      data: {
        message: '안녕하세요 Vue!'
      }
})

5. 컴포넌트를 사용한 작성방법

// todo-item 이름을 가진 컴포넌트를 정의합니다
Vue.component('todo-item', {
    template: '<li>할일 항목 하나입니다.</li>'
})

var app = new Vue(...)
<ol>
    <!-- todo-item 컴포넌트의 인스턴스 만들기 -->
    <todo-item>
    </todo-item>
</ol>

그러나 이렇게 하게 되면 todo-item 컴포넌트를 사용할 때마다 똑같은 텍스트를 렌더링 하기만 하기 때문에 todo-item 컴퍼넌트의 정의를 수정하여 다음과 같이 만듭니다.

 

Vue.component('todo-item', {
// 이제 todo-item 컴포넌트는 "prop" 이라고 하는
// 사용자 정의 속성 같은 것을 입력받을 수 있습니다.
// 이 prop은 todo라는 이름으로 정의했습니다.
props: ['todo'], template: '<li>{{ todo.text }}</li>'
})

 

 

<div id="app-7">
    <ol>
         <!-- 이제 각 todo-item 에 todo 객체를 제공합니다. 화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔            수      있습니다. 또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨). -->
        <todo-item
        v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id" >
       </todo-item>
   </ol>
 </div>

Vue.component('todo-item',
    { props: ['todo'], template: '<li>{{ todo.text }}</li>' })
    var app7 = new Vue({
    el: '#app-7',
    data: {
groceryList: [
    { id: 0, text: 'Vegetables' },
    { id: 1, text: 'Cheese' },
    { id: 2, text: 'Whatever else humans are supposed to eat' }
]}
})

이것으로 가장 기본적인 기능은 학습이 끝났습니다. 

 

간단하게 정리하자면 다음과 같이 될 것 같습니다.

 

1. 선언적 렌더링 => DOM에서 {{ }}를 사용하면 데이터를 선언적으로 렌더링할 수 있다. dom요소를 id로 정의 하고 el : '#id'를 해서 선택하고 data를 정의하면 {{ }} 위치 안에 정의된 데이터가 들어가게 된다.

 

2. v-if => 여기 안에 seen 과 같이 특성을 정하면 dom구조를 보이게도 안보이게도 만들 수 있다. 이처럼 구조에도 데이터를 바인딩 할 수 있게 만든다.

 

3. v-for => todo in todos 와 같이 v-for = 구문에 두게 되면, todos라는 배열 안의 데이터에 있는 값 만큼 todo를 뽑아서 표시하게 할 수 있다.

 

4. v-on => v-on:click 과 같이 할 시 클릭하는 이벤트가 발생하게 되면 선언해둔 메서드를 실행시킬 수 있다. 

 

5. v-model => 한번에 양식 {{ }}로 되어 있는 양식 부분과, input 값과 같은 앱의 상태를 양방향으로 바인딩하여 동시에 입력시킬 수 있다. 

 

6. Vue.component => 컴포넌트를 만들고 컴포넌트와 같은 태그를 사용하게 되면 해당 템플릿이 적용된다. 이때 props를 사용하게 되면 만들어진 컴포넌트를 리스트에서 불러와서 원하는 내용으로 컴포넌트를 자유롭게 사용할 수 있게 된다.

 

 

 

728x90
반응형

'개발 > frontend' 카테고리의 다른 글

Vue.js를 사용하기 위해 기본적으로 필요한 모듈들 사이트와 역할 및 링크 모음  (0) 2020.06.23
Vue.js 클래스와 스타일 바인딩  (0) 2020.06.19
Vue.js computed와 watch  (0) 2020.06.19
Vue.js 템플릿 문법  (0) 2020.06.18
Vue 인스턴스  (0) 2020.06.18
'개발/frontend' Related Articles more
Comments