Dev.FrontEnd
(4)
🔖
Dev.FrontEnd/Vue.js2
📅
2025. 2. 3. 17:43
[Vue.js2] V-bind
V-bind란 ✔️개념속성, 동적 클래스, 동적 스타일, HTML 속성 등 다양한 곳에 사용할 수 있다.객체 바인딩을 사용하면 여러 속성을 한 번에 바인딩할 수 있다.v-bind는 vue에서 데이터와 DOM 속성을 연결하는 중요한 역할을 한다. 🔑Key-Pointv-bind를 통해 부모컴포넌트(app.vue)와 자식컴포넌트(test.vue)에 props를 동적으로 바인딩(연결) 할 수 있다.한 예로 부모의 input에 v-model에 데이터가 변할 때마다, 자식컴포넌트의 데이터도 변경시킬 수 있다. 🛠️소스설명*app.vue v-bind:속성명="데이터"를 하게 되면 자식컴포넌트에게 이 속성명과 데이터를 보내게 된다.그럼 자식에서 이 속성명을 props의 속성으로 받아주면 된다.부모에서 데이터를 ..
[Vue.js2] V-bind
V-bind란 ✔️개념속성, 동적 클래스, 동적 스타일, HTML 속성 등 다양한 곳에 사용할 수 있다.객체 바인딩을 사용하면 여러 속성을 한 번에 바인딩할 수 있다.v-bind는 vue에서 데이터와 DOM 속성을 연결하는 중요한 역할을 한다. 🔑Key-Pointv-bind를 통해 부모컴포넌트(app.vue)와 자식컴포넌트(test.vue)에 props를 동적으로 바인딩(연결) 할 수 있다.한 예로 부모의 input에 v-model에 데이터가 변할 때마다, 자식컴포넌트의 데이터도 변경시킬 수 있다. 🛠️소스설명*app.vue v-bind:속성명="데이터"를 하게 되면 자식컴포넌트에게 이 속성명과 데이터를 보내게 된다.그럼 자식에서 이 속성명을 props의 속성으로 받아주면 된다.부모에서 데이터를 ..
🔖
Dev.FrontEnd/Vue.js2
📅
2025. 1. 13. 17:43
[vue.js 2] v-if vs v-show 차이점과 예제 비교
v-if 와 v-show 차이점과 예제 비교 v-show 조건이 true일 때 해당 엘리먼트(태그같은거)를 DOM에서 실제로 추가하고, 조건이 false일 때 DOM에서 해당 엘리먼트를 제거합니다.즉, v-if는 엘리먼트의 렌더링 자체를 제어합니다. Toggle 이 내용은 조건이 true일 때만 보입니다. v-show 조건이 true일 때 해당 엘리먼트를 보이게 하고, 조건이 false일 때는 숨깁니다. 하지만 DOM에서 제거되지는 않으며, display: none 스타일을 적용하며 화면에 보이지 않도록 만듭니다. Toggle 이 내용은 조건이 true일 때 보이지만, DOM에서 사라지지 않습니다.
[vue.js 2] v-if vs v-show 차이점과 예제 비교
v-if 와 v-show 차이점과 예제 비교 v-show 조건이 true일 때 해당 엘리먼트(태그같은거)를 DOM에서 실제로 추가하고, 조건이 false일 때 DOM에서 해당 엘리먼트를 제거합니다.즉, v-if는 엘리먼트의 렌더링 자체를 제어합니다. Toggle 이 내용은 조건이 true일 때만 보입니다. v-show 조건이 true일 때 해당 엘리먼트를 보이게 하고, 조건이 false일 때는 숨깁니다. 하지만 DOM에서 제거되지는 않으며, display: none 스타일을 적용하며 화면에 보이지 않도록 만듭니다. Toggle 이 내용은 조건이 true일 때 보이지만, DOM에서 사라지지 않습니다.
🔖
Dev.FrontEnd/Javascript
📅
2024. 3. 21. 12:59
[자바스크립트] for vs while 차이점과 closer문제
목차 for vs whileforwhile구하고자 하는 값이 정확한 조건이 있는 경우 사용구하고자 하는 값이 정확한 조건을 정확히 모를 경우, 유동적인 경우 사용조건식, 초기값이 블락 안에 모여있어 가독성이 좋다조건식이 흩어져 있어 가독성이 나쁨출처: https://chaeyoung2.tistory.com/67 [공부하는 공작새:티스토리] 이런 사실은 알고는 있는데 자바스크립트에서 while과 for를 사용하는 도중 settimeout을 반복문을 돌리려 하는데 전혀 다른 결과가 나타났다. let i=0; while(i { console.log(">>>i :", i) console.log(">>winBalls", winBalls) ..
[자바스크립트] for vs while 차이점과 closer문제
목차 for vs whileforwhile구하고자 하는 값이 정확한 조건이 있는 경우 사용구하고자 하는 값이 정확한 조건을 정확히 모를 경우, 유동적인 경우 사용조건식, 초기값이 블락 안에 모여있어 가독성이 좋다조건식이 흩어져 있어 가독성이 나쁨출처: https://chaeyoung2.tistory.com/67 [공부하는 공작새:티스토리] 이런 사실은 알고는 있는데 자바스크립트에서 while과 for를 사용하는 도중 settimeout을 반복문을 돌리려 하는데 전혀 다른 결과가 나타났다. let i=0; while(i { console.log(">>>i :", i) console.log(">>winBalls", winBalls) ..
🔖
Dev.FrontEnd/Vue.js3
📅
2023. 12. 8. 16:10
[Vue.js 3.0] Vue Router createWebHistory(process.env.BASE_URL)에 대해서
router 설정과정에서 무지성으로 createWebHistory(process.env.BASE_URL)를 하곤 했다. index.js안에 이런식으로 말이다. const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }); 그러다 createRouter는 뭐고 history는 뭐고 createWebHistory, process.env.Base_URL이 뭔지 궁금해졌다. createWebHistory를 알아보기 전에 createRouter안에는 이와 같은 구조를 가지고 있다. routes: 라우터의 라우팅 설정을 정의하는 배열입니다. 각 라우트는 경로(path)와 해당 경로에 연결된 컴포넌트(component)..