[Vue.js] 함께 공부하는 Vue 기초_01

안녕하세요! Plitche(플리체)입니다.
이번 포스팅은 [Vue.js] 함께 공부하는 Vue 기초_01입니다.

기본적인 Html, CSS, Javascript를 배운 제가 최근에 많이 듣는 이야기가 '이거 vue로 하면 엄청 편할텐데..'였습니다.
때문에 그 뷰(vue.js)!가 도대체 뭔지 공부를 하기위해 겸사겸사 포스팅하려 합니다.
하나하나 처음부터 같이 공부해봐요!

Intro

먼저 어떤 새로운 기술이나 언어를 공부하든 공식홈페이지의 가이드는 한번씩 읽는 것이 좋다.

나도 그렇듯 공식홈페이지라는 막연한 거부감에 확인 하지 않는 경우가 많은데, Vue는 한글화도 잘 되어있고 나도 많이 참고하여 포스팅 할 예정이라 한번씩은 추천드린다.

일단 Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다.

처음 사용할 때에도 cdn 스크립트 하나만 추가해주면 되니 얼마나 편한가!

프로젝트의 index만으로도 따라할 수 있으니 아래 사진처럼 기본 파일 하나를 만들어 보자.

Setting(세팅)

Vue CLI를 이용한 방법도 있지만, 일단은 Vue가 어떤건지, 어떻게 사용하는지, 어떻게 생겼는지! 간단히 사용하기 위해서 해더부분에 아래 스크립트를 추가해준다.

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

Example (예제 따라해보기)

1. Hello Vue

먼저 body부분에 아래와 같이 화면에 보여줄 태그를 하나 만들어 둔다.

  <div>
    Hello Vue!
  </div>

그럼 당연히 Hello Vue!가 화면에 보일 것이다. 여기서 Vue는 어떻게 사용하는 것일까?

1. 위와 같이 div태그에 id속성을 부여해주고, 태그 사이에 중괄호(2개!) 사이에 message라고 작성해준다.
2. 스크립트에서 div태그의 id와 동일한 이름을 가진 변수를 만들어 준다.
   • 여기서 el은 동일한 id를 가진 태그와 연결시켜주는 역할을 한다.

이렇게 코드를 작성을 한다면 태그와 스크립트가 연결이 되어, data의 message가 화면에 출력되는 모습을 확인 할 수 있다.

이제 반응형이 되었으며, 이를 확인하기 위해서 F12 또는 마우스 우클릭 -> 검사를 눌러 확인해보도록 하자.

1-1 Check(확인)

콘솔에 app.message 값을 다르게 설정해 본다면, 화면에 출력되는 메세지 또한 변경된 값으로 같이 변하는 모습을 볼 수 있다.

별 것 아니라고 생각할 수 있지만, 우리는 더이상 HTML과 직접 상호작용을 할 필요가 없다는 것을 뜻한다.

2. 앨리먼트 속성 바인딩

자, 이번에는 아래와 같이 코드를 작성해 보도록 하자.

적혀 있는 문구와 동일하게 화면의 문구에 마우스를 올리면 시간을 확인할 수 있다.

 

여기서 v-bind 속성은 디렉티브라고 한다.

• 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어서 사용된다.
• 기본적으로 이 요소의 title 속성을 Vue 인스턴스의 message 속성으로 상태를 유지한다.
• 1번과 같이 콘솔창을 다시 열어서 app2.message = "새로운 메시지"라고 작성하면 title속성이 업데이트 되었음을 확인할 수 있다.

Review

• 저도 View 자체를 처음 배우는 것이다 보니, 내용이 얼마 없는데에도 작성시간이 오래걸렸네요.ㅠㅠ 앞으로 속도 좀 높여서 빨리빨리 진도를 나갈 수 있도록 노력해볼게요!
• 이 포스팅의 모든 내용은 공식홈페이지를 참고 하였습니다. 감사합니다. :)