본문 바로가기

Frontend23

PDF 파일아나 다양한 올린 파일 저장 및 새창에서 열기 간단하게 말해 기능을 있어보이게 한 내용이다. 가끔 다른 사이트를보면 PDF 나 다른 문서들을 클릭하면 해당 파일이 저장되거나 새로운 창이 열리면서 해당 파일이 열리는 경험을 사이트를 돌아다녀보면 많이 확인하였을 것이다. 그 부분에 관하여 아주 간단하게 설명한 내용이다. 물론 로컬 피시에서 사용하기 위해 내 프로젝트에 파일을 미리 올리거나 서버에 올리는 경우에는 서버나 해당 다른 경로에 파일을 올려두어야 한다. 여기에서는 총 3가지 방법을 알아볼 생각이다. 1. 내 프로젝트 내에 PDF 파일을 올리고 다운로드 하는 방법 PDF 다운로드 내 download 를 작성하여 다운로드할 수 있게 한 간단한 기능이다. download를 쓰지 않으면 현 페이지에서 내가 올린 PDF를 열어주게 된다. 그러면 내가 보고.. 2023. 9. 10.
Vue 기본 예제2 ✔ 기본예제 1 동적으로 바인딩된 나의 title을 보려면 몇 초 동안 마우스를 올려 놓으세요! 이것은 빨간색이어야 합니다! 전환하려면 저를 클릭하세요!! 이것은 녹색이어야 하며, 클릭 시 녹색과 파란색 사이를 전환합니다. this.isRed에서 isRed의 default 값은 True이다. click 한 경우 != 메소드 발생하여 False가 되어 색이 변하게 된다. ✔ 기본예제 1 결과 ✔ 기본예제 2 목록 전환 숫자 추가 숫자 제거 목록 뒤집기 {{item}} 목록이 비어있지 않지만, 숨김처리 되었습니다 목록이 비었습니다 v-if, v- else-if 문을 사용하여 원하는 출력을 할 수 있다. ✔ 기본예제 2 결과 기본예제 3 텍스트 입력 {{ text }} 체크박스 체크됨 : {{ checked .. 2023. 3. 2.
Vue 기본 예제 ✔ 기본예제 1 {{ message }} {{message1}} mount(".app") 은 class app을 사용하여 메시지를 출력할 것이다 ✔ 기본예제 1 결과 ✔ 기본예제 2 숫자 세기: {{count}} button @ click ="increase" : 버튼을 클릭 시 increase 함수 발동하여 숫자 증가시키기 ✔ 기본예제 2 결과 ✔ 기본예제 3 {{ message }} 메시지뒤집기 "!" 추가하기 e.preventDefault()가 작동하는 링크 ✔ 기본예제 3 결과 2023. 3. 1.
Vue 기본 Vue.js 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크 MVVM(Model-View-ViewModel) 패턴의 ViewModel에 해당하여, UI코드와 데이터제어 로직을 분리 view 변경 methods: { change: function(){ // 클릭 시 change라는 함수 실행 this.message = "바이 뷰!" } } 변경 methods: { change: function(){ // 클릭 시 change라는 함수 실행 this.message = "바이 뷰!" } } mounted(){} Vue의 기본 함수, 초기 화면이 렌더링 되고 실행되는 함수 methods : { ~~ }, mounted(){ console.log(`숫자 초기값은 .. 2023. 2. 25.