반응형 Framework/vue_Foundation13 Conditional Rendering(v-if, v-show) Conditional Rendering [v-if] [v-else] [v-else-if] [v-show] The number is zero The number is negative The number is positive Not a number conditionally render multiple elements vishwa codevolution vue div로 감싸져있는 h2요소들이 있다. 해당 코는 콘솔에서 확인해보면 콘솔에서도 마찬가지로 div안에 h2 요소들이 있는 것을 확인할 수 있다. 하지만 div대신 template으로 감싸게 된다면 콘솔에 찍히는 모양이 다르다. vishwa codevolution vue dom에 대한 추가된 사항이 없이 h2요소만 찍히게 되는 것을 확인할 수 있다. [v.. 2023. 1. 5. 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 VSCode Snippets extension https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets Vue VSCode Snippets - Visual Studio Marketplace Extension for Visual Studio Code - Snippets that will supercharge your Vue workflow marketplace.visualstudio.com vbase 단축키 사용 vscode extension 단축키도 되어있음 2023. 1. 2. Lifecycle Hooks (vue.js) Lifecycle Hooks이란? 컴포넌트에서 생명주기 기능(생성, 수정, 소멸)의 과정을 말한다. 대표적인 경우 템플릿을 컴파일 하는 경우 데이터 설정이 필요한 경우 컴포넌트를 dom에 마운트 하는 경우 데이터가 변경되어 dom을 업데이트 하는 경우 Lifecycle Hooks 단계 크게 created, mounted, updated, destroyed 4단계로 나뉘어 진다. creation: 생성 단계 DOM이 생성되기 전 단계 beforeCreate, created 다른 훅과 달리 서버 렌더링 과정 중에도 실행이 된다. [beforeCreate] - 라이프사이클에서 가장 먼저 실행된다. - 컴포넌트가 DOM에 가장 처음으로 추가되기 전 상태를 말한다. - 컴포넌트가 DOM에 추가되기 전이기 때문에 .. 2022. 12. 25. 이전 1 2 3 4 다음 728x90 반응형
