vue (4) 썸네일형 리스트형 v-model 과 v-bind:value (:value) 의 차이 (v-on (@)) v-bind:value (= :value) input 태그에 v-bind:value 로 바인딩 한 경우 input 에 2222를 입력하면 {{testData}} 는 1111 그대로다 btn을 클릭하면 console.log(this.testData) 값도 1111 그대로다 v-bind:value 는 :value 와 동일하다 v-bind 생략가능 v-model input 태그에 v-bind:value 를 v-model로 바꾸고 나머지 코드 동일한 경우 input 에 2222를 입력하면 {{testData}} 부분에 2222가 된다. input 에 값을 입력하면 입력값 변화가 화면의 보인다 btn을 클릭하면 console.log(this.testData) 값이 input 에 입력한 값과 같다. v-bind:v.. 메모장으로 vue 시작하기 1.마우스 오른쪽 클릭 > 새로만들기 > 텍스트 문서 > aaaaa.html 파일확장자 바꾸기 2.메모장을 열고 aaaaa.html을 드래그하여 메모장위에 올린다. -> 메모장명이 aaaaa.html 이됨 3. https://vuejs.org/guide/quick-start.html#using-vue-from-cdn 의 소스 복사 {{ message }} 더보기 https://vuejs.org/guide/quick-start.html#using-vue-from-cdn Quick Start | Vue.js vuejs.org 4. 메모장 저장 후 aaaaa.html 파일을 더블클릭하여 확인. message:'Hello Vue! 내용을 변경하여 확인' -끝- Vue 생명주기 LifeCycle(mounted, v-if) vue3 vue2 vue3 vue2 Lifecycle 출처 https://vuejs.org/guide/essentials/lifecycle.html#registering-lifecycle-hooks https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram vue3 vue2 출처 https://vuejs.org/api/options-lifecycle.html https://v2.vuejs.org/v2/api/#Options-Lifecycle-Hooks before Create Called when the instance is initialized. Called immediately when the instance is initialized, after .. vue의 장점(Vue Router(routing), SPA, SSR, Hydration,<template>) 1. Vue Router 라이브러리로 SPA( Single-Page Application)가 가능하다. SSR도 가능하다. 용어 정리 * SPA ( Single-Page Application) * SSR ( Server-Side Rendering) 클라이언트 측 대. 서버측 라우팅 서버 측 라우팅은 서버가 사용자가 방문 중인 URL 경로에 따라 응답을 발송하는 것을 의미합니다. 기존의 서버 렌더링 웹 앱에서 링크를 클릭하면 브라우저는 서버로부터 HTML 응답을 수신하고 새로운 HTML로 전체 페이지를 다시 로드합니다. 그러나 단일 페이지 응용 프로그램(*SPA)에서 클라이언트 측 자바스크립트는 탐색을 가로채고, 새로운 데이터를 동적으로 가져오며, 전체 페이지를 다시 로드하지 않고 현재 페이지를 업데이트할.. 이전 1 다음
