My Profile Photo

DongChanS's blog

수학과 학생의 개발일지

Vue.js (1) - Vue.js란?

1) Vue.js

https://kr.vuejs.org/v2/guide/index.html에서 공식문서 나와있음

한국어 싫다면 위의 kr을 빼면 됨.

1-1. Vue.js가 뭐냐?

  1. Single Page App

    • Vue.js
    • React
    • Angular

    그중에서도 매우 가벼우면서, 프레임워크가 많이 구현되어있기 때문에 초보 개발자가 사용하기 편하다.

  2. Declarative programming

1-2. 사용법

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

이걸 Body태그 맨 밑에 놔둔다.

왜냐하면 맨 밑에 놔둬야 seamless하기 때문이다.

맨 위 vs 맨 밑

  • 맨 밑에 놔두면 DOM트리가 다 렌더되서 보여진 이후에 자바스크립트가 작동하는데,

  • 맨 위에 놔두면 자바스크립트가 작동한 이후에 DOM 트리가 렌더되므로, 렌더되기 이전의 시간 동안에는 페이지가 보이지 않는다.

그러면 이제 Vue라는 객체를 통해서 vue.js를 다루는데, 이 객체만 잘 안다면 vue.js를 마스터하는 것과 다름없다고 한다.


<p id="app">{{msg}}</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el : '#app',
        data : {
            msg : 'happy hacking!',
        },
        // methods : 아직 안쓸거임
    })
</script>

Vue 객체를 다루기 위해서는

el, data, msg라는 키밸류를 서술해주면 된다.

  • el : HTML Element (주어)
  • data : 값 (목적어)
  • methods : 함수 (동사, 서술어) 의 느낌으로 묘사만 해주면 자동으로 해준다.

그런데 신기한 부분이 있다.


<p id="app">
    <h1>{{msg}}</h1>
</p>

이런식으로 h1태그를 p태그 안에 쓰면 msg가 적용이 안되는데,

이건 시맨틱태그 상에서 p태그 안에 h1태그가 들어간다는게 말이 안되서 그렇기 때문이다.

만약,


<div id="app">
    <h1>{{msg}}</h1>
</div>

이런식으로 div태그 안에 h1태그를 넣는것은 시맨틱태그상으로 성립하기 때문에 괜춘하다.

1-3. html의 attribute를 vue에 연결하기

    <p id="app">
        <span v-html="msg"></span>
    </p>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el : '#app',
            data : {
                msg : 'happy hacking!',
            },
        })
    </script>

v로 시작하는 속성이 있다면 vue.js의 것이라는걸 인식하고

렌더를 잘 해주기 때문에 v-html 속성이 뜨지 않고, innerHTML로 바뀌어버린다.

1

1-4. methods

methods 부분은 동사를 의미하기 때문에 밸류로는 함수를 넣어준다.

<script>
    let app = new Vue({
        el : '#app',
        data : {
            age : 34
        },
        methods : {
            plus : function() {
                this.age += 1
            }
        }
    })
</script>

주의! 함수를 넣어줄 때 arrow function을 절대로 쓰면 안됨! 왜냐하면 arrow function은 this구조를 뭉개버리기 때문입니다. 그렇기 때문에 vue와 연동할수가 없음.

이제 이 함수를 다루기 위해서는 vue 객체에 대해서 알아야하는데,

vue 객체에서는 app.$data, app.$el 이런식으로 와 data에 접근할 수는 있는데,

methods는 그냥 app.plus()와 같이 직접적으로 부르기만 하면 된다.

2

그러면 age의 값이 증가하는 신기한 현상을 경험할 수 있다.

이걸 자바스크립트로 짜기에는 상당히 귀찮은데 vue.js를 쓰면 더 간단하게 할 수 있습니다.

1-5. 제어문 표현하기

<script>
    let app = new Vue({
        el : '#app',
        data : {
            todos : ['Vue.js 배우기', 'Javascript 복습하기', '어플리케이션 개발하기'],
            isMarried : true
        },
        methods : {
            plus : function() {
                this.age += 1
            }
        }
    })
</script>

이런식으로 배열의 데이터를 for문을 통해서 출력을 해보고 싶은데, vue.js에서는 어떻게 할 수 없을까?

=> v-for과 v-if 속성을 통해서 for문과 if문을 실행할 수 있다.


<div id="app">
    <ul>
        <li v-for="todo in todos">{{todo}}</li>
    </ul>
    <p v-if="isMarried">
        결혼했음.
    </p>
</div>

3

<p v-if="!isMarried">
    결혼안했음.
</p>

이런식으로 !를 넣으면 부정조건문도 해볼 수 있다.

1-6. if와 for문 응용하기

밑의 데이터에서 checked : false인 객체만 전부 출력해보려면?

<script>
let app = new Vue({
            el : '#app',
            data : {
                posts : [
                    {
                        id : 1,
                        content : '1번글',
                        checked : false,
                    },{
                        id : 2,
                        content : '2번글',
                        checked : false,
                    },{
                        id : 3,
                        content : '3번글',
                        checked : false,
                    },{
                        id : 4,
                        content : '4번글',
                        checked : true,
                    }
                ]
            },
        })
</script>

이런식으로 post라는 오브젝트에 대해서 value와 key를 같이 가져올 수 있다.

참고링크 : v-for with an Object, v-for with v-if

물론.. v-for이랑 v-if를 같이 쓰는걸 추천하지는 않는다고 한다..

=> 이것을 제대로 쓰려면 template라는 element를 덮으면 된다고함.


<ul>
    <li v-for="post in posts" v-if="!post.checked">
        <div v-for="(value, key) in post">
            {{key}} : {{value}}
        </div>
    </li>
</ul>

4

1-6. 그 외의 key값들

  1. filters
  2. computed
  3. watch
  4. directives

이런거 더 사용할수도 있다고함.

2) Vue.js 맛보기

2-1. Form태그?

Form태그는 데이터를 어딘가에 보내기 위해서 사용되는 것이다.

그렇기 때문에 페이지 이동이 강제될 수 밖에 없고, 이러면 Single Page App이 성립하기 힘들다.

따라서 우리는 Form태그를 쓰지 않고, 자바스크립트 그 중에서도 Vue.js를 이용한다.

2-2. Vue.js의 구조

  1. M : Model (쟝고의 Model과 비슷)
  2. VM : ViewModel (쟝고의 View와 비슷)
  3. V : View (쟝고의 Template와 비슷)

여기 3가지 중에서 우리는 VM부분만 잘 짜주면 Vue.js가 모델을 알아서 짜고, View를 통해서 잘 흘려보낸다.

2-3. ViewModel 맛보기

  1. 기본형태

       
 <div id="app">
     <h1>{{header}}</h1>
     <h2>{{subheader}}</h2>
     <p>{{content}}</p>
     <input>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el : '#app',
        data : {
            header : 'Todo App',
            subheader : '이것은 Todo App입니다.',
            content : '할일을 입력해 주세요.'
        }
    })
</script>

    5

  2. ViewModel을 한번 맛보기

    input태그에 입력한 값을 그대로 보여주기.

       
<div id="app">
    <h1>{{header}}</h1>
    <h2>{{subheader}}</h2>
    <p>{{content}}</p>
    <input v-model="content">
</div>

    6

    이런식으로 Vue.js가 데이터를 머금고 있다가 중간에서 html에 흘려보내주는 역할을 해준다고 합니다.

comments powered by Disqus