728x90 반응형 v-bind3 Vue.js 링크 처리: v-bind / v-on 용도 추가 {{str1}} link1 link2 link3 link4 vue 객체에 링크를 저장하는 경우 v-bind:href = '링크 변수' 꼴로 가져와야 한다. 그리고 v-bind는 생략이 가능하다. :href, :src, :width 같은 속성만 놓치지 않고 사용해도 무방하다. v-on의 경우, 마우스 이벤트를 저장한다. 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다. 라고 vue.js 한국어 포럼에 친절히 나와있다. mouseenter : 마우스가 해당 개체를 클릭하면 -> 이미지 크기를 변경 mouseleave : 마우스가 해당 개체 밖을 클릭하면 -> 이미지 사이즈 원상 복구 mouseenter 상태로 펭수를 좀더 크고 귀엽게 감상할 수 있게 되었다. 2022. 6. 9. 19:49 Vue.js 컴포넌트 component, v-bind:is 동적할당, 템플릿만들기 Vue.component를 활용하면 해당 컴포넌트 이름을 태그처럼 불러다 쓸 수 있다. component 밑으로 템플릿을 만들어 data를 지정하고, method를 지정할 수 있으며 이를 함수 형태로 콜할 수도 있음. 데이터를 지정하는 경우에도 함수의 형태로 return시켜야 한다는 점에 유의하자. 타 객체 안에 지정된 컴포넌트는 다른 객체가 불러다 쓸 수 없지만, 범위를 지정하지 않은 경우 다른 객체들이 한 컴포넌트를 동시에 갖다 써도 무방하다. 그리고 객체 하나가 컴포넌트를 여러개 불러쓰는것도 당연히 문제되지 않음. 객체 안에서 components 를 직접 지정하여 호출할 수도 있음 : var test3 부분. v-bind:is 를 사용하면, 동적으로 컴포넌트를 조건에 맞게 호출할 수도 있음. 결과물 2022. 6. 6. 10:44 Vue.js HTML태그 인식하기 / 이미지 불러오기 : v-html, v-bind {{a1}} {{a2}} {{a3}} vue객체에 데이터를 집어넣으면서, HTML 을 넣을 수 있다! 그러나.... 그냥 문자열처럼 똑같이 집어넣으면 리터럴리 문자열로 인식을 해버림. 그래서 v-html 을 넣고, data의 해당 번지를 지정하여 html 태그를 태그로 인식할 수 있도록 처리해줘야 한다. 이미지도 마찬가지로, 그냥 src에 넣어버리면 그냥 이미지 자리만 생기고, 아무 일도 벌어지지 않는다. 그래서 v-bind 를 사용하고, v-bind 뒤에 src , width, height 설정을 붙여야 한다. 이미지 경로는 일반 문자열처럼 똑같이 경로 지정해서 가져올 수 있음. 소스 까보면 똑같이 html에다 직접 넣은 것 처럼 보인다. 2022. 6. 5. 10:18 이전 1 다음 728x90 반응형
