- 파일명 - 파스칼 케이스 이용
import MyComponent from '@/MyComponent.vue'
export default{
name: 'MyComponet'
}
// 컴포넌트 사용시 <my-component>
- 컴포넌트 이름 규칙 - 케밥 케이스 이용
<my-component></my-component>
prop 이름 규칙 - 카멜 테이스
추천
props: { greetingText: String }
<WelcomeMessage greeting-text="hi/>
비추천
props: { 'greeting-text': String }
<WelcomeMessage greetingText="hi/>
속성값
<!-- good -->
<SideBar : style="{width:sidebar+'px'}"></SideBar>
<!-- bad -->
<SideBar : style={width:sidebar+'px'}></SideBar>
- style : 범위가 지정됨 스타일과 지정되지 않은 스타일은 동일한 컴포넌트에 포함 할 수 있습니다.
<style>
/*전역 스타일*/
</style>
<style scoped>
/*로컬 스타일*/
</style>
v-if / v-show
v-if
- 조건에 따라 컴포넌트가 실제 제거 / 생성
v-show
- 단순 css의 display 속성만 변경
플러그인 사용
Vue.use(Myplugin)
new Vue({
//options
})
배열 변경 감지
변이 메소드(래핑된 메소드)
→ 호출된 원본 배열을 변형
- push()
- pop()
- shift()
- unshift()
- sort()
- splice()
- reverse()
배열 대체
→ 호출된 원본 배열을 변형하지 않고 항상 새 배열 반환
- filter()
- concat()
- slice()
인덱스로 배열에 있는 항목을 직접 설정하는 경우 / 배열 길이를 수정하는 경우 → 불가
var vue = new Vue({
data: {
items: ['a','b']
}
})
vue.items[0] ='c' // 불가능
vue.items.length = 1 // 불가능
// sol
Vue.set(vue.items, indexOfItem, newValue)
vue.items.splice(indexOfItem, 1, newValue)
이벤트 수식어
- .stop - 클릭 이벤트 전파 중단
- . prevent - 제출 이벤트가 페이지를 다시 로드하지 않음
- .capture - 수식어 체이닝 가능
- .prevent - 단순히 수식어만 사용할 수 있음
- .capture - 이벤트 리스너 추가시 캡처 모드 사용 (내부 element 대상으로 하는 이벤트가 해당 element에서 처리되기전에 먼저 처리)
- .self - event.target이 element 자체인 경우 트리거에서 처리
@click.prevent.self - 모든 클릭 막을 수 있음
@click.self.prevent - 엘리먼트 자체에 대한 클릭만 방지
주의
- 변수값 맞추기
- watch에서 object 변경 감지 . ~~이런식으로 해서 하나씩 못함
var person: {
familly: {
count: this.count
live: this.live
},
me: {
age: this.age
colleage: this.highschool
}
}
-> 해당 객체 watch에서 변경감지해서 사용할 경우
watch:{
person(newVal, oldVal){
this.person.familly = newVal.family // 불가능
this.person.me = newVal.me // 불가능
this.person = newVal // 가능
this.person = Object.assgin({}, newVal) // 가능
}
}
'Vue.js > vue2' 카테고리의 다른 글
[vue2] computed 와 watch (0) | 2020.09.30 |
---|---|
[vue2] 뷰 라이프 사이클 다이어그램 (0) | 2020.09.30 |
[vue2] 인스턴스 (0) | 2020.09.30 |
[vue2] 용어 및 기본 개념 (0) | 2020.09.30 |