Technique (56) 썸네일형 리스트형 filter Vue 필터 사용해보기 사용하기 {{ message | capitalize }} 로컬 선언 new Vue({ el: '#app', data: {}, filters: { capitalize (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } } 전역 선언 Vue.filter('capitalize', (value) => { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) 전역선언시 여러 필터를 편하게 사용하는 법 filt.. computed 미리 저장된 상태 값을 만들 수 있어서, 인스턴스 템플릿에서 쉽게 가져다 사용할 수 있다. Setter 와 Getter : 인스턴스와 연관 있는 상태 값(캐싱 값)을 한번에 변경 가능 - computed 함수 대신에 get 속성과 set 속성을 인자로 갖는 객체 리터럴을 전달함 get : 기존에 computed 함수가 했던 일을 대신 해줌 - computed 속성을 인스턴스 템플릿에서 호출했을 때 사용 set : computed 속성에 전달하는 값을 받을 수 있도록 함수를 선언 - 함수 안에서는 전달 받은 값을 분리해서 상태에 각각 저장 캐싱 : 인스턴스 템플릿을 해석할 때마다 인스턴스 상태 값을 새로 갱신하지 않도록 내부에 계산된 속성값을 저장해두는 것 - 성능이 나빠지는 것을 막는 데 큰 역할을 함 .. watch - Handler Vue의 watch에게 세 가지 속성을 지정할 수 있다. immediate deep handler handler는 watch된 속성이 변경될 때 호출될 함수를 지정한다. 우리가 흔히 보았던 코드는 deep, immediate를 지정할 필요가 없는 경우 사용하는 단축표현이다. 단축표현 대신 아래처럼 사용할 수 있다. watch: { movie: { handler(movie) { // Fetch data about the movie fetch(`/${movie}`).then((data) => { this.movieData = data; }); } } } 단축표현을 사용하여 아래처럼 함수를 직접 지정할 수 있다. watch: { movie(movie) { // Fetch data about the movie .. 중첩된 데이터 watch - Immediate watch는 속성의 값이 변할 때 실행되지만, 종종 변경과 관계없이 처음 한 번 실행해야 하는 경우가 있다. 페이지 로드 시 즉시 watch가 실행되도록 할 수 있을까? watch: { // Whenever the movie prop changes, fetch new data movie: { // Will fire as soon as the component is created immediate: true, handler(movie) { // Fetch data about the movie fetch(`/${movie}`).then((data) => { this.movieData = data; }); } } } 중첩된 데이터 watch - deep Vue는 배열이나 객체를 watch할 때, 속성 내부가 변경되었다고 생각하지 않는다. Vue에게 변경을 watch할 때 속성 내부를 검사하길 원한다고 알려줘야 한다. 다음과 같이 deep을 true로 설정하고 handler 메서드를 재배치 함으로써 Vue에게 원하는 바를 알려줄 수 있다. export default { name: 'ColourChange', props: { colours: { type: Array, required: true, }, }, watch: { colours: { // This will let Vue know to look inside the array deep: true, // We have to move our method to a handler field handler() .. FindSelect 만들기 {{item.queryVal}} v-model v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송합니다. text 와 textarea 태그는 value속성과 input이벤트를 사용합니다. 체크박스들과 라디오버튼들은 checked 속성과 change 이벤트를 사용합니다. Select 태그는 value를 prop으로, change를 이벤트로 사용합니다. ex1) ex2) ex1과 ex2가 동일하게 작동됩니다. 스위치와 허브의 차이점 스위치와 허브의 차이점 ○스위치는 특정 데이터를 목적지 포트로만 전달 ○허브는 모든 포트에 전달하기 때문에 포트수가 많으면 많을 수록 느려짐 ○스위치는 포트수와 관계없이 회선을 100% 점유하는 것과 같습니다. 공유기 = 스위치 허브 + NAT 기능 스위치 = 스위치 허브 이전 1 2 3 4 5 6 7 다음
