본문 바로가기

Vue.js7

Vue 시작하기 VSCode, Node js LTS 버전 설치. Windows Powershell 관리자 권한 실행 후 get-ExecutionPolicy Set-ExecutionPolicy RemoteSigned -> Y get-ExecutionPolicy -> RemoteSigned VSCode에서 vue create test cd test npm run serve 로컬 호스트에서 바로 구동된다! Vue create 프로젝트명 이렇게 Terminal에 입력하면 누구나 같은 구조로 시작할 수 있다. 맨밑에 package.json "name": "test", 2022. 10. 28.
Vue.js - #6 데이터 흐름(상-하, 하-상, 동일), 이벤트 버스(Event Bus) 뷰에서는 상위에서 하위로의 데이터 흐름(단방향 데이터 흐름)을 규약으로 지키며 구현한다. 먼저, 1) 상위에서 하위로 데이터를 보낼 때 props 속성을 사용하여 상위 컴포넌트에서 하위 컴포넌트로 보낸다. 먼저, 하위 컴포넌트에 속성에 props 속성을 정의하고, Vue.component('child-component', { props : ['props 속성 이름'] }); 상위 컴포넌트의 HTML 코드에 등록된 child-component 태그에 v-bind 속성을 추가한다. v-bind 속성의 왼쪽 값으로 하위 컴포넌트에서 정의한 props 속성을 넣고, 오른쪽 값으로 하위 컴포넌트에 전달할 상위 컴포넌트의 data 속성을 지정한다. 예제로, Vue.component('child-component',.. 2021. 10. 24.
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.

티스토리툴바