javascript, framework (68) 썸네일형 리스트형 Step01~04 (html, css 접근, event) Step01_hello p1 p2 p3 p4 p5 대상을 지정할때 $("p").first(), $("p").last() , $("p").eq(2) 같은 방식도 있다. (각각 첫번째, 마지막, 세번째 p) Step02_event 눌러보셈 하나 두울 .on()은 이벤트가 일어났을때의 동작을 설정하기 위한 메소드이다. .val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드이다. A.append to(B)는 A의 값을 B 마지막 부분에 입력해준다. (A,B는 예시이다, 뒤가 아닌 앞에 입력하고 싶다면 .prependTo()가 있다.) step03_example 예시에서 첫번째 상자(mouseout) : 마우스가 닿았다가 지나쳤다. 두번째 상자(mouseover): 마우스가 닿아 있다 세번째 상자:.. 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}; } } 종속된 모델(예시.. 이전 1 2 3 4 5 ··· 9 다음
