Vue/Vue.js12 2-2. mixin mixin이란?아래처럼 일반적인 vue 컴포넌트에서 export default 부분을 별도 자바스크립트로 만드는 것이라고 보면 된다 많이 중요하다고 생각하는 함수를 mixin 파일 javascript 파일로 만들어 놓으면, 중복적으로 component method를 만들 필요가 없어진다. 아래와 같은 사용법으로 하나로 병합해준다. (created는 created 끼리, mounted는 mounted)그리고 mixin 자바스크립트 먼저 실행된다. ---------------전역으로 설정하기 index.jsimport axios from 'axios'export default { methods: { async $get(url) { return await axios.get(url).. 2024. 9. 21. 2-1. Custom Directive v-model, v-for, v-if, v-show 이런게 vue에서 지정해놓은 default directive 이다.그런데 custom directive라고 하는 것은, Vue에서 default로 만들어 놓은 디렉티브 외에도 개발자가 추가적인 디렉티브를 만들어서 선언해서 사용할 수 있게끔 제공을 해주는 것이다. 기본 사용법1. data를 아무것도 binding 안 해도 된다.아래에서 v-focus2. 하나의 값만 binding 해도 된다.아래에서 v-color3. key-value로 여러개 넣어도 된다.아래에서 v-demotemplate> div> div> label for="email" class="form-label">이메일주소label> input type="email.. 2024. 9. 20. 1-11. slot slot이란?특정 부분만 html 요소를 재정의해서 사용할 수 있게끔 해주는 방식을 slot 이라고 한다. SlotView.vuetemplate> div> button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal" > Show Modal button> button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal2" > Show Modal button> slot-modal modalId="userModal"> temp.. 2024. 9. 13. 1-10. 재사용 컴포넌트, 심플 그리드 ListViewtemplate> div class="container"> button class="btn btn-primary me-1" @click="doSearch">조회button> button class="btn btn-danger" @click="doDelete">삭제button> 제품코드 제품명 제품가격 {{ drink.drinkId }} {{ drink.drinkName }} {{ drink.price }} --> simple-grid :headers="he.. 2024. 9. 13. 이전 1 2 3 다음
