Vue.js 사용 (Feat. wonya)

오늘은 보자 라이브러리방식의 vue.js 를 알아보자.

 

1. 선언적 렌더링

일단 xxx.html 파일을 하나 만들고 html 파일에 바로 cdn 방식으로 다운받아 사용할 수 있습니다.

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

위와 같은 test.html 을 만들고 난후 브라우저로 해당 파일을 열어보면

 

◀ 왼쪽과 같이 {{message}} 대신에 Hello Vue.js 라는 문구로 치환된게 확인됩니다.

 

Vue.js 에서는 이를 'DOM에 데이터를 렌더링' 한다라고 합니다.

 

 

 

 

요기서 이제 F12 를 눌러서 console 텝을 누르다음에

app.message = "바보야"

라고 입력하면 위에 Hello Vue.js! 라는 문구가 바보야라 변경된걸 확인 가능

 

자 실습시간~ 밑에▼ "안녕하세요 Vue!" 문구를 "나는 바보다" 로 변경하시오.

{{ message }}

 

 

 

---------------------------------------------------------------------------------------------------------------

2. 반응형 렌더링

 

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

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

내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!

반응형은 위와같이 ▲ 마우스를 올리면 현재 시간이 나오듯이 이벤트가 발생하는것을 말하는데

vue.js 에서는 span 태그 옆에 v- 어쩌구를 가지고 하는데 이것을 vue.js에서는 디렉티브(지시자) 라고 합니다.

 

후 너무 힘드네요...

여기까지 대충 마치고 나머지는 여기를 참고해주세요. 감사합니다~

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

시작하기 — Vue.js