반응형 Vue8 Binding(vue.js) [데이터를 html에 바인딩] 안에 있는 데이터는 템플릿 블록에 있는 html과 연결한다. 스크립트를 통해서 데이터 유지관리를 해야한다. 정적인 속성과 달리 이름 속성값이 변경될 때마다 템플릿의 값도 업데이트 되는 장점을 갖고 있다. {{ name }} Heading 버튼 Status [v-text, {{}} ] 텍스트를 바인딩 하는 방법은 2가지가 있다. 1. 머스테치 {{}} 2. v-text 하지만 mustache 구문을 사용하는 것을 추천한다. [v-html] innerText가 아닌 innerHTML 속성에 연결된다. html을 파싱하여 화면에 출력되는데 보안에 취약하다. v-html 사용은 권장되지 않는다. [v-bind] Heading 버튼 [v-bind:class] Status isProm.. 2023. 1. 5. Vue Router(1) 라우터란? (Router) vue에서 말하는 라우터는 URL에 따라 어떤 페이지를 보여줄지 매핑을 해주는 라이브러리이다. 설치 npm install vue-router 정의 [라우터/ router] 경로: src/router/index.js 해당 경로에 라우터 객체를 생성한다. [라우트/ route] 각 라우트들은 URL에 대한 컴포넌트를 매핑해줄 정보를 정의한다. 사용방법 1. routes 정의하기 각 route에 대한 매핑정보를 정의하고 routes 배열을 생성한다. // src/router/index.js import HomeView from '@/views/HomeView.vue'; import AboutView from '@/views/AboutView.vue'; const routes = [ .. 2023. 1. 2. fetching data (vue.js) (현재 셋팅 상태: json-server를 사용하여 가상 데이터를 생성했음) 이제 vue에서 데이터를 패칭을 할 때 어떻게 해야하는지 알아보자. vue의 생명주기에서 페이지가 로딩시에 진행되는 순서를 다시 생각해보면, 부모 created -> 자식 created -> 자식 mounted -> 부모 mounted 이 상태를 잘 기억하고 있어야 한다. created는 인스턴스가 작성이 된 후에 동기적으로 호출된다. 데이터 초기화 선언시에 주로 created를 사용하는데 가상돔을 사용할 수 없는 상태이다. mounted는 인스턴스가 마운트 된 직후이기에 가상돔을 핸들링 할 수 있는 상태이다. * [ 먼저, 데이터를 가져오려면 언제 어디서 얻을 수 있는지?] dom을 생성할 때 실행되는 생명주기 훅인 mount.. 2022. 12. 26. 데이터 양방향 바인딩 (vue.js) v-model, computed, watch [v-model] - 입력창 이벤트 예시 {{ word }} v-on의 단축키 중 @keyup 사용 textmodifer에서 e를 파라미터로 전달해주고 word에는 해당 입력의 value값을 지정 입력되는 값: {{ word }} v-model 양방향 바인딩 (Data Two Way Binding) v-model="내가 원하는 Data값" input value를 write값으로 바인딩 한다. textModfier 메소드를 이용해서 write값을 변경해주어 하나의 키워드로 해결할 수 있다. {{ write }} @input 실시간 입력 값 데이터 공유 즉각적으로 표현되지 못하는 한글 영어와 달리 한국어는 조합이 필요하기에 input입력값에 즉각적이 표현이 안된다.. 2022. 12. 25. 이전 1 2 다음 728x90 반응형
