[SI에서 살아남기] ElementUI+Vue에 대한 설명과 이해 el-button [1]

Element UI

• View에서 페이지를 꾸며주는데 사용함
• 다양한 이벤트와 속성을 제공한다.
• 예쁘게 잘만들어져있다.

 

사용방법은 Element UI 에서 참고하셨으면 좋겠습니다. 

문서가 전부 영어로 되어있어서 이해하기 힘들었지만 가볍게 정리하도록하겠습니다.

 

el-button

HTML 속성중 input 타입의 button과 button과 같은 역할을 제공한다.

Element UI button Api 확인  를 참고하면 다양한 속성들을 확인 할 수 있다.

 

간단하게 뷰와 연동시켜 예제를 확인해보겠다.

 

<!--bcBtn.vue-->
<template>
      <el-button 
        plain 
        :loading="loading" 
        :disabled="disabled" 
        :type="primary"
        :size="medium"
        :icon="icon"
        @click="btnClicked"
        >
        {{title}}
      </el-button>
</template>
<script>export default {
  name: 'bc-btn',
  //props를 사용하여 자식컴포넌트에서도 사용가능하게함.
  props: {
  	title:{
    	type:String,
        default:'title'
    }
    size: {
      type: String,
      default: 'default'
    },
    color: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    //현재 vue에서 사용할 데이터들 
    data(){
    	return{
        	loading:false,
        }
     },
     methods:{
     //버튼 클릭시 @click이벤트로 인해발동
     	btnClicked(){
        	alert("버튼 클릭!");
        }
     }
  },
</script>

 

위에는 템플릿을 button 템플릿을 만들어논것입니다.

 

<bc-btn
	title:"나만의버튼"
    :size:"size"
    type:"warning"
>
</bc-btn>

<script>
import bcBtn from 'bcBtn'
Vue.component(bcBtn.name,bcBtn);
export default{
	data(){
    	return{
        	size:"mini",
        }
	}
}
</script>

 

이런식으로 props에 적은 속성명들을 사용 할 수 있습니다. 큰 장점으로는 컴포넌트를 사용하는 곳마다

다른 버튼과 다른 메서드를 적용 시킬 수 있고, v-bind와 일반 변수와 혼용해서 사용 할 수도 있습니다.

 

다음에는 el-tree에 대해서 알아보도록 하겠습니다.