vue2 basic

유튭 기본강의 리스트

비교영상 : options, composition, setup

v-bind:value="myValue"
v-bind: => :

v-on:click="myFunction"
v-on: => @

v-on:click.prevent="myFunction"

v-model="myData"

methods : 호출 할 때마다 실행.
computed : 바로 리턴값으로 저장되어 여러곳에 바로 대입 가능.
watch : new, old 파라미터로 데이터 변경감시.

css class 적용

:class="{className:isOn}"
data {
	return {
    	isOn : false
	}
}

props

props : {
	title : {
    	type : String,
        required : true, (default : 'default_text')
    }
}

$emit 부모에게 값전달

<input
       type="text"
       :value="name"
       @input="updateName"> <!--타이핑시 발동-->

methods : {
	updateName(e){
  		console.log(e.target.value);
        this.$emit('update-name',e.target.value);  /*부모에게 전달*/
    }
}

<MyComponent :name="name" @update-name="updateName" />
methods :{
	updateName(name){
    	this.name = name;
    }
}

<input
       type="text"
       :value="name" 
       @input="$emit('update-name',$event)"> 

<MyComponent :name="name" @update-name="name = $event.target.value" /> 

간단히

<input
       type="text"
       :value="value" 
       @input="$emit('input',$event.target.value)"> 

<MyComponent v-model="name" />

#slot

in MyComponent

<slot name="header" ></slot>
<slot></slot>

in Component imported

<MyComponent>
	<template v-slot:header={myData}>
  		<p>header_con {{ myData }}</p>
	</template>
	<template v-slot:default>
  		<p>default_con</p>
	</template>
</MyComponent>

<slot name="header" :myProp="myProp"></slot>
<slot></slot>
data : {
	myProp : 'myData'
}

<MyComponent>
	<template #header="props">  
  		<p>header_con {{ props.myProp }}</p>
	</template>
	<template v-slot:default>
  		<p>default_con</p>
	</template>
</MyComponent>