반응형 프로그래밍/vue.js7 vue.js - 7.반복문(v-for) ●반복문(v-for) - 자바스크립트에서의 for문 역할을 한다. - 반복해야하는 html요소안에 넣어서 사용한다. ex)배열 반복문 예제 {{text}} num : {{man.num}} , name : {{man.name}} , job : {{man.job}} num : {{man.num}} name : {{man.name}} job : {{man.job}} ex)객체 반복문 예제 {{text}} {{key}}, {{value}} {{index}} : {{key}}, {{value}} 2021. 8. 1. vue.js - 6.조건문(v-if, v-else, v-else-if, v-show) 디렉티브 ●v-if, v-else, v-else-if, v-else - 표현그대로 조건문이다. 조건을 만족하면 랜더링을 해서 보여주고, 조건을 만족하지 않으면 랜더링을 하지않는다. ●v-show - 특정조건을 만족하면 보여주고, 만족하지 않으면 display:none 해서 보여주지 않는다. - 화면엔 보이지 않아도 실제론 랜더링을 하기 때문에 화면이 자주 변경되는 부분에 대해선 v-if보단 v-show를 써주는게 좋다. ex) {{text}} 100초과 100점 나머지 100초과하였습니다. 2021. 8. 1. vue.js - 5. v-bind, v-model 디렉티브 ●v-bind 디렉티브 - v-bind는 html의 속성을 설정할 때 사용한다. - 'v-bind:속성'에서 'v-bind'를 생략하고 ':속성'만 써도 된다.(v-bind:src -> :src) ex) {{text}} ●v-model 디렉티브 - v-text, v-html등은 모두 단방향 디렉티브이다. - v-model은 사용자가 입력한 값으로 모델의 값을 바인딩 해주는 양방향 디렉티브이다.. ex) {{text}} 벤츠, bmw, 아우디, 페라리, 람보르기니 선택한 자동차: 2021. 8. 1. vue.js - 4. v-text, v-html 디렉티브 ●디렉티브란 - 디렉티브는 번역하면 '지시문'이라는 뜻으로 vue의 문법이라고 생각하면 된다. ●샘플소스 {{text}} {{text2}} ●v-text 디렉티브 - 자바스크립트의 innerText 와 같은 역할을 한다. - html태그가 적용되지 않고 문자열이 그대로 보여진다. ●v-html 디렉티브 - 자바스크립트의 innerHTML 과 같은 역할을 한다. - html태그가 적용된 화면이 보여진다. 2021. 8. 1. vue.js - 3.vue기본구조(MVVM) ●샘플예제 ex)소스 {{text}} ●vue,js 기본구조(MVVM) - 모델 객체는 데이터를 가지고 있다. - view 안에서는 {{ }} 와 같은 표현식을 사용하여 HTML DOM에 데이터를 랜더링한다. 콧수염 모양을 닮았다고 하여 콧수염 표현식(Mustache Expresstion)이라고 부른다. - vue객체(VIewModel객체)는 HTML요소와 모델을 참조하고 있다. vue객체의 el속성은 HTML의 요소(element)를 뜻한다. view의 요소를 바라본다. data속성은 모델 객체를 참조한다. - 모델의 데이터를 변경하면 vue객체를 통해 HTML DOM이 즉시 반영되어 view의 값이 변경된다. 2021. 8. 1. vue.js - 2.Visual Studio Code(VSCode) 한글 언어설정하기 1.Visual Studio Code 상당>View>Command Palette 클릭 2.display 입력후 'Condigure Display Language' 클릭 3.'Install Additional Languages' 클릭 4.언어 목록중 한국어 install 클릭 5. 목록중 한국어 못찾겠으면 korea 입력 6. 설치완료후 restart 클릭 8.완료 2021. 8. 1. vue.js - 1.개발환경세팅 ●vue.js - 웹 화면 개발에 최적화된 자바스크립트 프레임워크이다. Angular, React에 비해 배우기 쉽고 진입장벽이 낮아 최근에 빠르게 뜨고 있는 프레임워크이다. - vue.js는 전형적인 MVVM(Model-View-ViewModel)의 패턴을 따르고 있다. (MVVM패턴은 어플리케이션 로직와 UI의 분리를 위해 설계된 패턴이다.) ●개발환경세팅 -필요한 도구 Node.js 서버측 자바스크립트 플랫폼 npm 앱의 의존성 관리위한 node package manager Visual Studio Code 코드 편집도구 크롬 vue.js devtools 크롬에서 동작하는 vue 테스트툴 Vue-CLI 앱 작성을 위한 틀을 제공 1. Node.js 설치 - https://nodejs.org/ko 접.. 2021. 8. 1. 이전 1 다음 반응형
