Nayha

vue router link 종류 정리 

퍼블에서  a href 

<router-link :to="{ name: 'LoginBackOffice'}"> 이동</router-link>

button 으로 주었을때

router.push({name: 'LoginBackOffice'})" 

Js 파일 

import {router} from "./router" 

router.push({name: 'LoginBackOffice'})  // path /login/Login

vue el-checkbox @click 안먹음  @change 로 이벤트..

<el-checkbox true-label="Y" false-label="N" v-model="chkSelectAll" @change="toggleSelect()"><strong>전체동의1</strong></el-checkbox>

190610 ㅎㅎ 삽질기록 끝

export default {

	data() {
		return{
			timeCounter : 180, //3분
			resTimeData : ''
		}
	}
	create(){
		//3분 유효 타이머 시작 
		this.start()
	}
	methods: {
		start(){
			// 1초에 한번씩 start 호출
			this.polling = setInterval( () =>{
				timeCounter-- //1찍 감소
				resTimeData = this.preTime()
				if (this.timeCounter <= 0) this.timeStop()
			},1000)
		},
		// 시간 형식으로 변환 리턴
		prettyTime() {
		  let time = this.timeCounter / 60
		  let minutes = parseInt(time)
		  let secondes = Math.round((time - minutes) * 60)
		  return this.pad(minutes, 2) + ":" + this.pad(secondes, 2)
		},	
		// 2자리수로 만들어줌 09,08...
		pad(n, width) {
		  n = n + '';
		  return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n
		},		
		timeStop() {
		  clearInterval(this.polling)
		},		
		// 재발행
		smsReset() {
		  clearInterval(this.polling)
		  this.tcounter = 180
		  this.startTime()
		},		
	},
	beforeDestroy() {
		clearInterval(this.polling)
	}
    
}

VUE el-table colspan , rowspan 

뷰에서 그리드 대신 el-table 사용한다 

가로,새로 합치는 방법 

  <el-table 
	:data="rowData"
	:span-method="합쳐라메서드"
	empty-text="데이터없음.">
	
	<el-table-column label="A"  prop="id"></el-table-column>  
	<el-table-column label="B" prop="name"></el-table-column>
	<el-table-column label="C" prop="date"></el-table-column>
	
</el-table>			

합쳐라메서드({ row, column, rowIndex, columnIndex }) {
	// 첫번째 인덱스 && 특정값일때 가로 3줄 colspan
	if( columnIndex === 0 && row.id ==='test' ){
		return [1,3]
	}else if( columnIndex === 1 && row.id ==='test'){
		// 합쳐져서 데이터 columnIndex 밀려서 정확한 데이터 출력 위해
		return [0,0]
	}else if( columnIndex === 2 && row.id ==='test'){
		// 합쳐져서 데이터 columnIndex 밀려서 정확한 데이터 출력 위해
		return [0,0]
	}else{
		// 아래처럼 사용해도 되고 
		// npm install element-ui-table-span-method  설치 후 
		// https://github.com/h69/element-ui-table-span-method 
		// 아래 리턴 사용 해도 깔금하다..
		// return spanRow({ row, column, rowIndex, columnIndex }, this.rowData, this.option)
		if( columnIndex === 0 && row.id !='test' ){		
			//id test가 아닐때 세로 2줄 합치고 싶다
			return {rowspan: 2,colspan: 1}
		}else{
			return {rowspan: 0,colspan: 0}				
		}
	}
}	

  

코드 참조 :

https://codepen.io/JISOU/pen/byEVPP?&editable=true
 

https://element.eleme.io/#/en-US/component/table

아 로컬에서만 계속 테스트 했더니.. 삽질...

우선 파일 4개를 제일 상위에 만든다

.env

VUE_APP_SERVER="base"

.env.local

VUE_APP_SERVER="local"

.env.dev

VUE_APP_SERVER="dev"

.evn.production

VUE_APP_SERVER="prod"

그리고 

package.json

"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve --open --port 8888 --mode dev ",
"production": "vue-cli-service serve --open --port 8888 --mode prod ",

main.js 혹은 main.js 에서 불러오는 아무 파일에서

console.log("server--->", process.env.VUE_APP_SERVER ) 

추가

npm run serve 

로컬에서 해보면 

로그 server---> local 출력 ( base 가 나올줄 알았는데...)

로컬에서 npm run dev  하면

로그  server---> dev 출력

base는 언제 나올랑가~~ 모르겠다 암튼 분리 완성!!!!

하고 나면 쉬운데 개념 잡기 참 어렵어렵

<el-date-picker
type="date" :picker-options="datePickerOptions" 
v-model="endDate"/> 

vue

  data() { 
    return { 
  datePickerOptions: { 
disabledDate: this.disabledDueDate 
  } 
  } 
   
  methods:{ 
      disabledDueDate(time) { 
      return time.getTime() < this.param.startDate 
    }, 
  }

Script

공통 사용되는 셀렉트 박스 (본창 or 부모창)
  

<template>
  <div>
	  <공통select></공통select>
  </div>

</template>
<script>
import 공통셀렉트 from '@/common/Selected'

export default {
  components: {
   공통셀렉트
  }
</script>  

  

검색 초기화 버튼 .. 

Object.assign(this.$data, this.$options.data())

으아 이건 전체가 데이터가 모두 바뀐다..

침착하자 ㅎㅎ

data:{
  indata:'요호1',
  indata2:'요호2',
  indata3:'요호3',
}
감싸고

Object.assign(this.data,this.$options.data().data)

로 부분 초기화 성공

 vue 자식 컴포넌트는 eventbus 전달

부모에게 데이터 전달 하기

// child.vue

import { eBus } from "/js/eBus"
methods: {
	부모에게전달() {
		eBus.$emit('전달키','전달변수 혹은 메세지')
	}
}

// parent.vue

import { eBus } from "/js/eBus"

export default {
  created() {
    // 선택된 하위 컴포넌트 이벤트 버스로 전달 받음
    eventBus.$on('전달키', 전달변수 혹은 메세지 => {
      console.log(JSON.stringify(전달변수 혹은 메세지))
    })
  },
}

반대 부모가 자식에게 전달

// parent.vue
import { eBus } from "/js/eBus"

methods: {
하위전달메서드() {
eBus.$emit( '하위전달키','변수 혹은 메세지') 
}
} 

// child.vue

  created() {
    eventBus.$on('하위전달키', res => {
console.log("부모가 전달한 변수 혹은 메세지", res)
    })
  }

  
eventbus 정리

vue 빈 객체 하나 생성 ( eventBus 객체)
전달하는곳은 $emit('key','message')
받는곳은    $on('key',message)
  
끝

하고 나니 참 쉽네.. 이게 왜케 이해가 안갔을까 ..

괜히 props 로 할려다가 생고생  eventBus 간단함 

vuex 를 쓰라고 권장하던데 공부할깨 참 많타 ㅠ^ㅠ 

단계별 셀렉트 박스 코드

<div id="app">

  <h2>단계 셀렉트박스</h2>
  
  <select v-model="selectedOne" @change="loadData">
    <option v-for="select in selectedOne">{{ select.name }}</option>
  </select>

  <div v-if="selectedOne && !selected2.length"><i>Loading</i></div>
  <select v-if="selected2.length">
    <option v-for="item in selected2">{{ item.label }}</option>
  </select>
  
</div>

const app = new Vue({
  el:'#app',
  data:{
    //options:["people","starships","vehicles","species","planets"],
    selected2:[
        {"label": "AAA-ITEM","name":"AAA"},
        {"label": "BBB-ITEM","name":"BBB"},
        {"label": "CCC-ITEM","name":"CCC"}      ],
    selectedOne:[]
  },
  created () {
    // 뷰가 생성되고 데이터가 이미 감시 되고 있을 때 데이터를 가져온다.
    this.selectedOneload();
  },  
  methods:{
    selectedOneload:function() {
      //데이터 불러오기
      this.selectedOne = [
        {  "label": "AAA","name": "AAA"   },
        {  "label": "BBB","name": "BBB"   },
        {  "label": "CCC","name": "CCC"   }
      ];      
      
    },
    loadData:function(onselect) {
//console.log(onselect.target.value);
				return this.selected2.filter(function(ps) {
          console.log(ps);
					return ps.name === onselect.target.value;
				});        
            
      // 서버 구현 완료시
      //let key = 'name';
      //fetch('https://swapi.co/api/'+this.selectedOne)
      //.then(res=>res.json())
      //.then(res => {
      //  this.items = res.results.map((item) =>{
      //        item.label = item[key];
      //        return item;
      //  });
      // });
    }
  }
});

 참고 :  https://codepen.io/cfjedimaster/pen/mqoaxV

vue-cli-service serve

Usage: vue-cli-service serve [options] [entry]

Options:

  --open    open browser on server start
  --copy    copy url to clipboard on server start
  --mode    specify env mode (default: development)
  --host    specify host (default: 0.0.0.0)
  --port    specify port (default: 8080)
  --https   use https (default: false)
--copy

예)

package.json

  "scripts": {
    "build": "vue-cli-service build",
    "dev": "vue-cli-service serve --open --port 8888 --mode dev ",
    "prd": "vue-cli-service serve --open --port 9999 --mode prd "
  },

axios.js 생성

import axios from "axios"

axios.defaults.baseURL = "https://reqres.in"
axios.defaults.headers.common["Authorization"] = "testcode"
axios.defaults.headers.post["Content-Type"] = "application/json; charset=utf-8"

main.js 에 axios import

import axios from "./axios"

new Vue({
  axios,
  render: h => h(App)
}).$mount("#app")

각 vue 에서

import axios from "axios"

export default {
  data() {
    return {
      email: "jiyu@korea.com",
      password: null
    }
  },
  computed: {
 
  },
  methods: {
    getlogin() {
      axios
        .get("/api/users?page=2")
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
        .then(() => {
          // always executed
        })
    },
    postTest() {
      axios
        .post("/api/register", {
          email: "sydney@fife",
          password: "pistol"
        })
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>