728x90
반응형
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
str1 : '문자열입니다',
link : 'https://kr.vuejs.org',
imageName : 'image/pengsoo.jpg',
imageWidth : 200
},
methods : {
setImageWidth : function(){
this.imageWidth = '400'
},
resetImageWidth : function(){
this.imageWidth = '200'
}
}
})
}
</script>
</head>
<body>
<div id = 'test1'>
<h3>{{str1}}</h3>
<a href = 'link'>link1</a><br/> <!--그냥 문자열에 링크만 걸어서 저 data를 연결한 게 아님-->
<a href = {{link}}>link2</a><br/> <!--이것도 오류 남 : bind가 필요한 이유-->
<a v-bind:href = 'link'>link3</a><br/>
<a :href = 'link'>link4</a><br/> <!--v-bind는 생략가능-->
<img src = 'image/pengsoo.jpg' width = 200/><br/>
<img :src='imageName' :width='imageWidth' v-on:mouseenter = 'setImageWidth' v-on:mouseleave = 'resetImageWidth'/><br/>
</div>
</body>
</html>vue 객체에 링크를 저장하는 경우
v-bind:href = '링크 변수' 꼴로 가져와야 한다.
그리고 v-bind는 생략이 가능하다. :href, :src, :width 같은 속성만 놓치지 않고 사용해도 무방하다.
v-on의 경우, 마우스 이벤트를 저장한다.
디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다.
라고 vue.js 한국어 포럼에 친절히 나와있다.
mouseenter : 마우스가 해당 개체를 클릭하면 -> 이미지 크기를 변경
mouseleave : 마우스가 해당 개체 밖을 클릭하면 -> 이미지 사이즈 원상 복구
mouseenter 상태로 펭수를 좀더 크고 귀엽게 감상할 수 있게 되었다.
728x90
반응형
'study > Vue.js' 카테고리의 다른 글
| Vue.js 인라인 바인딩 inline binding (0) | 2022.06.11 |
|---|---|
| Vue.js CSS 클래스 바인딩 (0) | 2022.06.10 |
| Vue.js computed에서 get / set : 변수 받아서 셋팅하기 (0) | 2022.06.08 |
| Vue.js watch computed : 캐시 메모리저장 여부 / 코드 복잡도 차이 (0) | 2022.06.07 |
| Vue.js 컴포넌트 component, v-bind:is 동적할당, 템플릿만들기 (0) | 2022.06.06 |
댓글