Vue5 [Kendo Vue + SpringBoot + Oracle] 동적인 메뉴 아코디언 만들기(Creating a dynamic menu accordion) kendo Vue의 treelist를 이용하여 만드는 예제입니다. https://www.telerik.com/kendo-vue-ui/components/treelist/get-started/ Vue TreeList Component Getting Started - Kendo UI for Vue Docs & Demos vue 2.6.11 or 3.0.0Contains the functionality necessary to define Vue components.@progress/kendo-licensingContains the internal infrastructure related to licensing.@progress/kendo-svg-iconsContains the SVG icons for the .. 2024. 1. 3. [Vue.js] Datepicker를 이용한 캘린더 만들기 - 데이터 바인딩 및 오늘 날짜로 설정하기 먼저 datepicker를 다운받아야 하는데요 npm install vue3-datepicker 를 해서 패키지를 받아줍니다. 다음은 본론인 코드로 넘어가겠습니다. 입사일자 ... 이렇게 를 만들어 줍니다. - 상황에 따라 변형은 자유롭게 하면 됩니다. import {ref} from 'vue'; import Datepicker from 'vue3-datepicker'; import axios from 'axios'; let picked = ref(new Date()); // 오늘날짜 const locale = reactive(ko); const inputFormat = ref('yyyy-MM-dd'); export default { ... 변수 선언을 해줍니다. 조회할 때 데이터 바인딩 하는 방법입니다.. 2023. 12. 7. [Vue.js] select 태그에 데이터 바인딩하기 공식사이트 기준으로 먼저 말을 해보겠습니다. Please select one A B C 선택함: {{ selected }} 위와 같은 코드가 나타나는데요 이러한 이미지로 만들어지는 것을 볼 수 있습니다. 출처: https://v2.ko.vuejs.org/v2/guide/forms.html#%EC%85%80%EB%A0%89%ED%8A%B8 저는 저렇게 만들지 않고, v-for 을 이용하여 select 태그를 완성하였는데요 {{ user.name }} data() { return { selWrkTyp: [ {name:"전체", value: ""}, {name:"A", value: "01"}, {name:"B", value: "02"}, ], }; }, 이렇게 완성을 하였습니다. 데이터 바인딩을 v-model.. 2023. 12. 5. [Vue.js] input 태그에 데이터 바인딩하기(feat. v-model, type, :value) 먼저 공식 사이트의 내용을 들고와보자면 메시지: {{ message }} 출저: https://v2.ko.vuejs.org/v2/guide/forms.html#%EB%AC%B8%EC%9E%90%EC%97%B4 이런식으로 생긴 것이 나오는 것을 알 수 있습니다. v-model 을 고집하며 제가 만든 코드는 이러한 코드였습니다. 이러한 코드의 문제점은 1글자만 수정해도 커서가 끊기는 현상이였습니다. 10000이 있는데 11111로 바꾸고자하면 다 지우고 11 다시 클릭해서 111 다시 클릭해서 1111 ... 이런식으로 동작을 하는 것입니다. 이것 저것을 시도해 본 결과 type을 text로 선언하고 :value를 이용하여 데이터를 바인딩해주면 제대로 동작하는 것을 확인할 수 있었습니다. 단순 조회용도라면 .. 2023. 12. 5. 이전 1 2 다음
