'Front-End/VueJs'에 해당되는 글 2건

뷰 플러그인 - axios 사용하기

1. axios 란?

- 동적으로 데이터를 가져오기 위한 라이브러리

- axios 와 vue-ressource 가 있다. axios 가 업데이트가 빠르고 커뮤니티가 활성화 되어 있어 많은 사람들이 추천한다

2. 설치

- npm install --save axios vue-axios

3. 설정

- src/main.js

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' })

4. 사용

- app.vue

<template> <div id="app"> <button @click="fetchPosts">Bring me</button> <div v-for="post in posts"> <h1>{{post.title}}</h1> <p>{{post.body}}</p> </div> </div> </template> <script> export default { name: 'App', data(){ return { posts:[] } }, methods:{ fetchPosts(){ this.axios.get('https://jsonplaceholder.typicode.com/posts') .then((response)=>{ this.posts = response.data }) } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

 뷰 플러그인 - Veux 사용하기

1. Vuex 란?

  - Vue.js의 상태관리 패턴 플러그인.

  - 애플리케이션의 모든 컴포넌트의 글로벌 저장소 역할한다.

  - 여러 컴포넌트가 하나의 데이터를 공유하거나, 수평적인 컴포넌트 간의 데이터 공유시 사용

2. Vuex의 예제

  1) 설치

    - vuex는 vue-cli 에 기본적으로 포함되어 있지 않기 때문에 따로 설치 해야한다.

    npm install --save vuex

  2) 설정

    - src/main.js

    // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state:{ count : 0 }, mutations:{ increment(state){ state.count += 1 }, decrement(state){ state.count -= 1 } } }) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', store, router, components: { App }, template: '<App/>' })  

  3) 사용

    - Counter.vue

      <template> <div> <button @click="increment">증가</button> <button @click="decrement">감소</button> </div> </template> <script> export default { name: "counter", methods:{ increment(){ this.$store.commit('increment') }, decrement(){ this.$store.commit('decrement') } } } </script> <style scoped> </style>  

   - App.vue

      <template> <div id="app"> count : {{ $store.state.count }} <counter/> <counter/> <counter/> </div> </template> <script> import Counter from './components/Counter' export default { name: 'App', components:{ Counter } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>