vue3, <script setup> 의 마법
못생겼는데 개발 잘하는 머리 큰 친구가 알려줬다.
vue 3 버전에서는 export default 를 안써도 된다.
뷰 전용 문법들 같은 애들이 기존 자바스크립트 소스코드 모양새로 변했다.
import 'v-calendar/dist/style.css';
import {DatePicker} from 'v-calendar';
import DateUtil from "@/assets/js/DateUtil";
export default {
name: "ListComponent",
components: {
datePicker: DatePicker,
},
mixins: [DateUtil],
data()
{
return {
calendarOn: false
.
.
.
methods: {
generatePageSize()
{
return page.substring( page.length - 2, page.length );
},
generateFormForCrawling()
{
return {
targetRow: targetRow
.
.
.
mounted()
{
const today = new Date();
.
.
.
<script setup>
import {OnClickOutside} from '@vueuse/components'
import searchParams from "@/codes/SearchParams.json";
import {onMounted, ref, watch} from "vue";
import {yyyyMMdd} from "@/assets/js/DateUtil";
import {DatePicker} from 'v-calendar';
import axios from "axios";
const calendarOn = ref( false );
.
.
.
const generatePageSize = function()
{
return page.value.substring( page.value.length - 2, page.value.length );
}
const generateFormForCrawling = function()
{
return {
pageNum: page.value,
.
.
.
watch( dates, () =>
{
termStartDt.value = yyyyMMdd( dates.value["start"], "." );
termEndDt.value = yyyyMMdd( dates.value["end"], "." );
} );mounted -> onMounted 처럼 바뀐 부분과 해당 변수가 ref 로 선언되어야 한다는 점 등을 숙지하면 편하게 코드 짤 수 있다.
듣기론 {{result | filter1 | filter2}} 식으로 처리되던게 이젠 filter1( result ) 처럼 된다는데 method chaining 을 이용하면 비슷하게 구현되지 않을까 싶다.
-끗-