• 파일명 - 파스칼 케이스 이용
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

+ Recent posts