반응형 분류 전체보기137 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. 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. 이전 1 ··· 13 14 15 16 17 18 19 ··· 35 다음 728x90 반응형