Vue JS (15) 썸네일형 리스트형 Vue.js 시작하기 07 - 리스트 렌더링: v-for 사용법 - body - {{ sectionTitle }} input : app1.fruitList.push({fname:'blueberry', color:'purple'}); {{ item.fname }} is {{ item.color }} {{ index+1 }}th item => {{ item.fname }} is {{ item.color }} {{ item.fname }} is {{ item.color }} {{ index+1 }}th item => {{ item.fname }} is {{ item.color }} ---------------------------------------------------- input: app2.person = { firstName: 'Tom', lastName: 'Cru.. Vue.js 시작하기 06 - 조건부 렌더링, v-if, v-if-else, v-show - body - this block occurs error because direcive 'v-else' must be following direcive 'v-if' and this block is not you can see me now hello this is your 2nd msg hello this is your 3rd msg hello this is your 4th msg hello this is your 5th msg ---------------------------------------------------- hello this is your 1st msg input: app2.numVal1 = 5; hello this is your 2nd msg input: app2.numVal2 = 3;.. Vue.js 시작하기 05 - 클래스와 스타일 바인딩 ( html class / 인라인 style 바인딩) - HTML > body - "v-bind:class='t'" and "class='u'" attribute can exist at the same time hello world! ---------------------------------------------------- class defined by obj val! ---------------------------------------------------- input the next command and check class of below line: app3.hasError = true; class defined by computed val! ---------------------------------------------------- setti.. Vue.js 시작하기 04 - computed와 watch ( vs methods) - HTML > body - original msg : {{ msg }} app1.msg = "changed msg"; reversed msg from computed : {{ reversedByComputed }} reversed msg from methods : {{ reversedByMethods() }} ---------------------------------------------------- {{ fullName }} input below line in console and watch logs app2.firstName = 'Tom'; app2.lastName = 'Cruise'; ---------------------------------------------------- yes/no 질문.. Vue.js 시작하기 03 - 템플릿 문법 (보간법, 디렉티브, 동적 전달 인자 넘기기) - HTML > body - message: {{ msg }} input: app1.msg = 'some new msg'; this message is not updated: {{ msg }} ---------------------------------------------------- {{ text4HTML }} this message here disappears ---------------------------------------------------- input: app3.idAfter="someNewId"; ---------------------------------------------------- you can use JavaScript expression {{ numVal * 2 }} {{.. Vue.js 시작하기 02 -인스턴스 (데이터, 메소드, 라이프 사이클) - HTML > body - {{ foo1 }} change {{ foo2 }} change2 - script - // 데이터 객체 var param = { a: 1 } // Vue인스턴스에 데이터 객체를 추가합니다. var vm = new Vue({ data: param }) //try console log // 인스턴스에 있는 속성은 원본 데이터에 있는 값을 반환합니다. vm.a === param.a // => true console.log('vm.a === param.a');// => true console.log(vm.a === param.a);// => true // 인스턴스에 있는 속성값을 변경하면 원본 데이터에도 영향을 미칩니다. vm.a = 2; param.a; // => 2 console.. Vue.js 시작하기 01 - 기초 문법 ( 선언적 렌더링, 조건문과 반복문, 사용자 입력 핸들링, 컴포넌트 등) - HTML > BODY - {{ message }} ---------------------------------------------------- input: app3.seen = false; ---------------------------------------------------- {{ todo.todoItem }} ---------------------------------------------------- {{ message }} 메시지 뒤집기 ---------------------------------------------------- text something below and input: app6.message; {{ message }} ----------------------------.. 이전 1 2 다음