Frontend/Vue3 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. 이전 1 다음
