vue.js [Vue.js] vue devtools not detected 해결방법 크롬 브라우저 기준 오른쪽 상단 확장 프로그램에서 vue.js devtools 옵션 더보기 클릭(세로점 세개) -> 확장 프로그램 관리 -> 파일 URL에 대한 엑세스 허용 체크 예시 2.x 버전 압축버전 사용하지 않았을 때 문제 해결되었다는 사람들이 많았다. 어떤 사람은 개발자 도구에서 테마 변경하고 재시작 했을 경우 되었다고 한다.. 저는 cdn 변경으로 해결 되었습니다..... vue.jsvue devtools not detectedvue devtools not detected [백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기 v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페이지에서 사용자가 입력한 데이터(텍스트, 선택값 등등)를 Vue로 읽어오려면 v-model 디렉티브를 사용하면 됩니다. Vue 관점에서 봤을 때 웹 페이지로부터 데이터를 읽어오기도... vue.js프론트엔드vue.js [Vue2] Antd으로 custom validator 만들기 Vue2 AntDv 1.7.8 antd는 기본으로 편하게 사용할 수 있는 validator를 제공해준다 Vue.js 에서는 위와 같이 속성값을 주어서 사용하면 된다 antd에서 기본으로 제공하는 type은 다음과 같다 ✏️ Type ⬆️ 이런 형태로 속성값을 입력하면 알아서 입력 중 바로바로 유효성 체크를 해준다 (너무 편해 ...!!) 그러면 이번엔 기본으로 제공해주는 validator 이... FEvue.jsantdFE [백견불여일타/Vue.js] 5장 - 이벤트 처리 이벤트 v-on 지난 장에서는 v-model를 활용해서 페이지에서 데이터를 가져오는 법에 대해 공부했습니다. 이번 시간에는 vue에서 v-on을 활용하여 이벤트 처리하는 법에 대해 공부합니다. v-on 디렉티브는 Vue 메소드를 실행시키는 이벤트 핸들러입니다. 여기서 이벤트란 사용자로부터의 키 입력, 클릭 등의 조작을 의미합니다. 사용자의 조작을 감지하여 특정 메소드를 실행시켜주는 것이 v-... vue.js프론트엔드vue.js [백견불여일타/Vue.js] 6장 - 조건문 & 반복문 4/1부터 Spring framework를 공부를 시작했습니다. 이 얘기를 지금 vue 포스팅하는 시점에 왜 언급을 하냐면은, 곧 vue를 활용하여 to do list와 게시판 토이 프로젝틀를 할 예정이기 때문입니다. 프론트엔드 공부하는 겸에 spring으로 백 단을 구축해놓으면 더 간지날 것 같습니다. 조건 반복 v-if v-for 이번시간에는 Vue를 활용하여 조건을 만족했을 때 태그가 ... vue.js프론트엔드vue.js 22. 모르는 문법이 나왔을 때 공식 문서를 보고 해결하는 방법 캡틴판교 장기효님의 를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. IDE: Visual Studio Code 크롬 뷰 개발자 도구: Vue.js devtools 어떤 기능을 만들고 싶은데 방법을 모르겠다면? 공식 문서에 접속하여 키워드로 검색하고 예시를 찾아서 적용해본다. 이것이 정확하고 빠른 방법이다. html의 input 태그는 작성할 수 있다. Vue가 관리하... vue.jsvue.js Vue - 프로젝트 회고 (2) (1) 에 이어서 이번 포스팅에서는 프로젝트에서 사용했던 Flux 패턴에 대해서 소개하고자 한다. 그를 위해 사전지식부터 차근차근 정리하려고 한다. Vue 나 React 의 경우 무수히 많은 컴포넌트로 구성되어 있다. 데이터를 관리하기 위한 상태관리 패턴인 Vuex는 React의 Flux 패턴에서 영향을 받았다고 한다. MVC 패턴의 복잡한 데이터 흐름의 문제를 해결하는 개발패턴이다. 1. ... vue.jsvue.js 💡인스턴스 & 컴포넌트 method : 화면 로직 제어와 관계된 메서드를 정의하는 속성, 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가 할 수 있다. created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성 : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계, data속성과 metods속성이 아직 정의되어 있지 않고, 돔과 같은 ... TILvue.jsTIL 7. 인스턴스와 생성자 함수 캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. IDE: Visual Studio Code 크롬 뷰 개발자 도구: 왜 뷰를 생성자 함수로 만들까? 뷰의 생성자를 이해하기 위해 간단한 생성자 함수를 만들어보자. 함수 정의 함수 이름은 Persion name과 job이라는 속성 2가지를 갖도록 작성하자. 개발자 도구 Co... vue.jsvue.js [ Vue.js ] what about Vue.js? ( using Vscode ) 🎶 Vetur - .vue 하일라이팅 형태 플러그인 npm install -g @vue/cli === npm i -g @vue/cli vue upgrade --next - vue.js project upgrade cli version # terminal in Vscode vue create 'projectName' - 프로젝트 생성... workvue.jsvue.js 4. Reactivity 코드 라이브러리화 하기 캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. 지난 포스팅에서 객체의 속성을 변경하는 Object.defineProperty()를 작성했다. 이를 라이브러리화 한 것을 기록한다. 이제 init()이라는 함수가 정의 되었다. init()함수의 기능은 2가지다. viewModel 객체의 str의 접근했을 때의 동작과 할... vue.jsvue.js Vue.js 라이브러리 추천 목록 유용하게 사용하는 Vue 라이브러리 화면 우측의 Scroll의 경우 시스템 Scroll 디자인을 사용해도 디자인상 큰 문제는 없지만, 화면 안쪽에 overflow을 넣어 만든 element에 시스템 Scroll이 생길 경우 디자인을 해치는 경우가 많았다. 이럴 경우 Scroll의 디자인을 커스텀해서 넣어줄 경우 사이트의 완성도가 올라간다. vue bar 적용 전 후, 확실히 완성도가 올라간걸... 프론트엔드라이브러리vue.jsvue.js [Vue.js] 2. 첫 번째 프로젝트 node v12, npm v6 with IntellJ 이를 크롬에서 띄워보면 Hello Vue.js! 문구가 보이게 된다. 위 그림에서 보이는 Root는 최상위 컴포넌트로, 뷰 어플리케이션을 실행할 때 가장 근간이 되는 컴포넌트이자 최상위 컴포넌트를 의미한다. 결론적으로는, 화면상 표시된 'Hello Vue.js!' 문구는 최상위 컴포넌트(Root)의 data 속성인 message의 값이다.... vue.jsvue.js 6. 인스턴스 소개 캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. IDE: Visual Studio Code 크롬 뷰 개발자 도구: 이 코드는 Vue앱을 시작하는 첫 단계다. Vue() 함수로 새 Vue인스턴스를 만드는 것이다. 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드다. app이라는 id를 가진 div를 만들었다. Vue... vue.jsvue.js vue.js__Vue Router 대체로 경로는 router > index.vue파일에 몰아놓고, 각 페이지마다 필요한 router-link to='' 넣어 필요한 버튼 만들고 어짜피 화면 변환은 페이지 하나에서 router-view해주면 됨. : router 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식. ( vue공식 홈페이지 docs에도 없고, 거... 네임드 뷰vue네스티드 라우터router라우터front endvue.jsfront end
[Vue.js] vue devtools not detected 해결방법 크롬 브라우저 기준 오른쪽 상단 확장 프로그램에서 vue.js devtools 옵션 더보기 클릭(세로점 세개) -> 확장 프로그램 관리 -> 파일 URL에 대한 엑세스 허용 체크 예시 2.x 버전 압축버전 사용하지 않았을 때 문제 해결되었다는 사람들이 많았다. 어떤 사람은 개발자 도구에서 테마 변경하고 재시작 했을 경우 되었다고 한다.. 저는 cdn 변경으로 해결 되었습니다..... vue.jsvue devtools not detectedvue devtools not detected [백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기 v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페이지에서 사용자가 입력한 데이터(텍스트, 선택값 등등)를 Vue로 읽어오려면 v-model 디렉티브를 사용하면 됩니다. Vue 관점에서 봤을 때 웹 페이지로부터 데이터를 읽어오기도... vue.js프론트엔드vue.js [Vue2] Antd으로 custom validator 만들기 Vue2 AntDv 1.7.8 antd는 기본으로 편하게 사용할 수 있는 validator를 제공해준다 Vue.js 에서는 위와 같이 속성값을 주어서 사용하면 된다 antd에서 기본으로 제공하는 type은 다음과 같다 ✏️ Type ⬆️ 이런 형태로 속성값을 입력하면 알아서 입력 중 바로바로 유효성 체크를 해준다 (너무 편해 ...!!) 그러면 이번엔 기본으로 제공해주는 validator 이... FEvue.jsantdFE [백견불여일타/Vue.js] 5장 - 이벤트 처리 이벤트 v-on 지난 장에서는 v-model를 활용해서 페이지에서 데이터를 가져오는 법에 대해 공부했습니다. 이번 시간에는 vue에서 v-on을 활용하여 이벤트 처리하는 법에 대해 공부합니다. v-on 디렉티브는 Vue 메소드를 실행시키는 이벤트 핸들러입니다. 여기서 이벤트란 사용자로부터의 키 입력, 클릭 등의 조작을 의미합니다. 사용자의 조작을 감지하여 특정 메소드를 실행시켜주는 것이 v-... vue.js프론트엔드vue.js [백견불여일타/Vue.js] 6장 - 조건문 & 반복문 4/1부터 Spring framework를 공부를 시작했습니다. 이 얘기를 지금 vue 포스팅하는 시점에 왜 언급을 하냐면은, 곧 vue를 활용하여 to do list와 게시판 토이 프로젝틀를 할 예정이기 때문입니다. 프론트엔드 공부하는 겸에 spring으로 백 단을 구축해놓으면 더 간지날 것 같습니다. 조건 반복 v-if v-for 이번시간에는 Vue를 활용하여 조건을 만족했을 때 태그가 ... vue.js프론트엔드vue.js 22. 모르는 문법이 나왔을 때 공식 문서를 보고 해결하는 방법 캡틴판교 장기효님의 를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. IDE: Visual Studio Code 크롬 뷰 개발자 도구: Vue.js devtools 어떤 기능을 만들고 싶은데 방법을 모르겠다면? 공식 문서에 접속하여 키워드로 검색하고 예시를 찾아서 적용해본다. 이것이 정확하고 빠른 방법이다. html의 input 태그는 작성할 수 있다. Vue가 관리하... vue.jsvue.js Vue - 프로젝트 회고 (2) (1) 에 이어서 이번 포스팅에서는 프로젝트에서 사용했던 Flux 패턴에 대해서 소개하고자 한다. 그를 위해 사전지식부터 차근차근 정리하려고 한다. Vue 나 React 의 경우 무수히 많은 컴포넌트로 구성되어 있다. 데이터를 관리하기 위한 상태관리 패턴인 Vuex는 React의 Flux 패턴에서 영향을 받았다고 한다. MVC 패턴의 복잡한 데이터 흐름의 문제를 해결하는 개발패턴이다. 1. ... vue.jsvue.js 💡인스턴스 & 컴포넌트 method : 화면 로직 제어와 관계된 메서드를 정의하는 속성, 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가 할 수 있다. created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성 : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계, data속성과 metods속성이 아직 정의되어 있지 않고, 돔과 같은 ... TILvue.jsTIL 7. 인스턴스와 생성자 함수 캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. IDE: Visual Studio Code 크롬 뷰 개발자 도구: 왜 뷰를 생성자 함수로 만들까? 뷰의 생성자를 이해하기 위해 간단한 생성자 함수를 만들어보자. 함수 정의 함수 이름은 Persion name과 job이라는 속성 2가지를 갖도록 작성하자. 개발자 도구 Co... vue.jsvue.js [ Vue.js ] what about Vue.js? ( using Vscode ) 🎶 Vetur - .vue 하일라이팅 형태 플러그인 npm install -g @vue/cli === npm i -g @vue/cli vue upgrade --next - vue.js project upgrade cli version # terminal in Vscode vue create 'projectName' - 프로젝트 생성... workvue.jsvue.js 4. Reactivity 코드 라이브러리화 하기 캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. 지난 포스팅에서 객체의 속성을 변경하는 Object.defineProperty()를 작성했다. 이를 라이브러리화 한 것을 기록한다. 이제 init()이라는 함수가 정의 되었다. init()함수의 기능은 2가지다. viewModel 객체의 str의 접근했을 때의 동작과 할... vue.jsvue.js Vue.js 라이브러리 추천 목록 유용하게 사용하는 Vue 라이브러리 화면 우측의 Scroll의 경우 시스템 Scroll 디자인을 사용해도 디자인상 큰 문제는 없지만, 화면 안쪽에 overflow을 넣어 만든 element에 시스템 Scroll이 생길 경우 디자인을 해치는 경우가 많았다. 이럴 경우 Scroll의 디자인을 커스텀해서 넣어줄 경우 사이트의 완성도가 올라간다. vue bar 적용 전 후, 확실히 완성도가 올라간걸... 프론트엔드라이브러리vue.jsvue.js [Vue.js] 2. 첫 번째 프로젝트 node v12, npm v6 with IntellJ 이를 크롬에서 띄워보면 Hello Vue.js! 문구가 보이게 된다. 위 그림에서 보이는 Root는 최상위 컴포넌트로, 뷰 어플리케이션을 실행할 때 가장 근간이 되는 컴포넌트이자 최상위 컴포넌트를 의미한다. 결론적으로는, 화면상 표시된 'Hello Vue.js!' 문구는 최상위 컴포넌트(Root)의 data 속성인 message의 값이다.... vue.jsvue.js 6. 인스턴스 소개 캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다. 매일 20분 야금야금 Vue.js 화이팅. IDE: Visual Studio Code 크롬 뷰 개발자 도구: 이 코드는 Vue앱을 시작하는 첫 단계다. Vue() 함수로 새 Vue인스턴스를 만드는 것이다. 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드다. app이라는 id를 가진 div를 만들었다. Vue... vue.jsvue.js vue.js__Vue Router 대체로 경로는 router > index.vue파일에 몰아놓고, 각 페이지마다 필요한 router-link to='' 넣어 필요한 버튼 만들고 어짜피 화면 변환은 페이지 하나에서 router-view해주면 됨. : router 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식. ( vue공식 홈페이지 docs에도 없고, 거... 네임드 뷰vue네스티드 라우터router라우터front endvue.jsfront end