VUEJS) https://codepen.io/

codepen

https://codepen.io/

CodePen

코드펜을 이용하면 환경설정을 하지 않고도 충분히 공부를 할 수 있다. 이 외에도 JSFiddle, JS Bin 등이 있다.

빨간색 설정버튼을 눌러서 Add External Scripts/Pens의 검색창에 Vue라고 치면 Vue버전들이 나온다. 2.xxx 버전을 사용하는 것을 권장한다.

v-bind를 활용한 예제

html

<div id="app">
  <div class="text" v-bind:class="{ 'active': active }">
    {{ message }}
</div>

 

css

.text {
  font-size: 70px
}
.text.active {
  color: red;
}

 

js

const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    active: false
   }
})

v-bind를 이용하면 js에서 html을 제어하는데 큰 도움이 된다.
위의 예제에서는 html내의 div태그 내의 v-bind:class="{ 'active': active }" 에서 앞의 'active'는 v-bind를 활성화 할것인지에 대한 코드이고, 뒤에 active는 js내의 active(false)를 의미한다. 즉, js에서 active를 true로 수정하면 html내의 active가 활성화 된다.