바인딩변수

// views/AttributeView.vue // vueInit 단축키 // 메뉴 path : /attribute

바인딩변수2 : 또다른 방법, 태그에 사용하기

속성에 바인딩

class 변수

버튼

스타일

export default {
data() {
return {
num: 10,
str: "A",
isDisabled: false, // 활성/비활성 조작가능
design: {
color: "green",
fontSize: "30px",
},
// TODO: 사용법 : require('이미지경로')
image: require("../assets/img/amsterdam.jpg"),
/ @: 절대경로 (@ == src) /
image2: require("@/assets/img/paris.jpg"),
};
},
};

};

반복문 : v-for

<!-- 간단연습 배열변수 arr2를 만들고 반복문 이용 출력하세요 -->
<ul>
  <li v-for="(data, index) in arr2" :key="index">{{ data }}</li>
</ul>

export default {
data() {
return {
arr: ["딸기", "오렌지", "사과"],
arr2: ["가", "나", "다"],
};
},
};

조건문 : v-if

<!-- TODO: 간단연습 : a 변수가 true 이면 1번째 가 보이고
    , false 이면  2번째가 보이게 하세요 -->
<p v-if="a == true">1번째</p>
<p v-else>2번째</p>

export default {
data() {
return {
first: false,
second: true,
a: true,
};
},
};

메서드

export default {
data() {
return {
msg: "안녕하셈",
msg2: "안녕하셈2",
};
},
// TODO: 함수추가
methods: {
btn() {
// 사용법 : data의 변수 : this.변수
alert(this.msg);
},

btn2() {
  // TODO: 하드코딩된 변수를 만들어서 고치세요
  alert(this.msg2);
},
/* TODO: 매개변수가 있는 함수 */
btn3(num) {
  alert(num);
},

},
};

오브젝트

객체배열(json) 반복문 적용

{{ data.text }}

<!-- TODO: 간단연습 : 객체배열 출력 : images2 : text, src (속성2개) -->
<div v-for="(data, index) in images2" :key="index">
  <p>{{ data.text }}</p>
  <img :src="data.src" alt="" />
</div>

export default {
data() {
return {
images: [
{
text: "암스테르담",
url: "http://www.raileurope.co.kr/place/amsterdam-centraal",
src: require("@/assets/img/amsterdam.jpg"),
},
{
text: "파리",
url: "https://www.louvre.fr/en/homepage",
src: require("@/assets/img/paris.jpg"),
},
],

  images2: [
    {
      text: "프라하",
      src: require("@/assets/img/praha.jpg"),
    },
    {
      text: "비엔나",
      src: require("@/assets/img/vienna.jpg"),
    },
  ],
};

},
};

폼

// FormView.vue // vueInit

export default {
data() {
return {
userId: "홍길동",
password: "",
gender: "여",
trip: true,
age: false,
food: "햄버거",
};
},
};