vue – v-html 사용 시 css 스타일 적용
v-html을 사용해서 문자열 변수에 포함된 태그에 css 스타일을 적용하려고 했는데 정상적으로 스타일이 적용되지 않았다. 다음과 같은 옵션을 사용해서 해결할 수 있다. 예제 var html_str = "Hello <mark>Example</mark> World" 위와 같은…
v-html을 사용해서 문자열 변수에 포함된 태그에 css 스타일을 적용하려고 했는데 정상적으로 스타일이 적용되지 않았다. 다음과 같은 옵션을 사용해서 해결할 수 있다. 예제 var html_str = "Hello <mark>Example</mark> World" 위와 같은…
프로젝트 생성 vue create my-app cd my-app vue add vuetify npm install --save axios my-app 프로젝트 디렉토리를 생성하고 vuetify를 추가한다. 프로젝트 실행 npm run serve 웹페이지 접속 DONE Compiled successfully…
vuex에 대해 잘 정리된 예제가 있어 정리한다. Vue 프로젝트 생성 vue 명령을 이용해 Manual 설정으로 프로젝트를 생성한다. 추가 패키지로 Babel, Router, Vuex, CSS Pre-processors, Linter를 선택했다. $ vue create vuex_example…
vue.js 에서 입력값을 받아 해당 입력 값을 GraphQL 쿼리 인자로 넣어서 데이터를 가져오고 싶을 때가 있다. 예를들면, 영어 사전 검색을 하는데 smart, login과 같은 단어가 포함된 결과물을 얻고 싶을 때…
Axios를 이용하여 XML 데이터를 get하고 받은 데이터를 다시 JSON 포멧으로 변경하여 리스트로 출력하는 방법에 대해 포스트 하겠다. Vue 프로젝트 생성 및 패키지 설치 먼저 예제에 사용할 신규 프로젝트 디렉토리를 생성한다.…
https://jsfiddle.net/ 에 접속해서 바로 vue.js를 테스트 해보는 것이 가능하다. jsfiddle 사이트를 접속하면 기본적으로 HTML, Javascript, CSS 세개의 컴포넌트로 나누어진 Editor를 볼 수 있다. 해당 Editor에 다음과 같이 입력하면 바로 hello…
작업 디렉토리 생성 $ mkdir example 프론트엔드와 백엔드 작업을 하게 될 작업디렉토리를 생성한다. Frontend 작업디렉토리 생성 및 front 서버 실행 $ npm install -g yarn $ npm install -g @vue/cli…
Vue.js 개념 정리를 위한 글들 vue.js 공식 가이드왜 43%의 프론트엔드 개발자들은 Vue.js를 배우고 싶어하나?Vue.js 입문서 - 프론트엔드 개발자를 위한Vue 인스턴스템플릿문법1[Vue.JS 2.0] 소개 및 시작하기[To-Do 앱]Vue.js 와 Node.js를 이용해 웹 앱…
vue-cli 설치 vue-cli는 vue.js 프로젝트를 생성하고 관리할 수 있는 패키지다. 해당 패키지를 설치한다. $ npm install vue-cli -g vue.js 프로젝트 생성 vue 명령어를 이용해 간단한 프로젝트를 생성하여 테스트해보자. vue 명령어의…
크롬 확장 프로그램을 설치 할 수 있는 링크 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ko 확장 프로그램을 설치하면 위와 같이 크롬 툴바에 vue devtools 아이콘이 생성된 것을 볼 수 있다. vue.js로 된 사이트에 접속하여 F12 키를…