개발 (66) 썸네일형 리스트형 [Vuex] Vuex getters란? getters 이해하고 사용하기 getters란? state 값을 접근하는 속성이자, 뷰의 computed()처럼 미리 연산된 값을 접근하는 속성 //store.js state: { num: 10, }, getters: { dobuleNumber(state) { return state.num *2; } } {{ this.$store.getters.doubleNumber }} state: { message: 'hello vue.js!' } {{ this.$store.state.message }} // this.$store.state.message 까지 하면 코드가 많아질수록 번거로울 수 있다. // 헬퍼함수를 쓰게되면 getters로 this.getMeesage 처럼 쉽게 접근 가능하다. [Vue] Vuex state란? state 이해하고 사용하기 state란 여러 컴포넌트 간에 공유할 데이터 뷰의 데이터랑 똑같이 사용하는데, 여러 컴포넌트에 데이터가 공유가 된다는 점이 다르다. //vue data: { message: ‘hello Vue.js’ } //vuex state: { message: ‘hello vue.js!’ } //vue {{ message }} //vuex {{ this.$store.state.message }} 1. 간단한 데이터 사용 store.js에 state코드를 추가한다. Test.vue(실제 사용하는 뷰파일)에서 state를 사용가능하다. 뷰개발자도구에서 확인 가능하다. 2. 배열 사용 store.js state에 배열을 저장한다. TodoList.vue App.vue에서 v-bind:propsdata="todoItems.. [Vue] Vuex 설치 및 처음 사용하기 https://vuex.vuejs.org/installation.html#direct-download-cdn Installation | Vuex Installation Direct Download / CDN https://unpkg.com/vuex@4 Unpkg.com provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/vuex@4.0.0/dist/vuex. vuex.vuejs.org 1. 터미널에서 아래 명령어를 입력하여 설치한다. (라이브러리 버전 명시 해줘야한.. node_modules 폴더 빠르게 삭제 하기 node_modules 파일이 크기 때문에 rm -rf node_modules powershell 터미널 환경에서는 매개 변수 이름 'rf'과(와) 일치하는 매개 변수를 찾을 수 없습니다. 오류가 발생 gitbash 환경에서 명령어를 입력한다. 함수선언식 함수표현식 차이 //function statement 함수 선언식 function sum() { return 10 + 20; } //function expression 함수 표현식 var sum = function() { return 20 + 20; } sum() //40; 함수선언: 변수를 선언할때 var를 사용하는것처럼 함수를 사용할때 function을 선언함 함수표현: 함수를 표현한 문장으로 변수에 저장가능, 해당 변수를 함수처럼 사용 가능하다. var변수를 선언하는것과 마찬가지로, 함수를 선언한 함수표현식은 호이스팅 된다. (브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.) ES5 특징 - 변수 Scope(스코프), Hoisting(호이스팅) 자바나 기타 다른 언어를 하고 자바스크립트를 공부하면 ES5특징에서 헷갈리는 부분들이 있다. ES5 특징 - 변수의 Scope(범위) 기존 자바스크립트(ES5)는 { } 에 상관없이 스코프가 설정됨 자바에서는 for문에서 사용한 i는 보통 for문 {}안에서만 사용이 가능한데, ES5는 for문에서 사용한 i가 전역변수로 설정된다. var sum = 0; for (var i=1; i [jQuery] Dom&Node 관계 / Dom객체 자바스크립트+jQuery 완전정복 스터디 2권 (JQuery 기초와 활용) 스터디 정리 JQuery란 자바스크립트 DOM 작업을 좀더 쉽게 처리할 수 있게 도와주는 라이브러리이다. JQuery를 알기 위해선 자바스크립트 DOM을 먼저 학습해야 한다. 자바스크립트 DOM (Document Object Mode) : 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득 찬 라이브러리 덩어리이다. 노드, 스타일, 속성, 이벤트, 위치 및 크기 등을 다룰 수 있는 다양한 기능이 포함되어 있다. 1. W3C DOM vs 브라우저 DOM DOM은 정의부분(명세서)와 구현부분으로 나누어 진다. 정의 부분인 명세서에는 웹페이지(XML)문서를 조작할 때 지켜야 할 약속이 명시되어 있는 문서일뿐 실제 동작하는 구현 소스코.. [jQuery] 다른 페이지로 이동 할 때 .unload() .unload()는 사용자가 다른 페이지로 이동할때 사용합니다. .on( "unload", handler ) This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an unload event. link 클릭, 페이지 떠날때, 앞으로 가기, 뒤로가기.. 이전 1 2 3 4 5 ··· 9 다음
