반응형 Front-End/JavaScript28 Vue.js (4) ✔️이벤트※ 작업폴더 : /src/views/2_event 1. click 이벤트/src/views/2_event/EventClickView.vue 생성 click 이벤트 좋아요 {{ counter }} /src/router/index.jsconst routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/event/click', name: 'eventClick', component: () => import(/* webpackChunkName: "event", webpackPrefetch:true */ '../views/2_event/EventClickView.vue') } ] /src/App.vue Home | Click 2. cha.. 2023. 5. 30. Vue.js (3) ✔️데이터 바인딩※ 작업폴더 : /src/views/1_databinding 1. HTML 바인딩/src/views/1_databinding/DataBindingHtmlView.vue 생성 {{ htmlString }} /src/router/index.jsconst routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/databinding/html', name: 'dataBindingHtml', component: () => import(/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingHtmlView.vue') .. 2023. 5. 26. Vue.js (2) 1. 실습 Vue 프로젝트1) project03 프로젝트 생성하기 - 명령프롬프트에서 실행 c:\\나만의경로\\workspace_vue>vue create project03**? Please pick a preset: (Use arrow keys)** vue-basic ([Vue 3] babel, router, vuex, eslint) →사용자가 저장한 템플릿 Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) > Manually select features →선택 (사용자지정) **? Check the features needed for your project:** (Press to select, to toggle all, to invert.. 2023. 5. 26. Vue.js (1) ✔️Vue App 개발 환경 구축 1. Node.js 설치 ※ 설치참조 https://offbyone.tistory.com/441 Javascript로 작성된 프로그램을 운영체제상에서 일반 애플리케이션 프로그램처럼 실행시켜주는 런타임입니다. 서버 프로그램을 작성하는데 많이 사용된다 설치 사이트 https://nodejs.org/ko/ node-v18.12.1-x64.msi 다운후 설치 npm (Node Package Manager) 웹개발에 필요한 모듈들을 npm명령어를 통해 쉽게 다운 및 설치할 수 있으며, node.js를 설치하면 같이 설치된다 각종 웹개발 라이브러리 설치 도우미 node와 npm 설치 버전 확인 (명령프롬프트에서 확인) node -v npm -v 2. Vue 와 Vue CLI (Co.. 2023. 5. 25. jQuery 실습 - 아날로그 시계 만들기 moment.js를 이용하여 아날로그 시계 만들기[결과] 2023. 3. 31. AJAX(1) AJAX (Asynchronous JavaScript and XML) 페이지 전체를 로딩하지 않고 서버에 있는 데이터를 가져와서 페이지 일부분만 바꿀수 있다 문자단위로 통신(비동기 방식) 한개의 페이지에서 요청과 응답이 동시에 이루어짐 JavaScript : XMLHttpRequest 객체 이용 jQuery : $.ajax()함수 이용 $.ajax('actors.json', { //서버에 'actors.json' 파일의 데이터 요청하기 dataType: 'json', //응답 데이터타입 지정 → 지정하지 않으면 txt타입으로 자동지정됨 success: function(data, status, xhr){ alert('SUCCESS') alert(data) //요청에대한 서버의 응답 객체(배열 형태) ale.. 2023. 3. 31. jQuery(2) $(’li’) 에 있는 요소들 중에서 요소에 접근 $(’’) 에 요소를 새로 생성 여러개의 선택자 선택하기 $(’#e_sdate, #e_edate, #e_date_dang, .class, #id, input, span’) each() 함수 → for in 반복문과 같음 let dan = 7; for(let i=1; i{ let idx = $(e.currentTarget).index() let color = $(e.currentTarget).css('background-color') let txt = $(e.currentTarget).text() } append() 함수 현재 대상의 엘리먼트의 자식 앨리먼트들의 맨끝에 새로운 엘리먼트를 추가함 적용되거나, 적용받는 엘리먼트가 닫는 태그가 없을시 자동으로 닫.. 2023. 3. 30. jQuery(1) 자바스크립트 기반 오픈소스 (.js)jQuery, Bootstrap, moment, AJAX, AngularJS, react, vue 등 시각화 : chart.js, d3.js 등 jQuery - JavaScript Library 오픈소스 사용방법1. jQuery 라이브러리를 제공하는 해당사이트 직접 링크2. jQuery 라이브러리를 직접 다운 받아서 사용(추천) [사이트] https://jquery.com/download/ → Download the compressed, production jQuery 3.6.4 → 우클릭 → 다른이름으로 링크 저장 → jquery-3.6.4.min.js 다운 jQuery 시작selectorjQuery를 사용하여 선택하거나 조작할 HTML 요소를 지정하는 문자열cont.. 2023. 3. 29. jQuery 예습 스타크래프트 레이스 클로킹 [결과][코드] 2023. 3. 28. 이전 1 2 3 4 다음 반응형
