Vue.js
-
[Vue] Vue js 비동기통기(axios) 샘플코드Vue.js 2022. 6. 25. 15:19
axios 설치하기 프로잭트폴더에서 아래의 명령어로 설치한다. npm install axios main.js에 Vue.prototype.$axios = axios 를 미리 등록하면 사용하는 페이지에서 this키워드로 axios에 접근할 수 있다. 굳이 선언을 안해도 상관없다. main.js import Vue from 'vue' import App from './App.vue' import router from './router' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' import axios from "axios"; // Import Bootstrap an BootstrapVue CSS files (order is important) //..
-
[기초]#6 Vue js 기초 문법Vue.js 2022. 6. 11. 22:35
vue 버전 4.5.12 1.데이터 표시 1. 호랑이 : {{animal}} 2. 호랑이 (v-text) : 3. 호랑이 (v-html) : 결과 2. html 폼 타입 지정 naver 결과 3. 클래스 지정 클래스 하나지정 다중 클래스 지정 결과 4. html 입력 폼 생성 및 데이터 바인딩 input 입력 내용 : {{input_value}} textarea 입력내용 : {{textarea_value}} checkbox 선택 value : {{checkbox_value}} checkbox 선택여부 : {{checkbox_check}} radio value : {{radio_value}} default value1 value2 select value : {{select_value}} 결과 5. 메소드 ..
-
[기초]#5 Vue의 Router 라우터란? (설치,설정,데이터 IN/OUT)Vue.js 2022. 6. 11. 20:46
뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다. 페이지 이동하는 기능을 뷰 라우터로 구현할 수 있다. 이미지로 나타내면.. 주요 기능 Nested route/view mapping Modular, component-based router con Route params, query, wildcards View transition effects powered by Vue.js transition system Fine-grained navigation control Links with automatic active CSS classes HTML5 history mode or hash mode, with auto-fallback in IE9 Customizab..
-
[기초]#4 Vue의 컴포넌트란?Vue.js 2020. 6. 3. 19:48
컴포넌트 등록의 방법은 두 가지가 있다. 전역 컴포넌트, 지역 컴포넌트 두 가지로 용도에 따라 사용할 수 있다. 지역(Local) 컴포넌트는 정해진 특정 구역에서만 사용할 수 있는 컴포넌트이고, 전역(Global) 컴포넌트는 모든 인스턴스에서 공통으로 사용할 수 있는 컴포넌트이다. 전역 컴포넌트 등록 Vue.component('컴포넌트 명', { //컴포넌트 속성 }); Vue 라이브러리를 로딩하고 나면 Vue라는 전역 변수가 생성된다. 해당 변수에 전역 컴포넌트를 등록 할 수 있다. 모든 Vue 인스턴스에서는 해당 컴포넌트에 접근하여 사용할 수 있다. 컴포넌트 등록 등록한 my-component가 등록되었고 template이라는 속성을 가지고 있다. (template는 추후에 설명) id가 app인 요..
-
[기초]#2 Vue.js가 무엇인가?Vue.js 2020. 6. 3. 18:20
Vue.js 는 웹 페이지 화면을 개발하기 위한 Front-end Framework 위 그림은 Vue의 창시자인 에반 유가 2017년 Vue.js 컨퍼런스에서 발표한 내용 중에 있는 그림이다. Vue 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다는 의미이다. 그래서 Vue를 점진적인 프레임워크라고 표현한다. 1. Vue 의 장점 첫째, 쉽다. 예) html {{ message }} cdn 선언 javascript new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); ..
-
[기초]#1 Vue.js 개발환경 설정하기 (CDN, Mac 환경(vsCode)Vue.js 2020. 6. 2. 19:16
Vue.js 의 초기 개발환경은 그다지 어려운 설정이 없다. Angular 상위 버전(2 이상)에서는 Node.js 가 필수이지만 Vue.js는 일반 Javascript 라이브러리처럼 사용할 수 있고, Node.js로 프로젝트를 구성할 수도 있다. 간단한 개발 프로젝트에서는 텍스트 에디터와 대부분 사용하는 브라우저 Chrome에서 개발자 도구 설치만 하면 개발 할 수 있다. cdn주소로 vue.js를 삽입한다. 1. Hello Vue.js! {{ message }} 출력 결과 Hello Vue.js Start! Hello Vue.js Start! 2. Vue 개발자 도구 설치 및 사용방법 Chrome 웹 스토어 에서 vue를 검색, 디버깅 툴 설치 Vue 플러그인 설치후 > 크롬 > 도구 더보기 > 이 ..