반응형 전체 글130 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. Composition API: ref() vs reactive() ref는 primitive type을 받고, reactive는 object를 받는다 라고만 알고 있었다. 하지만 ref도 객체를 다룰 수 있고, reactive와의 차이점을 정리해서 사용할 줄 알아야 한다. //api const post = [{ ..... 여러개 데이터 있음}] export function getPostById(id) { const numberId = parseInt(id); return posts.find(item => item.id === numberId); } 데이터를 export해주는 함수를 생성 const id = route.params.id; const item = ref({}); const fetchData = () => { const data = getPostById(id.. 2023. 1. 2. 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. 이전 1 ··· 11 12 13 14 15 16 17 ··· 33 다음 728x90 반응형
