차근차근/JAVA Script 112

[Vue.js] Vue.js란 (3) - Vue 문법

디렉티브 데이터 바인딩의 가장 기본적인 형태는 이중괄호를 사용합니다. {{ }} {{ msg }} {{ }} 내부에 자바스크립트 표현식의 모든 기능 지원합니다. (하나의 단일 표현식만 가능) v- 접두사 사용 접두사는 Vue 고유의 특성을 식별하기 위한 시각적 역할을 합니다. 렌더링 된 DOM에 특수한 반응형 동작을 주기위해 사용합니다. 태그에 속성을 지정하는 방식으로 v-on v-model v-for v-bind v-if v-cloak 등을 사용할 수 있습니다. 수식어 수식어는 .으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다. // .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 // v-on 디렉티브에게 알려줍니..

[Vue.js] Vue.js란 (2)

호환성 Vue는 기본적으로 JavaScript 객체를 Vue 인스턴스 data 옵션으로 정의할 때 모든 속성들을 Object.defineProperty을 사용하여 Getter/Setter로 변환합니다. 이것은 ES5에서 새로 등장한 기능으로 하위호환이 불가능하기 때문에 Vue.js는 IE8 이하를 지원하지 않습니다. 특징 MVVM 패턴을 사용합니다. 더보기 MVVM 패턴 Mode - View - ViewModel의 줄임말으로 로직과 UI의 분리를 위해 설계된 패턴입니다. 웹페이지는 돔과 자바스크립트로 만들어지게 되는데 돔이 View 역할을 하고, 자바스크립트가 Model 역할을 합니다. 뷰모델이 없는 경우에는 직접 모델과 뷰를 연결해야 합니다. 그러나 뷰모델이 중간에서 연결해 주는 것이 MVVM 모델입니..

[Vue.js] Vue.js란 (1)

더보기 일단 나는..개발공백이 4년이 있는 백엔드 개발자이다. 서버나 디비를 만들고 운영도 했었지만 백엔드는 스프링이었고 화면단은 jsp였다. 공백기 동안 vue.js를 배웠는데..경험해봤는데.. 배운 그대로 비주얼 스튜디오를 설치하고 뷰티파이를 통해서만 개발을 해야 한다고 생각했었다. 다시 일을 하게 되었는데 jsp안에 vue가 있는 것을 보았다.. 왜 이 생각을 못했지..하는 생각과 동시에 내 공백이 너무 길었구나 하는 생각이 들었다.. 잠깐 찾아보니..jsp에서 vue를 쓰는 것조차 트랜드가 아니라고 말하고 있는 것 같다. 언제 따라 잡을 수 있을까.. vue.js 에 대해 정리를 하고 싶었는데. 이 블로그에 글을 쓸 때 자바스크립트 메뉴를 선택해야 하는건지 vue.js메뉴를 따로 만들어야 하는건지..

History API

if(typeof(history.pushState) == 'function'){ history.replaceState({}, null, location.pathname); } 새로나온 것도 아닌데..이제서야 처음봤다... - typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다. 페이지를 리로드하지 않고 페이지 주소만 변경할 때 사용합니다. 앞서 말했듯이 html5 지원 브라우저에서만 사용 가능하기 때문에, 지원하지 않거나 ie10 미만 버전에서는 열심히 에러를 뿜어줄 것이다. 실제 페이지를 로드하는 것은 아니기 때문에 실제 문서 존재 여부는 중요하지 않다. 물론 새로고침 하면 페이지를 찾을 수 없다고 에러가 뿜뿜! 뒤로가기를 하면 원래 문서가 뜰 것입니다.(예제페이지) ajax..

화면 맨 위로 이동 + a태그에 js연결할 때 화면 맨 위로 이동x

원래 HTML 코딩할 때 주던 방식은 맨 위로 간단히 이렇게 했었다. 그러나, 저렇게 써 주면 접근성 오류는 물론이고 웹표준 프로그램 돌리면 링크 오류 뜬다.... 이 경우 주소의 제일 뒤에 #이 붙는다. http:/어쩌고../# < 이런식으로 이 # 기호는 추후 파라미터오류가 나는 경우가 있어서 비추!! 방법1 ] 맨 위로 위와 같이 하면 동작 잘된다. 그러나 위 방법으로 쓰는 것은 태그에 #기호를 쓰기 때문에 웹표준 오류다. 만약 이미지로 top 버튼을 준다면 아래와 같이 해보자 방법2 ] TOP div가 아니라 span이나 td 등을 사용해도 되고 cursor:pointer 는 마우스 커서를 손가락 모양으로 변경해 주는 스크립트 onclick 이벤트에 window.scrollTo 를 사용해서 (x,..

[Javascript] PC, MOBILE 구분하기 (Navigator 사용)

https://thingsthis.tistory.com/162 [Javascript] PC, MOBILE 구분하기 (Navigator 사용) 최근 개발 중 PC, MOBILE 을 구분하여 처리하는 로직에서 오류가 발생하였습니다. 결제 모듈을 호출하는 부분에서 PC 모듈을 호출해야 하지만 MOBILE 모듈을 호출하여 발생한 문제였습니다. 지금까지 thingsthis.tistory.com Win16 : 16비트 윈도위기반 컴퓨터 Win32 : 32비트 윈도위기반 컴퓨터 Win64 : 64비트 윈도위기반 컴퓨터 MacIntel : 인텔CPU 를 가진 매킨토시 컴퓨터 Mac : 매킨토시컴퓨터 var filter = "win16|win32|win64|mac|macintel"; var vWebType = ""; i..

JSON-P 사용하기

다른 도메인에 있는 결과 값을 읽어오려는데 이런 에러가 난다. Failed to load URL : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.jquery.js:2 XHR finished loading: POST "URL". 기존에는 해당 사이트에 Access-Control-Allow-Origin설정을 했었는데..계속 사용을 해야 하는 부분인데 매번 각 사이트 마다 요청을 할 수는 없으니까.내가 다른 방법을 찾아야 했다. 그래서 찾은게 jsonp이다.. 사용방법은 ajax랑 비슷한데type은 GET..

일치하는 글자에 태크넣기..

졸려서 그랬나 쉬울 것 같았는데 시간이 너무 오래 걸렸다. 하려던 것은 김영숙 010-1111-1111김정희 010-2222-2222김미정 010-3333-3333 이렇게 있고 , 내가 만일 '김'으로 검색을 했다면 목록에서김영숙 010-1111-1111김정희 010-2222-2222김미정 010-3333-3333 이렇게 보이게. --------------------------------검색어가 '사과'이고 사과김영숙 010-1111-1111김사과정희 010-2222-2222김미사과정 010-3333-3333목록이 이렇게 있다면 사과김영숙 010-1111-1111김사과정희 010-2222-2222김미정사과 010-3333-3333이렇게 보이게. function SearchResult(returnValue..

네이버 지도 api v3 적용

정보 창 표시하기https://navermaps.github.io/maps.js/docs/tutorial-1-infowindow-simple.example.html 정보 창 표시하기정보창을 표시하는 기본 예제입니다. var HOME_PATH = window.HOME_PATH || '.'; var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147), map = new naver.maps.Map('map', { center: cityhall.destinationPoint(0, 500), zoom: 10 }), marker = new naver.maps.Marker({ map: map, position: cityhall }); var contentString..

JavaScript Strings

http://www.w3schools.com/js/js_strings.asp JavaScript Strings« PreviousNext Chapter »JavaScript strings are used for storing and manipulating text.JavaScript StringsA JavaScript string simply stores a series of characters like "John Doe".A string can be any text inside quotes. You can use single or double quotes:문자열을 나타낼 때 , 작은 따옴표 , 큰 따옴표 둘다 사용가능.Examplevar carname = "Volvo XC60"; var carname =..

반응형