본문 바로가기

vuejs4

Vuetify에서 호버 구성 요소를 사용하는 방법 codingbeautydev.com에서 이 기사의 최신 버전을 읽어보십시오. CSS :hover pseudo-class를 사용하여 마우스 포인터의 요소 스타일을 사용자 지정할 수 있지만 Vuetify는 v-hover 구성 요소를 통해 깔끔한 방법을 제공합니다. 어떻게 사용할 수 있는지 이 글에서 알아보겠습니다. v-hover 사용 Hover over me! v-hover 기본 슬롯은 호버 구성 요소 하위의 현재 호버 상태에 따라 값이 변경되는 호버 요소를 제공합니다. 마우스가 호버 위에 있지 않으면 호버 기본 슬롯은 거짓으로 유지됩니다. 우리의 경우, 그러면 카드의 고도가 2로 설정됩니다. 그리고 우리가 그 위를 맴돌면, 호버(hover)가 참이 되고 카드 상승이 12가 됩니다. 열기 지연을 가리킵니다... 2022. 1. 27.
Laravel Mix를 사용하여 Vue 3 , Adonis JS 설정 a Donis JS는 Laravel에 비해 몇 가지 이점이 있는 Laravel 유사 풀 스택 노드 JS 프레임워크 중 하나입니다. 제가 Adonis JS를 사용한 이유 중 하나는 일부 블록체인 프로젝트(Eth/Algo)가 자바스크립트 SDK만 제공했기 때문입니다. 물론 풀스택 프로젝트 내에서 프런트엔드(Vue/React JS)를 사용하여 블록체인 개발과 관련된 모든 작업을 처리할 수 있지만, 백엔드에서 해당 SDK를 전혀 지원하지 않으면 유연성이 떨어질 수 있습니다. 우리는 Adonis JS가 프런트엔드를 위한 엣지 템플링 엔진을 가지고 있다는 것을 알고 있습니다. 하지만 때때로, 사용. 내용 개요 아도니스 Vue 3 설정 #1 아도니스 우선 아도니스 프로젝트를 설치하는 것부터 시작합시다. 이 예에서는 .. 2022. 1. 4.
작업 목록(목록, 여백, 확인란)을 표시하는 아름다운 할 일 목록 앱을 Vuetify에서 작성 Vuetify.js를 사용하여 처음부터 끝까지 할 일 앱을 만드는 진행 중인 튜토리얼 시리즈에 오신 것을 환영합니다. 지난 회에서 우리는 앱의 툴바를 만드는 것으로 시작했습니다. 오늘은 데이터를 표시하고 상호 작용을 추가할 것입니다. 먼저 생성할 목록을 채울 샘플 작업을 만들어 보겠습니다. 이후 튜토리얼에서는 사용자가 직접 작업을 추가할 수 있도록 할 것이지만, 현재 샘플 데이터는 다음과 같은 작업을 수행해야 합니다. src/App.vue Tasks JavaScript 배열 맵() 방법을 사용하여 각각 고유한 ID, 제목 및 참고를 가진 10개의 샘플 작업 목록을 자동으로 생성합니다. 태스크 목록 표시 v-list 구성 요소 및 기타 하위 구성 요소를 사용하여 작업 목록을 표시합니다. v-list는 v-.. 2021. 12. 30.
vue js에서 데이터 필터링 계산됨 데이터를 필터링할 때는 계산된 내용을 이해해야 합니다. 필터링을 수행할 수 있는 여러 가지 방법이 있으며 곧 다른 방법을 알려드리겠습니다. 어떤 방법이 더 나은 해결책일 수도 있고 어떤 방법이 더 나쁜 해결책일 수도 있다. 먼저 데이터 목록이 있다고 가정해 보겠습니다. 첫 번째 방법은 v-for를 사용하여 템플릿 페이지에 이 데이터를 표시하는 것입니다. 이를 위해 사용할 테스트 데이터는 다음과 같습니다. students”: [ { “id”: 1, “age”: “17”, “studName”: “James Hardy”, }, { “id”: 2, “age”: “23”, “studName”: “Jon Jonasson”, }, { “id”: 3, “age”: “80”, “studName”: “Tom Har.. 2021. 12. 30.