본문 바로가기

개발(라이브러리,프레임워크)79

computed / watch Computed 반응형 getter 선어형 프로그래밍 computed는 종속대상을 캐싱함 > 종속 대상이 변경될때 만 함수를 호출 아니면 다시 계산하지 않고 캐싱한 결과를 반환함 시간이 많이 걸리는 계산을 할때 computed를 사용하며 효율성이 높아짐 > but 종속 대상이 없으면 값이 변경되지 않는다. 호출 할 때마다 새롭게 계산하는경우 methods를 사용 computed: { changeValue() { return `${this.value}hello; }, }, watch 명형어 프로그래밍 데이터가 변경되었을 때 호출되는 콜백함수를 정의하는 watch 속성 제공 데이터를 감시하다가 데이터가 변경되면 함수가 실행되는 형식 watch: { currentPlayTime(newV, oldV) { //동.. 2020. 11. 25.
vue 에서 proxy 설정으로 CORS 해결 로컬에서 테스트를 하고싶은데 CORS가 날때 해결 방법 vue.config.js 에 proxy 설정 해주기 devServer: { proxy: { // proxyTable 설정 '/api': { // api 로 시작하는 소스 는 traget으로 잡아준다. > 사용할때 url 이 api 가 있어야 한다. target: process.env.VUE_APP_PROD_BASE_DOMAIN, // www.xxx.com changeOrigin: true }, '/aw': { // aw로 url 이 시작하면 이렇게 target을 잡아준다. target: process.env.VUE_APP_PROD_AW_DOMAIN, changeOrign: true }, } } 이렇게 해주면 표면상으로 (내 아이피)121....:80.. 2020. 6. 19.
Vue 인스턴스 vue 인스턴스 뷰를 화면으로 개발하기 위해 필수적으로 생성해야하는 기본단위 new Vue({ ... }); Vue 생성자 : 뷰로 개발할 때 필요한 기능들을 생성자에게 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서 필요하다. 뷰 인스턴스 옵션 속성 인스턴스를 생성할 때 재정의할 data, el , template 등의 속성을 의미함. el 속성: 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미 뷰 인스턴스의 유효범위 뷰인스턴스 생성시 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다. > 인스턴스의 유효범위 뷰 인스턴스 라이프 사이클 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프사이클 속성이라고함 각 라이프 사이클 속성에서 실행되는 .. 2020. 5. 28.
store(vuex) store 설치 npm i vuexvuex 는 상태관리 도구이다. 여러 컴포넌트간에 공유되는 데이터 속성 store/index.js vuex는 플러그인 형태로 제공 Vue.use(Vuex); // 로 vuex사용 export const store = new Vuex.store({ // 인스턴스를 내보낸다. }) main.js 에 등록해줌 import store from './store/index.js'; new Vue({ router, store, // store 등록 // 원래 store: store 이지만 앞뒤가 같으니 생략가능 render: h => h(App) }).$mount('#app') store 에 api 저장후에 view에서 불러오기 state:{ news: .. 2020. 5. 20.
반응형