javascript, framework/vue (9) 썸네일형 리스트형 Step10_Ajax Step10_Ajax ajax 요청을 통해서 받아온 데이터 사용하기 페이지 전환없이 서버에 요청하는것을 ajax 라고 생각하면 된다. 글 목록 받아오기 번호 작성자 제목 {{tmp.num}} {{tmp.writer}} {{tmp.title}} Step10_Ajax2 (클라이언트 사이드 렌더링) ajax 요청을 통해서 받아온 데이터 사용하기 페이지 전환없이 서버에 요청하는것을 ajax 라고 생각하면 된다. 번호 작성자 제목 {{tmp.num}} {{tmp.writer}} {{tmp.title}} 페이지 소스를 보면 html이 완성되지 않은 상태로 온다. javascript로 완성시킨다. Step10_example (서버 사이드 렌더링) 글목록 입니다.(서버 사이드 렌더링) 번호 작성자 제목 ${tmp.nu.. Step09_ref Step09_ref ref 를 이용해서 문서 객체의 참조값 얻어내기 눌러보셈 Step08_eventEmit Step08_eventEmit 자식 component 에서 발생하는 이벤트 this.$emit("이벤트명", 전달할 data) Step08_eventEmit2 event emit 예제 splice();에 대한 정보는 아래의 링크를 참고하면 좋다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice Step08_eventEmit3 event emit 예제 Step07_component Step07_component component 정의하고 사용하기 input에 입력한 텍스트가 5번째 상자에 입력된다. Step07_component2 component 사용예제 친구 목록 입니다. 동물 친구 목록 입니다. data는 부모 component 로부터 받아서 자식 component로 전달하였다. `을 사용해서 html양식을 쉽게 작성하였다. Step07_component3 component 테스트 오늘의 인사 : {{greet}} 오늘의 인사 : {{greet}} 오늘의 인사 : {{greet}} component 정의하기 /* 재사용 가능한 컴포넌트를 전역으로 정의하기 Vue.component("컴포넌트 이름", {컴포넌트 데이터}); */ Vue.component("my-component.. vue 사용 예시 (signup_form, 회원가입) 기존 signup_form 을 vue를 사용하여 signup_form2로 작성하였다. signup_form (기존 폼) 회원 가입 폼 입니다. 아이디 영문자 소문자로 시작하고 5글자~10글자 이내로 입력하세요 사용할 수 없는 아이디 입니다. 비밀번호 특수 문자를 하나 이상 조합하세요. 비밀 번호를 확인 하세요 비밀번호 확인 이메일 이메일 형식에 맞게 입력하세요. 가입 signup_form2 (vue 사용) 회원 가입 폼 입니다. 아이디 영문자 소문자로 시작하고 5글자~10글자 이내로 입력하세요 사용할 수 없는 아이디 입니다. 비밀번호 특수 문자를 하나 이상 조합하세요. 비밀 번호를 확인 하세요 비밀번호 확인 이메일 이메일 형식에 맞게 입력하세요. 가입 Step04~06(style, if, for) Step04_style vue js 에서 css 조작하기 Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, aperiam minima autem quae commodi ab laborum ad. Accusamus nulla, error commodi sed dolor a! Numquam atque tempore porro quos illo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, placeat aliquam maxime tempora earum illo porro sapiente numquam soluta est temporibus, rem mollitia magni co.. Step03_class Step03_class class 제어 하기 버튼 Vue 버튼 파란색 버튼 큰 버튼 Vue 버튼 v-bind:class 에 object 형식으로 class를 추가, 제거하는 코드를 작성한다. : 뒤에 나온 값이 (예시에서는 isPrimary, isLg) true이면 class가 추가되고 false이면 제거된다. 예시 코드에서 'btn-primary'에 ''를 붙인 이유는 -가 연산자기 때문에 -도 문자열로 사용되게 하기 위함이다. Step03_class2 class 제어 하기 버튼 Vue 버튼 파란색 버튼 큰 버튼 computed:{ classObject:function(){ return {'btn-primary':this.isPrimary, 'btn-lg':this.isLg}; } } 종속된 모델(예시.. Step02_model (v-model) Step02_model v-model 사용하기 {{msg}} 모든 value들은 초기값을 미리 지정해야 한다. {{msg}} value를 표현하기 위한 두가지 방법이다. Step02_model2 v-model 사용하기2 선택 라면 김밥 떡복기 msg : {{msg}} isChecked : {{isChecked}} lunch : {{lunch}} comment : {{comment}} isRun : {{isRun}} 여러 폼태그를 vue로 관리, 표현하는 방법이다. checkbox는 값이 boolean type으로 관리되는데 이를 변경하고 싶다면 true-value, false-value를 활용하여 원하는 문자열 값을 적어 관리하면 된다. 이전 1 2 다음
