기록 블로그

Computed

<div id="hello">
<p> 역순 : "{{reverseHello}}"</p?

var vm = new Vue({
    el : '#hello'
    data: {
        hello: 'HEOLL'    
    },
    coumputed: {
        reverseHello() {
            return this.hello.split('').reverse().join('')  // LLOEH
        }
    }
})

hello 가 변경되지 않는 한 reverseHello를 여러번 요청해도 계산이 다시 되지 않고 계산 되어 있던 결과를 즉시 반환한다

cf) function

computed는 해당 속성이 변경될때만 함수가 실행된다.

언제 computed 사용?

• 캐싱을 원하는 경우 사용
• computed의 set, get속성

computed: {
    fullName: {
        get:function() {
            return this.firstName+''+this.secondName
        },
        set:function() {
            let name=newValue.splite('')
            this.firstName = names[0]
            this.lastName = name[names.length-1]
        }
    }
}

watch

• 옵션

  deep: true - Objects 내부의 중첩된 값 변경 감지

  immediate: true - 표현식의 현재 값으로 즉시 콜백 호출

  • 첫번째 콜백할때 호출함

  • 만약, 콜백대신에 unwatch 함수를 먼저 호출하고 싶으면

    watch: {
      value: {
          handle(newVal) {
              this.doSomething()
          }
          immediate: true
      }
    }

     

• 파일명 - 파스칼 케이스 이용

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) // 가능
    }
}