티스토리 뷰

VUEJS

VUEJS) https://codepen.io/

Programmers 2021. 7. 2. 07:56
반응형

codepen

https://codepen.io/

 

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

코드펜을 이용하면 환경설정을 하지 않고도 충분히 공부를 할 수 있다. 이 외에도 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가 활성화 된다.

반응형

'VUEJS' 카테고리의 다른 글

VUEJS) DevExtreme DxScrollView 스크롤 안먹힘 오류 해결  (0) 2021.07.09
VUEJS) props 사용법  (0) 2021.07.06
VUEJS) 조건문과 반복문  (0) 2021.07.02
VUEJS) moment()  (0) 2021.06.22
VUEJS개요  (0) 2021.06.21
댓글
공지사항