본문 바로가기

전체 글141

Vue.js - #5 사용자 입력 제어, v-on:click, 함수 사용 사용자의 입력 (클릭)을 사용하여 반응형으로 변하는 것을 만들어보자. Vue에서는 단방향 즉, JS에서 message가 변경되면 HTML상의 {{ message }} 가 변경되는 단방향으로 데이터가 변경된다. 즉, 데이터가 변경되면 자동으로 HTML상의 보간된 데이터가 변경되는 것이다. 양방향, 즉 HTML상의 보간된 데이터가 JS에 정의한 message로 넘어갈 수 있다면 양방향이 된다. 양방향 데이터 바인딩을 위해서는 v-model 디렉티브를 사용할 수 있다. HTML {{ message }} Toggle CSS .box { width : 150px; height: 150px; background : royalblue; border-radius : 10px; cursor : pointer; trans.. 2021. 10. 15.
Vue.js - #4 디렉티브, 반복문 Vue Instance의 라이프사이클을 하기 전에 먼저 반복문을 해보고자 한다. 너무 지루할거 같아서..ㅎㅎ vue에서는 v-XXX라고 생긴 것이 있는데, v-는 Vue에서 제공하는 접두어로서, "디렉티브" 라고 한다. HTML을 이렇게 설정해보자. {{ message }} app이란 아이디를 갖는 div안에, text area를 만들어주고, v-bind 속성으로 active라는 이름의 클래스를 만들어주자. 둘째로 CSS를 아래와 같이 만든다. .text { font-size : 60px; } .text.active { color:red; } 그리고 자바스크립트로 이렇게 만들자. const viewModel = new Vue({ el : "#app", data : { message : "Hello Vue.. 2021. 10. 15.
Vue.js - #3 Vue Instance 먼저, 설치한 텍스트 에디터나 IDE 중 자신이 원하는 것을 키고, index.html 파일 하나를 생성해봅시다. {{ message }} 아마 뷰를 처음 해본 사람이라도, 대충 어떻게 데이터가 입혀지겠구나, 생각은 들겁니다. 여기서 vue는 CDN 방식으로 사용하고 있으므로 본인이 귀찮다면 파일을 직접 프로젝트 내에 넣어도 상관 없습니다. 텍스트 에디터가 사용하기 귀찮다면, 텍스트 파일로 만들고, 확장자를 html로 바꿔주면 됩니다. 만약 실행 후, 개발자 도구에서 "You are runing Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://.. 2021. 10. 9.
Vue.js - #2 환경 구성 1. 크롬 브라우저 ( 모두가 사용해본 적 있는 개발자 도구를 위해! ) 2. 아톰 에디터 ( 깃허브에서 제작한 무료 텍스트 에디터라는데, 깔끔하고 좋긴 하나 구지 본인이 Eclipse나 InteliJ 등을 쓰고 있으면 필요 없다. ) 책에서는 아톰 에디터 패키지에서 싱글 파일 컴포넌트 체계를 학습하는데 반드시 필요한 패키지 language-vue 를 설치하라고 한다. 자동 완성도 지원하나 보다. 일단 나는 패스. 3. 무엇보다 중요한 Node.js 서버 사이드 자바스크립트인 Node.js는 서버 측에서 실행되는 자바스크립트 실행 환경이다. 뷰 CLI(Command Line Interface)를 이용해 쉽게 뷰 프로젝트를 구성하기 위해서는 Node.js를 설치해주어야만 한다. 또, 뷰 CLI로 생성한 프.. 2021. 10. 7.

티스토리툴바